Sass复习篇 - 技术栈

1.css 预处理器

所谓的css预处理就是允许我们编写类css代码，然后通过某些工具将代码编译转换为原生的CSS代码，从而提高开发效率。

css预处理就可以让我们书写一些css无法实现的功能，提高开发效率。

常见的CSS预处理器

Less
Sass
Stylus

2.Sass 简介

Sass 是常见的css预处理器的一种，他提供了许多遍历的写法，让css开发变得更为简单和强大。

Sass有两种版本，Sass和Scss，两者之间的区别在于语法，Sass使用缩进的方式书写，而Scss使用大括号的方式书写，Scss是Sass的升级版，兼容Sass的所有功能。

所我们一般书写时都是用Scss的语法形式。

使用

我们最常见的使用场景就是在Vue项目中使用Sass，直接通过npm安装对应的依赖包接口，vite在编译时会自动编译scss文件。

3.变量

Sass的变量和Css变量相似，都是用来存储一些需要复用的值，比如颜色，字体大小，宽高等等。
Sass变量在声明时必须使用$符号开头，后接变量名。
与css变量不同的是，Sass变量在通过编译器编译之后，会将原本的sass变量的位置替换为具体对应的值，而css变量在浏览器运行时仍然是变量的形式，在运行时动态读取对应的值。

Sass代码

css 复制代码

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

编译后的css代码

css 复制代码

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

Sass变量可以定义在css规则快之外，如果定义在规则之外即可在这个文件中使用，如果定义在规则之内，则只能在规则之内使用。包括嵌套规则以及一些特殊的规则块（@media @font-face）
凡是css属性的标准值（比如说1px或者bold）可存在的地方，变量就可以使用。
在变量声明时可以使用其他的变量来作为新变量的值。
Sass变量定义时可以使用中划线或者下划线来连接多个单词作为变量名。并且在后续使用时，可以使用中划线和下划线两种方式混用。即定义的时候使用中划线，使用的时候使用下划线，反之亦然。

css 复制代码

$link-color: blue;
a {
  color: $link_color;
}

//编译后

a {
  color: blue;
}

在上例中， l i n k − c o l o r 和 link-color和 link−color和link_color其实指向的是同一个变量。实际上，在sass的大多数地方，中划线命名的内容和下划线命名的内容是互通的，除了变量，也包括对混合器和Sass函数的命名。但是在sass中纯css部分不互通，比如类名、ID或属性名。

4.嵌套规则

Sass允许我们在书写css选择器是可以使用嵌套语法。这样书写会使得css的代码结构更清晰，提高开发速度和后期的可维护性。但过于深层的css代码的嵌套会使得css代码难以维护，所以嵌套规则的使用需要根据实际情况来决定。

Sass代码

css 复制代码

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

编译后的css代码

css 复制代码

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

在当前的css代码块中，可以通过嵌套书写其子元素的样式，如果需要为该元素本省添加特殊样式，可以使用&符号来引用当前选择器.

css 复制代码

article a {
 color: blue;
 &:hover { color: red }
}

编译后的css代码

css 复制代码

article a {
  color: blue;
}
article a:hover {
  color: red;
}

sass同样支持> + ~等选择器的嵌套书写。
Sass还支持嵌套属性的书写，比如在一个元素及其子元素上都需要添加相同的属性时，可以使用嵌套属性的书写方式，这样就可以避免重复书写相同的属性。

css 复制代码

nav {
    // 嵌套属性
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}

编译后的css代码

css 复制代码

nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

这中嵌套方式还可以像下面的方式书写

css 复制代码

nav {
  border: 1px solid #ccc {
  left: 0;
  right: 0;
  }
}

编译后的css代码

css 复制代码

nav {
  border: 1px solid #ccc;
  border-left: 0;
  border-right: 0;
}

5.文件导入

css支持使用@import来导入其他的css文件，但是这样会导致浏览器在加载页面时，需要渲染线程读取加载到对应的导入语句时才会下载对应的css文件，这样会导致页面加载速度变慢。

sass也支持@import来导入其他的sass文件，但不同的是，sass文件只存在于开发阶段，在编译阶段会将所有的导入文件编译在一个css文件中，这样在下载时只会下载一个文件，提高了页面的加载速度。同时使用@import导入的样式，变量，混合器。函数等等都可以在当前的sass文件中使用.

如上面所说，@import导入的sass文件会在编译时合并到一起，但其本身也会被编译生成一个css文件，如果需要避免这种情况，可以使用_开头来命名这个文件，这样在文件被导入到其他文件后，编译时只会将代码合并到一起，而不会单独生成一个css文件。（这种sass文件被称为局部文件）
跟css不同的是，sass的@import导入可以不写文件后缀，只需要写文件名即可。同时@import可以编写到css语法块中，这样在编译时导入的代码就会被插入到对应的css语法块中。而这种方式在原生的css中是不支持的。

6.静默注释

sass支持两种注释方式，第一种便是css原生的注释方式，这种注释方式在编译时会被编译到css文件中，在浏览器中也可以看到。第二种注释方式是sass特有的注释方式，这种注释方式在编译时会被忽略，在浏览器中也无法看到。

使用//来书写注释，这种注释方式在编译时会被忽略，在浏览器中也无法看到。
使用/* */来书写注释，这种注释方式在编译时会被编译到css文件中，在浏览器中也可以看到。

7.混合器

上面我们介绍了sass的变量，定义变量可以使得一些值得到复用，但是我们在开发中有时会一段代码需要复用的情况，这时简单的变量已经无法做到了，因此sass提供了混合器来解决这个问题。

混合器使用@mixin关键字来声明，后接混合器的名称。混合器本质上就是一个代码块，后续可以这个代码块进行复用。
混合器可以使用@include关键字来引用，后接混合器的名称，这样就可以将混合器中的代码块插入到当前的css语法块中。

css 复制代码

@mixin rounded-corners {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.notice {
  background-color: green;`
  border: 2px solid #006600;
  @include rounded-corners;
}

上述例子的混合器中只定义了css属性，混合器中也可以定义css选择器，规则块，甚至可以定义变量，混合器中定义的变量可以在混合器中直接使用，也可以在混合器外部使用。甚至可以使用&符号来引用当前选择器。
混合器是可以传递参数的，为了使每次的混合器使用可以做到自定义，我们可以为混合器传入指定的参数，这样在每次使用混合器时，就可以传入不同的参数，使得混合器更具灵活性。同时参数还支持默认值，这样在调用混合器时，如果没有传入参数，就会使用默认值。

css 复制代码

@mixin link-colors($normal, $hover: $normal, $visited: $normal) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

a {
  @include link-colors(blue, red, green);
}

8.继承

sass还支持继承一个css选择器。可以使用@extend关键字来继承一个css选择器，这样在编译时，当前选择器会继承被继承选择器的所有样式，同时也可以添加自己的样式。

css 复制代码

//通过选择器继承继承样式
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

与上述的混合器不同的一点事,继承是通过复用css选择器的方式来实现，不会主动将代码插入到当前的css语法块中，而是通过复用css选择器的方式来实现样式的复用。这样一来，sass在继承生效时就会遵循css选择器的优先级规则，而混合器则不会遵循css选择器的优先级规则。

9.控制指令

sass提供了控制指令来控制代码的编译，控制指令的使用方式与css中的@import类似，都是使用@符号开头，后接指令的名称，后接指令的参数。

@if指令：@if指令用于判断条件，如果条件为真，则执行@if指令后面的代码块，否则执行@else指令后面的代码块。

css 复制代码

p {
  @if $type == danger {
    color: red;
  } @else {
    color: blue;
  }
}

@for指令：@for指令用于循环，可以循环执行一段代码块。

css 复制代码

@for $i from 1 through 5 {
  .item-#{$i} { width: 2em * $i; }
}

@each指令：@each指令用于遍历一个列表，可以遍历执行一段代码块。

css 复制代码

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

@while指令：@while指令用于循环，可以循环执行一段代码块，直到条件为假。

css 复制代码

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

@function指令：@function指令用于定义一个函数，可以定义一个函数来执行一段代码块。t通过动态计算来生成css样式。

css 复制代码

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}


.container {
  width: grid-width(5); // width: 240px;
}