Sass/Scss基础知识
1.Sass/Scss是什么?
Sass/Scss 是一种 CSS 的预编译语言。由Ruby开发者设计和开发,语法属于缩排语法。它提供了 变量(variables)、嵌套(nested rules)、 混合(mixins)、 函数(functions)等功能,并且完全兼容 CSS 语法。Sass/Scss 能够帮助复杂的样式表更有条理, 并且易于在项目内部或跨项目共享设计。
Sass/Scss的工作方式是,在Sass/Scss源文件中写代码,然后由Sass/Scss程序(Sass/Scss编译器)将其转化成浏览器可识别的CSS文件。其他常用的CSS预编译语言还有Less,Stylus等。
2.Sass和Scss的关系
由于Sass的缩排语法,对于写惯了CSS的前端开发者而言不够直观,也不能将CSS代码加入到Sass里面,因此Sass对语法进行了改良,Sass3就变成了Scss(sassy css),与原来的语法兼容,只是用{}取代了原来的缩进。
3.Less
Less也是一种动态样式语言,受Sass影响较大,对CSS赋予了动态语言的特性,如变量,运算,继承,运算等,Less既可以在客户端运行,也可以借助node.js在服务端运行。
网址:https://lesscss.org/
中文网址:https://less.bootcss.com/
4.Stylus
Stylus 被称为是一种革命性的新语言,提供一个高效、动态、和使用表达方式来生成 CSS,以供浏览器使用。Stylus 同时支持缩进和CSS常规样式书写规则。需要安装 node。
Stylus 的语法花样多一些,它的文件扩展名是“.styl”,Stylus 也接受标准的CSS语法,但是他也像 Sass老的语法规则,使用缩进控制,同时Stylus 也接受不带大括号({})和分号的语法。
一、安装
npm安装
npm install -g sass
Windows 上安装
choco install sass
Mac OS X (Homebrew)安装
brew install sass/sass/sass
二、编译
这里只展示VSCode扩展Live Sass Compiler的使用,其他的命令行编译和软件方式编译,移步Sass中文网官网https://www.sass.hk/install/#google_vignette
1、下载live sass compiler插件并配置
// 在已有代码下面添加下面代码,一般刚刚下载打开最后一行是:
// "liveSassCompile.settings.autoprefix": [],
// 所以直接把下面复制进去保存就行
"liveSassCompile.settings.autoprefix": [
// ">1%"是指 通过全球使用情况统计信息选择出的高于1%使用率的浏览器版本。
// "last 2 versions"是指 每个浏览器的最后2个版本。
"> 1%",
"last 2 versions"
],
"liveSassCompile.settings.formats": [
{
"format": "expanded", // 出口css样式为展开格式
"extensionName": ".css",
"savePath": "~/../css", // null 为当前目录
"savePathReplacementPairs": null
}
],
"liveSassCompile.settings.generateMap": false, // 去掉编译时出现的css.map文件 "liveSassCompile.settings.excludeList": [
"/**/node_modules/**",
"/.vscode/**"
],
三、语法嵌套
1. 选择器嵌套
避免重复输入父选择器,CSS结构清晰明了,更易于管理
2. 父选择器
在嵌套 CSS 规则时,可以用 & 代表嵌套规则外层的父选择器
2.1给某个元素设定hover样式时
2.2当元素有某个classname时
3. 属性嵌套
- 有些 CSS 属性遵循相同的命名空间 (namespace),比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性,同时也为了避免了重复输入,SCSS 允许将属性嵌套在命名空间中
- 注意font:后面要加一个空格
4. 占位符选择器
有时,需要定义一套公共样式 , 使用占位符选择器%foo,然后通过 @extend
指令引入 ,尤其是在制作 SCSS 样式库的时候,在需要时引入,希望 SCSS 能够忽略用不到的样式,达到简略代码的目的。
5. 代码注释
- 标准的css多行注释 / … / 会编译到.css文件中
- 单行注释 // 不会编译到.css文件
四、变量
1. 定义变量
1.1 SCSS 定义变量的方法
1.1.1 定义规则
- 变量以美元符号($)开头,后面跟变量名;
- 变量名是不以数字开头的可包含字母、数字、下划线、横线(连接符);
- 写法同css,即变量名和值之间用冒号(:)分隔;
- 变量一定要先定义,后使用;
1.1.2 连接符与下划线
2.变量的作用域
2.1 局部变量
定义:在选择器内容定义的变量,只能在选择器范围内使用
2.2 全局变量
定义后能全局使用的变量
2.2.1 在选择器外面的最前面定义的变量
2.2.2 使用 !global 标志定义全局变量
3. 变量值的类型
SCSS 支持 7 种主要的数据类型:
1. 数字,1, 2, 13, 10px,30%
2. 字符串,有引号字符串与无引号字符串,“foo”, ‘bar’, baz
3. 颜色,blue, #04a3f9, rgba(255,0,0,0.5)
4. 布尔型,true, false
5. 空值,null
6. 数组 (list),用空格或逗号作分隔符,1.5em 1em 0 2em, Helvetica, Arial, sans-serif
7. maps, 相当于 JavaScript 的 object,(key1: value1, key2: value2)
4. 默认值 !default
五、@import导入
SCSS 拓展了 @import 的功能, 允许其导入 SCSS 或 SASS 文件 。被导入的文件将合并编译到同一个 CSS 文件中,另外,被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。
1.纯SCSS文件引入注意点
1、如果一个目录正在被 SCSS 程序监测,目录下的所有scss/sass源文件都会被编译,但通常不希望局部文件被编译,因为局部文件是用来被导入到其他文件的。 如果不想局部文件被编译,文件名可以以下划线 (_)开头 ,如下图的 public 最好前面添加 “_” 开头,这样就不会导出 css 文件 ,如 _test.scss 文件,因为我们只是单纯引入,不需要 css 文件。
2、还有就是带()文件,在引入时,可以不写(),即引入 _test.scss , @import “test”
3、这也就意味着,同一个目录下不能同时出现两个相关名的 SCSS 文件(一个不带 ,一个带 ),添加下划线的文件将会被忽略。
2.跟CSS里面@import的区别
如下几种方式,都将作为普通的 CSS 语句,不会导入任何 SCSS 文件
1.文件拓展名是 .css;
2.文件名以 http:// 开头;
3.文件名是 url();
4.@import 包含 media queries。
六、SCSS混合指令(Mixin Directives)
混合指令(Mixin)用于定义可重复使用的样式。混合指令可以包含所有的 CSS 规则,绝大部分 SCSS 规则,甚至通过参数功能引入变量,输出多样化的样式。
1. 定义与使用@mixin
1.1 标准写法
1.2 嵌入选择器
1.3 使用变量
1.4 使用变量(多参数)
1.5 指定默认值
1.6 可变参数
@mixin混入总结
- mixin是可以重复使用的一组CSS声明
- mixin有助于减少重复代码,只需声明一次,就可在文件中引用
- 混合指令可以包含所有的 CSS 规则,绝大部分 SCSS 规则,甚至通过参数功能引入变量,输出多样化的样式。
- 使用参数时建议加上默认值
六、SCSS @extend(继承)指令
在设计网页的时候通常遇到这样的情况:一个元素使用的样式与另一个元素完全相同,但又添加了额外的样式。通常会在 HTML 中给元素定义两个 class,一个通用样式,一个特殊样式。
1. 用占位选择器继承
2. 使用多个@extend
3. @extend多层继承
4. @mixin(混入)和 @extend(继承)的区别
混合它不是公用样式类,而是直接复制一份出来,而继承只是对类添加选择器达到共用的目的,所以继承的话是没有代码冗余的,而混合会有代码冗余。
七、SCSS 运算符 的基本使用
1. 等号 操作符
所有数据类型都支持等号运算符:
符号说明==等于!=不等于
2. 关系(比较)运行符
符号说明< (lt)小于> (gt)大于<= (lte)小于等于>= (gte)大于等于
3. 逻辑 运行符
符号说明and逻辑与or逻辑或not逻辑非
4. 数字 运行符
符号说明+加-减*乘/除%取模 线数字、百分号、css部分单位(px、pt、in…)【线数字与百分号或单位运算时会自动转化成相应的百分比与单位值】
4.1 “+”
4.2 “-”
4.3 “*”
4.4 “/”
注意: " / " 在 CSS 中通常起到分隔数字的用途 ,SassScript 作为 CSS 语言的拓展当然也支持这个功能, 同时也赋予了 " / " 除法运算的功能 。也就是说,如果 " / " 在 SassScript 中把两个数字分隔,编译后的 CSS 文件中也是同样的作用。
以下三种情况 / 将被视为除法运算符号:
1. 如果值或值的一部分,是变量或者函数的返回值
2. 如果值被圆括号包裹
3. 如果值是算数表达式的一部分
注意:如果需要使用变量,同时又要确保 / 不做除法运算而是完整地编译到 CSS 文件中,只 需要用 #{} 插值语句将变量包裹
4.5 “%”
5. 字符串运算
1. “ + ” 可用于连接字符串。
2. “foo” + bar 和 “foo” + “bar” ,运算结果是有引号的, foo + “bar” 和 foo + bar ,运算结果则没有引号。
3. 如果有一个值是函数返回的,情况可能不一样。
八、SCSS 插值语句 #{ }
提出需求:如果需要使用变量,同时又要确保 / 不做除法运算而是完整地编译到 CSS 文件中。
解决方法:只需要用 #{} 插值语句将变量包裹。
九、函数
1.SCSS 常见函数的基本使用
常见函数简介,更多函数列表可看: Sass: Built-In Modules
1.1 Color(颜色函数)
SCSS 包含很多操作颜色的函数。例如:lighten() 与 darken()函数可用于调亮或调暗颜色,opacify()函数使颜色透明度减少,transparentize()函数使颜色透明度增加,mix()函数可用来混合两种颜色。
1.2 String(字符串函数)
SCSS 有许多处理字符串的函数,比如向字符串添加引号的 quote()、获取字符串长度的str-length() 和 将内容插入字符串给定位置的 str-insert()。
1.3 Math(数值函数)
数值函数处理数值计算,例如:percentage()将无单元的数值转换为百分比,round()将数字四舍五入为最接近的整数,min()和max()获取几个数字中的最小值或最大值,random()返回一个随机数。
1.4 List函数
List 函数操作 List,length() 返回列表长度,nth() 返回列表中的特定项,join() 将两个列表连接在一起,append() 在列表末尾添加一个值。
1.5 Map函数
Map函数操作Map,map-get() 根据键值获取map中的对应值,map-merge() 来将两个map合并成一个新的map,map-values() 映射中的所有值。
1.6 selector 选择器函数
选择符相关函数可对CSS选择进行一些相应的操作,例如:selector-append()可以把一个选择符附加到另一个选择符,selector-unify()将两组选择器合成一个复合选择器。
1.7 自检函数
自检相关函数,例如:feature-exists() 检查当前 SCSS 版本是否存在某个特性,variable-exists() 检查当前作用域中是否存在某个变量【注意:例如检测 color不需要加 ,写 color 即可】,mixin-exists() 检查某个mixin是否存在。
自检函数通常用在代码的调试上
十、SCSS 流程控制指令@if、@for、@each、@while
1.@if 控制指令
1. @if()函数允许您根据条件进行分支,并仅返回两种可能结果中的一种。
2. 语法方式同js的 if… else if… else
2.@for 指令
@for 指令可以在限制的范围内重复输出格式,每次按要求(变量的值)对输出结果做出变动。这个指令包含两种格式:@for varfromthrough,或者@for var from to
区别在于 through 与 to 的含义:
1. 当使用 through
时,条件范围包含与的值 *【例:1-5,包含 5】 *。
2. 而使用 to
时条件范围只包含的值不包含 的值 *【例:1-5,不包含 5】 *。
3. 另外,var可以是任何变量,比如 i; 但是必须是整数值。
3.@each 指令
@each 指令的格式是 varin < list > , ‘‘ ‘‘ ‘‘length或者 name,而 < list > 是一连串的值,也就是值列表。
4.@while 指令
@while 指令重复输出格式直到表达式返回结果为 false。这样实现比 @for 更复杂的循环。
十一、@function 的使用
1. 函数的定义与使用
函数的作用:把一些比较复杂或经常用些的内容进行抽离(封装),以便重复使用
1.函数的定义
2.@return
它只允许在 @函数体 中使用,并且 每个 @function 必须以@return结束 。当遇到 @return时,它会立即结束函数并返回其结果。
2. 函数的使用及参数与默认值
2.1 任意参数
2.2 三元条件函数if
语法:if(condition, if-true, 解释:判断 condition,如果条件成立,则返回 if-true 的结果,如果条件不成立,则返回
3.混入mixin和函数function的区别
- 混入mixin主要是通过传递参数的方式输出多样化的样式,为了可以现实代码复用。
- 函数的功能主要是通过传递参数后,经过函数内部的计算,最后@return输出一个值。
十二、@use
1. @use的使用
@import容易混淆 污染 私有性,所以有了@use
1.1. 从其他 SCSS 样式表加载mixin,function和变量,并将来自多个样式表的CSS组合在一起,@use加载的样式表被称为“模块”,多次引入只包含一次。
1.2. @use也可以看作是对@import的增强
1.3. 语法: @use “<‘url’>” as 重命名
2.@use 和 @import 的区别
注意1:使用 @use 时,会把前面所有文件的其中的同类名覆盖,而 @import则不会,会全部显示。
注意2:使用 @use 时,重复引用 一个文件,会报错,但你又想引用,那就需使用模块名。
3. as
3.1 通过 as 使用新定义的模块名
注意:如果下面 没通过模块名 去调用 $font-szie , 就会报错 ,可通过取消命名空间去除报错
3.2 通过 as 取消命名空间
可能@use “” as * 来取消命名空间,这种方式加载的模块被提升为全局模块
注意:这种方式慎用
4. 定义私有成员
如果加载的模块内部有变量只想在模块内使用,可使用 −或 _ 定义在变量头即可
5. 定义默认值
6. @use使用总结
1. @use引入同一个文件多次,不会重复引入,而@import会重复引入
2. @use引入的文件都是一个模块,默认以文件名作为模块名,可通过as alias取别名
3. @use引入多个文件时,每个文件都是单独的模块,相同变量名不会覆盖,通过模块名访问,而@import变量会被覆盖
4. @use方式可通过@use ‘xxx’ as * 来取消命名空间,建议不要这么做
5. @use模块内可通过 −或 _ 来定义私有成员,也就是说或者-开头的Variables mixins functions 不会被引入
6. @use模块内变量可通过!default 定义默认值,引入时可通用with(…)的方式修改
7. 可定义-index.scss或_index.scss来合并多个scss文件,它@use默认加载文件
十三、@forward
作用:通过 @forward
加载一个模块的成员,并将这些成员当作自己的成员对外暴露出去,类似于 *类似于 es6 的 export … *,通常用于跨多个文件组织 SCSS 库
1.转发、合并SCSS
注意:当多个被转发的文件存在相同变量、函数、混入时会有问题,可以通过定义前缀解决
2.选择性转发
默认情况下,** @forward
** 会将一个模块中所有成员都转发,如果只想转发某些成员,当你不想
转发所有变量、函数、混入时, 可使用 hide \ show :
1. @forward "module" hide $var, mixinName, fnName
禁止转发某些成员
2. @forward "module" show $var, mixinName, fnName
只转发某些成员
3.转发时定义前缀
4.转发时配置模块的成员
5.@use 与 @forward 一起使用的情况
当一个模块里面须要同时使用@use与@forward引用同一文件时,建议先使用@forwar后再使用@use,不然某些情况可能报错
十四、@at-root
作用:@at-root是Sass3.3版本中新增的特性,他可以让你在Sass中嵌套选择器,或者做别的事情,但编译出来的CSS却不会发生嵌套。让你的文件更简洁,更干净,更易于维护。可以使被嵌套的选择器或属性跳出嵌套【例子:比如一段嵌套的样式对应的html有一天需要移动到另一层div中,这时,你加了 @at-root 在样式中,就什么都不用动了】
1.普通嵌套
2.使用@at-root跳出嵌套
2.1作用 某个 选择器使其跳出嵌套
2.2作用 某些 选择器使其跳出嵌套
3.使用 @at-root 结合 #{&} 实现BEM效果
3.1@at-root (without: …) 和 @at-root (with: …) 的使用
默认 @at-root 只会跳出选择器嵌套,而不能跳出 @media 或 @support ,如要跳出这两种,需用 @at-root (without: media),@at-root (without: support)。这个语法关键词有四个【@at-root (without: all)、@at-root (without: rule)】:
- all(表示所有)
- rule(表示常规css)
- media(表示media)
- supports(表示supports)
4.@at-root(without…)表示在当前作用域生成的 CSS 规则将 不包含 指定的选择器。例如:
.container { color: red; @at-root (without: .nested) { color: blue; } } .nested { font-weight: bold; }
5.@at-root (with: …) 表示只有指定的选择器会被 包含 在生成的 CSS 规则中。例如:
.container { color: red; @at-root (with: .nested) { color: blue; } } .nested { font-weight: bold; }