乐趣区

关于前端:关于预处理器-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 时,条件范畴蕴含 <start> 与 <end> 的值,而应用 to 时条件范畴只蕴含 <start> 的值不蕴含 <end> 的值。另外, $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 的内容能够参考我其它的博文,继续更新中~

退出移动版