SASS 预处理器

2021-04-07 本文已影响0人 lio_zero

什么是 CSS 预处理器？

CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。

通过工具编译成 CSS：开发后，这些特定文件被编译成任何浏览器都可以理解的常规 CSS。
能提升 CSS 文件的组织方式：预处理程序有助于在 CSS 中编写可重用，易于维护和可扩展的代码。
基于 CSS 的另一种语言：CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作
扩展 CSS：CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题，例如你可以在 CSS 中使用变量、简单的逻辑程序、函数、插值、mixin 等等在编程语言中的一些基本特性，可以让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等。

目前主流的预处理器里有：Sass（scss），Less ，Stylus 、PostCSS（后预处理器）

下面我们将来介绍 Sass 预处理器。以下内容参考 SASS 文档。

什么是 Sass？

Sass是最早的 CSS 预处理语言，有比 Less 更为强大的功能。但因其一开始的缩进式语法并不能被开发者们接受，所以使用率不高，不过由于其强大的功能和Ruby on Rails 的大力推动，逐渐被更多开发者使用。

Sass 是采用的 Ruby 语言编写的一款 CSS 预处理语言，它诞生于2007年，是最早成熟 css 预处理语言。最初它是为了配合 HAML 而设计的，因此有着和 HAML 一样的缩进式风格。

Sass 和 SCSS 有什么区别？

Sass 从第三代开始，放弃了缩进式风格，并且完全向下兼容普通的 CSS 代码，这一代的 Sass 也被称为 Scss。Scss 完全继承了 Sass 中的功能，并引入了一些新语法特性。

主要有两点不同：

文件扩展：Sass 的后缀扩展名为 .sass，而 SCSS 的后缀为扩展名为 .scss
语法书写：Sass 是以严格的缩进式语法规则来书写，不带大括号 {} 和分号 ;，而 SCSS 书写方式更像 CSS。

变量

Sass 变量很简单：您可以为以 $ 开头的名称分配一个值，然后可以引用该名称而不是值本身。

$red: #833;

body {
  color: $red;
}

变量可以减少重复，进行复杂的数学运算，配置库等。

CSS 变量与 Sass 变量的区别

Sass 变量都是由 Sass 编译出来的。CSS 变量包含在 CSS 中输出。
CSS 变量对于不同的元素可以有不同的值，但是 Sass 变量一次只有一个值。
Sass 变量是必需的，这意味着如果您使用一个变量然后更改它的值，那么前面的使用将保持不变。CSS 变量是声明性的，这意味着如果您更改该值，它将影响前面使用和后面使用的。

嵌套

Sass 允许开发人员以嵌套的方式使用 CSS。

.markdown-body {
  a {
    color: blue;
    &:hover {
      color: red;
    }
  }
}

引用父级选择器 "&"

Sass 允许在嵌套的代码块内，使用 & 引用父元素

a {
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  &:hover { 
    text-decoration: underline; 
    font-size: 20px;
  }
}

嵌套属性

CSS 许多属性都位于相同的命名空间，例如 text-align、text-decoration、text-transform 都位于 font 命名空间下，Sass 当中只需要编写命名空间一次，后续嵌套的子属性都将会位于该命名空间之下。

text: {
  align: center;          // 将编译为 text-align: center
  decoration: underline;  // 将编译为 text-decoration: underline
  transform: uppercase;   // 将编译为 text-transform: uppercase
}

注意，text 后面必须加上冒号。

注释

// 单行注释，该注释方式只保留在 SASS 源文件中，编译后被省略。此注释不会包含在 CSS 中。

/* 多行注释，该注释方式会保留到编译后的文件。但压缩模式下，仍会被删除 */
/* 多行注释可以使用插值表达式 #{1 + 1} */

/*! 即使在压缩模式下也会包含此注释。*/

继承

@extend 指令用于继承另一个选择器的样式。相同样式直接继承，不会造成代码冗余；

.button {
  font-size: 14px;
  color: plum;
}

.push-button {
  @extend .button;
}

混合

混合（Mixin）允许您定义可以在整个样式表中重用的样式。

语法

@mixin  { ... }

// 带参数
@mixin name(<arguments...>) { ... }

示例

@mixin heading-font {
  font-family: sans-serif;
  font-weight: bold;
}

h1 {
  @include heading-font;
}

Mixin 特性在添加浏览器兼容性前缀的时候非常有用。

@mixin border-radius($radius) {
  border-radius: $radius;
  -ms-border-radius: $radius;
  -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
}

.card {
  @include border-radius(8px);
}

参数

你可以向 Mixin 传递变量参数来让代码更加灵活。

@mixin font-size($n) {
  font-size: $n * 1.2em;
}

body {
  @include font-size(2);
}

具有默认值

@mixin pad($n: 10px) {
  padding: $n;
}

body {
  @include pad(15px);
}

具有默认变量

// 设置默认值
$default-padding: 10px;
@mixin pad($n: $default-padding) {
  padding: $n;
}

body {
  @include pad(15px);
}

引入 SCSS 模块

Sass 能够将代码分割为多个片段，并以下划线作为其命名前缀。Sass 会通过这些下划线来辨别哪些文件是 Sass 片段，并且不让片段内容直接生成为 CSS 文件，只在使用 @import 指令的位置被导入。

// _variables.scss
$gray-1: #eee;

// index.scss
@import './_variables';

.scss 或 .sass 扩展名是可选的。

函数

颜色功能

颜色设置

SASS 提供了一些内置的颜色函数，以便生成系列颜色。

// RGBA
rgb(100, 120, 140)
rgba(100, 120, 140, .5)
rgba($color, .5)

// 修改 HSLA
complement($color)    // 像 adjust-hue(_, 180deg)
invert($color)
grayscale($color)
hsla(hue, saturation, lightness, alpha)

颜色操作

// 混合
mix($a, $b, 10%)   // 10% a, 90% b

// 修改 HSLA
darken($color, 5%)
lighten($color, 5%)
saturate($color, 5%)
desaturate($color, 5%)
adjust-hue($color, 15deg)
fade-in($color, .5)   // 又名 opacify()
fade-out($color, .5)  // aka transparentize() - 将不透明度减半
rgba($color, .5)      // 将 alpha 设置为 .5

// 调整
// 按固定数量变动
adjust-color($color, $blue: 5) 
adjust-color($color, $lightness: -30%)   // 像 darken(_, 30%)
adjust-color($color, $alpha: -0.4)       // 像 fade-out(_, .4)
adjust-color($color, $hue: 30deg)        // 像 adjust-hue(_, 15deg)

// 通过百分比更改
scale-color($color, $lightness: 50%)

// 完全更改一个属性
change-color($color, $hue: 180deg)
change-color($color, $blue: 250)

支持：$red、$green、$blue、$hue、$saturation、$lightness、$alpha

颜色获取

// HSLA
hue($color)         // 0deg-360deg 返回颜色在 HSL 色值中的角度值 (0deg - 255deg)。
saturation($color)  // 0%-100%
lightness($color)   // 0%-100%
alpha($color)       // 0-1 (类似 opacity())

// RGB
red($color)   // 从一个颜色中获取其中红色值（0-255）
green($color)
blue($color)

其他功能

字符串

unquote('hello')
quote(hello)
to-upper-case(hello)
to-lower-case(hello)
str-length(hello world)
str-slice(hello, 2, 5)      // "ello" - it's 1-based, not 0-based
str-insert("abcd", "X", 1)  // "Xabcd"

单位

unit(3em)        // 'em'
unitless(100px)  // false

数字

floor(3.5)
ceil(3.5)
round(3.5)
abs(3.5)
min(1, 2, 3)
max(1, 2, 3)
percentage(.5)   // 50%
random(3)        // 0..3

选择器

selector-append('.menu', 'li', 'a')   // .menu li a 
selector-nest('.menu', '&:hover li')  // .menu:hover li
selector-extend(...)
selector-parse(...)
selector-replace(...)
selector-unify(...)

其他

variable-exists(red)    // 判断变量是否在当前的作用域下。
mixin-exists(red-text)  // 检测指定混入 (mixinname) 是否存在。
function-exists(redify) // 检测指定的函数是否存在
global-variable-exists(red) // 检测某个全局变量是否定义。

循环语句

SASS 提供了以下循环：

for 循环

@for $i from 1 through 4 {
  .item-#{$i} { left: 20px * $i; }
}

each 循环（简单）

$menu-items: home about services contact;

@each $item in $menu-items {
  .photo-#{$item} {
    background: url('images/#{$item}.jpg');
  }
}

each 循环（嵌套）

$backgrounds: (home, 'home.jpg'), (about, 'about.jpg');

@each $id, $image in $backgrounds {
  .photo-#{$id} {
    background: url($image);
  }
}

while 循环

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

条件语句

@if $position == 'left' {
   position: absolute;
   left: 0;
} @else if $position == 'right' {
   position: absolute;
   right: 0;
} @else {
   position: static;
}

插值语句

通过 #{} 插值语句（interpolation）以在选择器或属性名中使用变量：

$name: card;
$attr: border;

.#{$class} { 
  #{$attr}-color: plum; 
}

@media #{$tablet}
// 使用 #{} 可以避免 Sass 运行运算表达式，直接编译 CSS。
font: #{$size}/#{$line-height}
url("#{$background}.jpg")

列表

Sass 列表（List）函数用于处理列表，可以访问列表中的值，向列表添加元素，合并列表等。

Sass 列表是不可变的，因此在处理列表时，返回的是一个新的列表，而不是在原有的列表上进行修改。

列表的起始索引值为 1，记住不是 0。

$list: (a b c);

nth($list, 1)  // 从 1 开始
length($list)  // 返回列表的长度

// 其他属性
nth // 函数可以直接访问数组中的某一项
join // 函数可以将多个数组连接在一起
list-separator(list) // 返回一列表的分隔符类型。可以是空格或逗号。
append(list, value, [separator]) // 将单个值 value 添加到列表尾部。separator 是分隔符，默认会自动侦测，或者指定为逗号或空格
is-bracketed(list) // 判断列表中是否有中括号
index(list, value) // 返回元素 value 在列表中的索引位置。
zip($list)      // 将多个列表按照以相同索引值为一组，重新组成一个新的多维度列表。
set-nth(list, n, value) // 设置列表第 n 项的值为 value。

// 遍历列表中的每一项
@each $item in $list { ... }

Map

Sass Map（映射）对象是以一对或多对的 key/value 来表示。

Sass Map 是不可变的，因此在处理 Map 对象时，返回的是一个新的 Map 对象，而不是在原有的 Map 对象上进行修改。

$map: (key1: value1, key2: value2, key3: value3);

map-get($map, key1)       // 返回 Map 中 key 所对应的 value(值)。如没有对应的 key，则返回 null 值。
map-has-key($map, key1)   // 判断 map 是否有对应的 key，存在返回 true，否则返回 false。
map-keys($map)            // 返回 map 中所有的 key 组成的队列。
map-merge($map1, $map2)   // 合并两个 map 形成一个新的 map 类型，即将 map2 添加到 map1的尾部
map-remove($map, keys...) // 移除 map 中的 keys，多个 key 使用逗号隔开。
map-values($map)          // 返回 map 中所有的 value 并生成一个队列。