乐趣区

关于前端:关于预处理器-sass-的超全用法

jiezi

随着用户需要的减少，利用于页面的 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 的用法 的介绍，更多无关 前端、CSS、JavaScript 的内容能够参考我其它的博文，继续更新中~

退出移动版