sass系列之 - sass 从脚开始(入门,多图)

sass 系列之 - sass配置与编译 sass-sass的配置 1. sass的安装 sass是基于Ruby语言开发而成的,所以要先安装Ruby。Ruby官网:Ruby下载 根据官网的要求与电脑的配置下载适合你的版本。 在安装过程中。当到了下图步骤,记得勾选 Add Ruby executables to you PATH,将Ruby添加到电脑的配置文件中 验证安装,环境变量的配置是否成功,在命令行下(CMD)输入以下口 阅读详情

上篇文章给大家讲解了一下sass的配置,那么接下来,就让我们一起体验一下sass这个有趣的东西。

在上篇博客中,我们安装了一个叫compass的东西,这个东西是基于sass的一个库。相当于jQuery和js的关系。

现在呢,我们先开始编写sass的准备工作。

创建compass工程
compass create [dir-name]

生成如下目录这里写图片描述
我们记下来要书写的.scss文件放在sass目录下

接下来给大家介绍compass的基本操作指令

compass compile
// 该指令会默认监视上述sass stylesheets 两个目录,只有当.scss文件内容改变时,才会自动编译生成相对应css文件,其他未改变的.scss不会被编译
compass compile --force
// 效果如上相同,但是这个命令执行时,会强制把sass目录下的.scss文件全部先编译成css文件,并保存在stylesheets目录下。

//通过compass监听文件并且控制生成格式(四种)
compass watch --force -s compact/expanded(正常开发中格式)/compressed(压缩)/nested

sass基础语法 beginning

1. sass的注释:

单行注释: // …… 静默注释,不会被编译到css文件中
多行注释: /……. / 会被编译到css文件中(!compressed)
多行注释: /!…../ 即使编译成css的格式为compressed,依旧会被编译到css中

2. sass变量

这里先讲个部分文件的概念
部分文件
sass变量
编译成css后
sass变量编译后

3. 选择器、属性 的嵌套

选择器嵌套
编译成css后
这里写图片描述

4. 父选择器 &

父选择器
编译成css后
这里写图片描述

5. 跳出嵌套

这里写图片描述
编译成css后
这里写图片描述

6. 继承

这里写图片描述
编译成css之后
继承

7. 链式继承

链式继承
编译成css后
链式继承

8. 继承的作用域

这里写图片描述
这个我还得去仔细文档

9. 交叉继承。

说实话,刚接触sass,这里遇到瓶颈,没理解透。以后理解了再更新吧。QAQ

10. 占位符%

占位符
编译成css后
占位符

(这篇博文是以实例讲解,希望大家能看得懂)
好啦。sass的基础入门差不多就这样,由于是根据个人理解所编写的,所以有的地方可能用词不当,求指正,我以后也会常常查看我写的这些博文。发现问题我会及时修改,以免对初学者造成误导。
后续我会更新sass的进阶博文。
欢迎大家评论区评论,不吝赐教,有啥问题我也会尽我所能为你们讲解。谢谢大家的查看。

前端领域Sass在动画页脚变化效果中的应用 本文旨在展示如何利用Sass这一强大的CSS预处理器来创建动态、响应式的页脚动画效果。我们将从基础概念到高级应用,全面解析Sass在动画页脚设计中的实际应用。文章首先介绍Sass和动画页脚的基本概念,然后深入探讨技术实现细节,包括核心算法、数学模型和实际代码案例,最后讨论应用场景和未来发展趋势。Sass:Syntactically Awesome Style Sheets,一种CSS预处理器,扩展了CSS的功能动画页脚:网页底部区域,包含动态交互效果的设计元素CSS3动画。 阅读详情

相关推荐

MDB协议中设备级别和选项(Levels and Options)

MDB协议的LEVEL级别介绍

hbstart的博客 939

SASS基本特性

一、变量 1.1 声明变量 Sass 的变量包括三个部分: 声明变量的符号“$” 变量名称 赋予变量的值 来看一个简单的示例,假设你的按钮颜色可以给其声明几个变量: $brand-primary : darken(#428bca, 6.5%) !default; // #337ab7 $btn-primary-color : #fff !defaul...

djp0910的博客 1176

【亲测可用!】阿里达摩院开源实时数字人对话VideoChat本地部署教程(8G显存可跑)

本文主要记录在部署阿里达摩院开源实时数字人对话VideoChat时遇到的问题,希望对各位技术开发或爱好者有所帮助!

波点兔的博客 3898

sass文件中使用深度选择器 /deep/不起作用

深度选择器 /deep/不起作用

qq_45327886的博客 1万+

1991-2020年气候背景数据集

2011 年,国家气象信息中心对 1951-2010 年 2400 余个地面站气温、气压、降水、湿度、日照等 19 大要素项的定时观测资料和日极值资料中由数字化过程中引起的系统性问题(例如数字化遗漏、整段拷贝等问题)进行质量检测、质量控制和错误数据的更正,形成较高质量的地面基础资料集。1991-2020年中国地面气候值数据集提供了中国2438个站点的气温、降水、气压、风向风速、相对湿度、水汽压、云、天气现象、能见度、蒸发、积雪、地温、冻土、日照共14个要素的气候背景信息。数据时间:30年平均。

地球资源数据云的官方博客 1597

玩转RecyclerView | 实现子视图叠加 | 3D画廊效果 | 高级动效 | Android 3D坐标系介绍

之前写的一篇文章展示了RecyclerView实现的画廊效果,适用于专辑/图片/列表浏览效果。本篇文章阐述如何基于RecyclerView实现如下图所示的3D画廊效果。以下效果的重点在于实现子视图的图层叠加,滑动过程中的3D旋转效果较为简单。(1)无3D旋转效果图片(1)带3D旋转效果图片。

qq_38237224的博客 8159

深度选择器——vue或react中修改组件样式的方法

6.权重问题,因为这种选择器的使用,具有穿透性,即使是引入的组件,通过f12找到元素类名,可以通过这样的方式修改其样式,但要注意,这边修改一个样式,其他地方有的样式也可能会变,这就一定要选择。⭐⭐使用 className 和全局 CSS 样式表:在组件模板中使用 className 属性来设置类名,然后在全局 CSS 样式表中定义对应的样式。⭐⭐使用 class 属性和全局 CSS 样式表:在组件模板中使用 class 属性来设置类名,然后在全局 CSS 样式表中定义对应的样式。

杜永康的博客 6502

Android16 rk3576添加触摸点数上限到40个点

本文介绍了在Android 16系统上实现40点触摸支持的修改方案。相比Android 15,Android 16对API添加有更严格的要求,需要在MotionEvent.java中添加@FlaggedApi批注。主要修改包括:1)在input_framework.aconfig中定义flag;2)在MotionEvent.java中添加40个AXIS_GENERIC轴常量并添加批注;3)将32位指针ID处理改为64位适配;4)更新相关API文档。修改涉及多个核心文件,包括PointerController

tzj1058756809的博客 382

Scss入门教程

Scss入门教程

qq_43391730的博客 1193

YOLO11涨点优化:创新多尺度卷积注意力(MSCA)模块,小目标检测神器!

MSCA模块通过创新的多尺度设计,在保持计算效率的同时显著提升小目标检测能力。实验证明,在YOLOv5/v8等模型上嵌入MSCA后,mAP提升超过2%,小目标检测精度提升近4%,且计算代价增加极小。注意力机制的未来发展方向动态核尺寸:根据输入特征自适应调整卷积核大小跨模态融合:结合RGB与深度/热力图等多模态信息自监督优化:利用对比学习预训练注意力模块尝试在你的YOLO模型中插入MSCA模块,欢迎在评论区分享你的涨点结果!参考文献。

QQ_778132974的博客 470

Vue3+Openlayers教程导航页【目录】

欢迎来到 Vue3+Openlayers 系列教程,这里是我在 优快云 编写的所有 Vue3+Openlayers 系列相关文章的索引页,适合初学者到进阶用户系统阅读。👀 更多教程正在持续更新中,欢迎关注我,一起探索 Openlayers 的强大魅力!

小彭的博客 1273

scss入门

SCSS(Sassy CSS)是一种CSS的预处理器,它扩展了CSS的功能,通过添加变量、嵌套规则、混合(Mixins)、函数等特性,使得CSS的编写更加灵活、强大和易于维护。

DngYT的博客 772

全志F1C100S/F1C200S学习笔记(11)——spi-flash 启动全流程适配烧录及踩坑指南

SPI Flash 系统编译 spi-flash 启动适配 分区规划: 分区序号 分区大小 分区作用 地址空间及分区名 mtd0 1MB (0x100000) spl+uboot 0x0000000-0x0100000 : “uboot” mtd1 64KB (0x10000) dtb文件 0x0100000-0x0110000 : “dtb” mtd2 4MB (0x400000) linux内核 0x0110000-0x0510000 : “kernel” mtd3 剩余 (

丨晋丨 1万+

Sass初探:嵌套只是开始,解锁Sass更多功能

Sass初探,嵌套只是开始,解锁Sass更多功能。Sass(SyntacticallyAwesomeStyleSheets)是一种强大的CSS预处理器,它通过引入变量、嵌套、混合宏(mixins)、函数等功能,极大地提升了样式表的可维护性和开发效率。

qq_46032105的博客 1433

RU DOS版、EFI版32bit/64bit BIOS常用工具

DOS版、EFI版的RU工具,可用来查看IO、MEM、PCI、SMBIOS等资源。亲测在EFI SHELL下可用。

假人有限元模型

假人模型,车辆碰撞假人有限元模型,适合做乘员安全的研究者利用

SASS入门指南

SASS 变量以#326dee161.5"hello"sans-seriftruefalse// 空 Map// 带值的 Map符号代表父选择器的引用在嵌套规则中表示外层的选择器编译时会替换为父选择器的内容使用@mixin// CSS 属性或规则/*** 定义一个按钮样式的 Mixin* 这个 Mixin 提供了基础的按钮样式,包括:* - 文本修饰、光标样式、显示方式* - 边框、内边距、圆角* - 可自定义的背景颜色。

2301_80740728的博客 996

VB摄像头监控

该VB模块可对摄像头捕获的画面进行录像等,可在创建的窗口进行控制

【sass】安装及入门教程

文章目录简介初体验安装编译单次编译实时编译实时监控目录 简介 sass是世界上最好的css扩展语言。在正常的编写css的基础上,增加了很多变量,函数,循环,判断等类似编程语言的代码模式。极大的提高了编写样式的效率。还有许多的内置函数(如颜色加深,颜色淡化)用于高效的属性设置。使得css也可以用类似脚本的方式进行编写。 css编写时权重难以控制,嵌套层级多导致代码编写不方便。sass的出现就是为了解决css的缺点。 sass不能直接被浏览器识别,所以需要进行编译成正常的css文件才能被浏览器使用。 初

qq_45677671的博客 4059

精雕软件(JDpaint) 5.5 绿色版

精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版

快速入门Sass:Sass中的体系结构

sass快速入门 The following is a short extract from our recent book, Jump Start Sass, available for free to SitePoint Premium members. Print copies are sold in stores worldwide, or you can order them her...

culi3182的博客 2258

Sass基础-Sass快速入门01

文章目录一、什么是CSS预处器Sass背景介绍二、把Sass编译成css1、创建项目2、打开命令行工具,把这个sass文件编译成普通的css文件3、自动编译4、Sass编译方式nested 嵌套 (默认)compact 紧凑expanded 扩展compressed 压缩三、Sass 与 Scss的区别四、Scss的变量嵌套写法 一、什么是CSS预处器 CSS预处理器定义了一种新的语言,其基本思想...

欢迎访问我的主页:https://www.bookbook.cc 7415

Sass学习(一)--Sass入门

目录 常用命令 变量 嵌套css规则 群组选择器 子选择器,相邻,同级选择器 属性嵌套 import导入 嵌套导入 sass注释 sass乱码解决 常用命令 sass 命令 sass input.scss output.css:将sass文件输出到指定css文件 sass --watch input.scss:output.css:自动监视sass文件更新到指定css文件 sass --wat...

Sumshine12.5 1705

使用Sass封装倍图混合器

Sass封装倍图混合器是一种方便的工具,用于在编写CSS时处理高清适应性图片。倍图混合器可以实现自动地为不同分辨率的设备生成适当的背景图片。通过使用这个混合器,我们可以避免手动编写多个CSS规则来适应不同的设备像素比。在使用Sass封装倍图混合器时,我们只需要在Sass文件中定义一个背景图片的变量,然后使用这个变量作为参数来调用混合器。混合器会自动根据设备的像素比来生成相应的CSS规则。这使得我们可以轻松地在代码中使用高清图片,而无需手动管理不同设备的适应性。

思考是大脑的源代码,未经编译,却已运行一生。——调试自己,迭代世界。 796

【Sass】SASS入门

SASS入门级教程

喜欢你,像风走了八千里 不问归期 821

sass入门_Sass入门

sass入门New SASS tutorial tells about many aspects of using SASS: installation, known facts, variables, mixins, nested rules, inline imports, and more. It certainly will be useful for beginners programm...

cuken7684698822的博客 859

SASS入门之SASS安装

当然...凭借我这种肤浅的智商,根本不能理解什么叫certificate verfiy fail... 所以找了一段时间的方法,最后终于在一个sass群里找到了... 发在这里纯属作为自己的一个学习笔记。 侵立删 原创是这个.... 以下是看完后的实践过程。 真的可以用!!! sass依赖于ruby环境,所以先下载ruby 1.    按照建议,选择第二项配置

哇咔咔 3825

SASS快速入门

SASS快速入门 一、使用变量   1-1、变量申明   sass的变量的声明和css属性的声明很像: $highlighe-color: #f90;     这意味着变量$highlight-color现在的值是#f90。任何可以用作css属性值的赋值都可以用作sass的变量值,甚至是以空格分割的多个属性值,比如¥basic-border:...

qq_35859392的博客 233

Sass 入门

文章目录Sass 准备把 Sass 编译成 CSS编译文件自动编译 Sass修改编译输出的 CSS 格式.sass与.scss的区别变量-Variables嵌套-Nesting嵌套时调用父选择器嵌套属性混合-MixinsMixin 里的参数继承/扩展-inheritancePartials与@import注释 comment数据类型 - data typetype-of 判断类型number数字函数字符串字符串函数Interpolation(插值)控制指令-Control Directives@if@for

curacaolb的博客 898
上一篇: sass 系列之 - sass配置与编译
下一篇: 前端开发 - 浏览器兼容问题(持续更新)
Deep_sleeper
博客等级 码龄9年 0粉丝 5原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值