关于预处理器 sass 的超全用法

随着用户需求的增加,应用于页面的 css 代码越来越复杂越发臃肿难以维护,但是又没有 css 的替代品,css 预处理器作为 css 的扩展,出现在前端技术中。

sass 是 css 预处理器中常用的一种,它是一种动态样式语言,比 css 多些功能,如变量、嵌套、运算、混入、继承、指令、颜色处理、函数等。

sass 的工作方式是,在 sass源文件中写代码,再由 sass 编译器/转译器 将其转换为最终浏览器所能认识的 css 文件。我们也常定义 scss 后缀名的文件,其实是 sass 语法进行了改良,就变成了 scss。

我们可以通过以下方式来使用 sass。

  • vscode 插件 live sass compiler 结合 vscode 的配置,可实时监听 sass 文件的变化
  • 使用 sass 工具,监听 sass 文件变化,编译 sass 文件成 css文件
  • nodejs 项目中,我们通常会配置 sass-loader 来对 sass 文件进行处理,sass-loader 也依赖于 sass 工具

以下是 sass 的具体语法。

注释

在 css 中注释格式为块注释 /* */,sass 中拓展了行注释 // 的方式,两者的区别在于,块注释 /* */ 通过编译后仍保留在 css 文件中,而行注释 // 不会保留。

(最后一行代码是 live sass compiler 插件生成的 sourceMappingURL指向sourceMap文件,包含编译后代码与源代码的映射关系)

选择器

sass 在兼容 css 的基础上,为选择器增加了一些新用法。

  • 选择器嵌套:选择器以父元素、子元素的方式进行嵌套
  • 父选择器:通过 & 符连接父选择器
  • 属性嵌套:相同属性前缀可以进行嵌套
  • 占位符选择器:与选择器一起使用,通过 @extend 继承

变量

css 代码中我们也会见到变量的形式,在选择器中以 -- 开头定义变量名,通过 var 使用变量。这种方式在 sass 中也可以使用,sass 编译器不会对其进行转换。

sass 中定义变量遵循如下规则,和 js 类似。

  • 变量以美元符号($)开头,后面跟变量名
  • 变量名不以数字开头,可包含字母、数字、下划线、横线(连接符)
  • 变量值支持数字、字符串、颜色、布尔值、空值、数组
  • 写法同css,即变量名和值之间用冒号分隔
  • 变量要先定义,后使用

sass 中变量还有如下属性

  • 选择器内部定义的是局部变量,仅在选择器中可用
  • 在最外层定义为全局变量,所有选择器中都可以使用,选择器中定义的变量通过 !global 也可将其变成全局变量
  • 变量默认值使用 !default,如果该变量未被定义,就使用当前定义的默认值,反之使用已定义的值

导入@import

通过 @import 加载 css 资源到当前的 sass 文件中(sass 引入方式,scss后缀可省略)

@import 'public.scss';

以下几种方式会被当作普通 css 语句

  • 文件拓展名是 css
  • 文件名以 http:// 开头
  • 文件名是 url()

混入@mixin

混入可以将一些搭配使用的 css 定义为一个组,只需声明一次,可在文件中多次引用,有助于减少重复代码,并且还可以通过参数功能引入变量,输出多样化样式。

  • 通过 @mixin 定义,@include 使用
  • 可传参数及设置默认值
  • 当参数数量不确定时,通过 ... 来展开

继承

在网页设计的时候会存在这样的情况,一个元素与另一个元素样式基本一致,只添加了个别额外样式,我们可能会在 HTML 中定义两个样式,一个通用,一个特殊。为避免编写相同样式的重复代码,可以使用 继承 @extend 来解决。

  • 使用 % 定义的占位符选择器,不会被编译
  • 通过 @extends + 选择器名称 来达到继承的效果

混入和继承所能达到的效果比较相似,主要区别在于:继承是并集选择器,通过逗号连接,而混入主要是将代码包含到原有选择器,代码量更多。

运算符

sass 中提供了一些运算符在css表达式中计算、判断。

  1. 等号运算符 == !==
  2. 关系运算符(操作整数)> < >= <=
  3. 逻辑运算符 and or not
  4. 数字操作符 纯数字、百分号、css部分单位(px、pt、in...)
    ① + 号:只有一个单位时,数字部分相加保留该单位,存在两个相同单位时,单位不变直接相加,两个单位不相同时,如果可以进行转换则转换(比如px与pt相加会转换成px),不能转换(如%和px无法互相转换)则编译报错
    ② - 号:运算规则同+号
    ③ * 号:只能出现0或1个单位,不可以出现两个单位,否则编译会报错(如50% * 10%,10px * 10px)
    ④ / 号:被视为除法运算符号的三种情况(如果值或值的一部分,是变量或者函数的返回值,如果值被圆括号包裹,如果值是算数表达式的一部分),其余情况会被当做css分隔符, 0/1/2个相同的单位都可以
    ⑤ % 号:取模,规则同+号
  5. 字符串运算符 ""
    引号在左,运算结果则有引号,相反,运算结果没有引号。

插值语法

插值语法 #{} 用来特定的区域插入表达式或者变量,由此可以实现内容动态变换的效果,可用于选择器、属性名、属性值、注释。

这里直接通过变量来定义,中间的斜杠会被认为是除号会进行除法运算,使用插值语法,则可以保留分隔符。

常见函数

sass 中内置了一些函数供直接调用

  1. color(颜色函数)
    darken:颜色变暗,lighten($color, $amount) 颜色变亮, $amount 取值在0% - 100%之间
  2. String(字符串函数)
    quote:给内容加字符串,str-length:取长度
  3. Math(数值函数处理数值计算)
    percentage()将无单元的数值转换为百分比, round()将数字四含五入为最接近的整数,min()和max()获取几个数字中的最小值或最大值,random()返回一个随机数
  4. List(List函数操作List)
    length()返回列表长度,nth()返回列表中的特定项,join()将两个列表连接在一起, append()在列表末尾添加一个值
  5. Map函数(Map函数操作Map)
    map-get() 根据键值获取map中的对应值,map-merge()来将两个map合并成个新的map, map-values() 映射中的所有值
  6. selector选择器函数
    可对CSS选择进行些相应的操作, 例如: selector-append(可以把个选择符附加到另一个选择符, selector-unify() 将两组选择器合成一个复合选择器
  7. 自检函数
    例如: feature-exists()检查当前Sass版本是否存在某个特性,vaniable-exists()检查当前作用域中是否存在某个变量,mixin-exists()检查某个mixin是否存在。

流程控制指令@if

@if() 函数允许根据条件进行分支,并仅返回两种可能结果中的一种,可单独使用,也可配合混入、继承等其它语法。语法方式同 js 的 if...else if...else。

流程控制指令@for

@for 指令类似 js 中的 for 循环,可以在限制的范围内重复输出格式。

指令包含两种格式:@for $var from <start> through <end>
@for $var from <start> to <end>

当使用 through时,条件范围包含 的值,而使用 to时条件范围只包含 的值不包含 的值。另外,$var可以是任何变量,比如 $i,<start><send>必须是整数值。

流程控制指令@each

@each 指令 类似 js 中的 for each,遍历数组并输出格式。

指令格式:$var in <list>, $var可以是任何变量名,比如$length或者$name, 而<list>是连串的值,也就是值列表。

流程控制指令@while

@while 指令 类似 js 中的 while 循环,可重输出格式直到表达式返回结果为false。

自定义函数 @function

和 js 中的函数类似,在 sass 中将比较复杂或者常用的内容进行封装,可以重复使用。

函数的定义 @function function-name([$paraml, $param2....]){ @return $value; }

  • 函数名 function-name 与 function_name 相同
  • @return 它只允许在函数体中使用,并且每个@function必须以@return结束。 当遇到@return时, 它会立即结束函数并返回其结果。
  • 函数入参可以设置默认值,也可以按参数名传值,或者通过 ...表示任意参数

函数 @function 实现的某些功能混入@mixin 也能实现,但函数更侧重于做一些计算。

三元条件函数if

和 js 中的三元运算符相似,语法:if($condition, $if-true, $if-false); 判断 $condition,如果条件成立,则返回 $if-true的结果,如果条件不成立,则返回 $if-false的结果。

@use 加载模块

@use 是对 @import 的增强,从其它 sass 样式表加载 mixin、function 和 变量,并将来自多个样式表的 css 组合在一起,加载的样式表被称为“模块”。

它有这样一些语法:

  • 加载模块通过 @use+ 文件名 ,如 @use 'common'
  • 文件名即默认的模块名称,修改模块名称使用 as 关键字,如 @use 'common' as c
  • @use 模块内变量可通过 !default 定义默认值,引入时可通用 with (...) 的方式修改,如 @use 'common' with ($font-size: 16px)
  • 不希望被加载/导出的私有成员,通过下划线定义,如 $_font-size: 14px;

@forward 转发

通过 @forward加载一个模块的成员,并将这些成员当作自己的成员对外暴露出去,类似于 es6 的 export。

它有这样一些语法:

  • 转发通过 @forward '+ 文件名,如:@forward 'common'
  • 选择性转发,通过 hide 隐藏元素,show 显示元素,如
    @forward 'common' show $font-size;
    @forward 'global' hide bgColor;
  • 当转发多个文件存在相同变量名时,需使用 as 定义前缀,如:
    @forward 'global' as g-* hide g-bgColor
  • @forward 模块内变量可通过 !default 定义默认值,引入时可通用 with (...) 的方式修改,如 @forward 'global' as g-* hide g-bgColor with($font-size: 30px);
  • 需要转发的模块需要在当前文件使用,仍需通过 @use 引入

跳出嵌套 @at-root

当同一个css可能会在很多地方用到,并且为了css的顺序与html保持一致时,如logo的样式,或者组件调换位置,就可以不移动css的位置,使用 @at-root 被嵌套的选择器或属性跳出嵌套。

sass 中如变量、函数、混入、导入、转发等功能,使 css 开发更为灵活、强大,增加 css 的可阅读性和维护性,是项目开发的常用选择。

以上就是 预处理器 sass 的用法 的介绍, 更多有关 前端CSSJavaScript 的内容可以参考我其它的博文,持续更新中~

posted @ 2023-05-14 21:27  一颗冰淇淋  阅读(282)  评论(0编辑  收藏  举报