CSS系列5:预处理器，以Sass为例

目录

1. 使用变量
2. 嵌套
3. 导入
4. 注释
5. 混合器
6. 选择器继承

CSS预处理器可提供变量，嵌套，混合等高级功能来编写更具有结构性和模块化的CSS代码。

1. 使用变量

1.1 变量的声明和引用

$nav-color: red;
nav {
 color: $nav-color;
}

2. 嵌套CSS规则

2.1 父元素选择器标识符&
在使用伪类的时候使用，如果不用&, 会被转成article a :hover
使用&,会被转成 article a:hover, 即&可以理解成作为父选择器的占位符

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

2.2 群组选择器的嵌套

.container h1, .container h2, .container h3 {
  color: red;
}
/*简写成*/
.container {
  h1, h2, h3 {
    color: red;
  }
}

2.3 组合选择器 > + ~ 嵌套使用
2.4 嵌套属性
border-style中的‘-’用‘:’替代， 后面紧跟着{ }

nav {
  border: {
   style: solid;
   width: 1px;
   color: red;
  }
}

3.导入SASS文件

Sass中的@import，不同于css中的@import。 Sass中的@import在生成css文件时就会把相关文件引入进来。这就意味着所有相关文件都被引入进来，不需要发送额外的下载请求。

@import "mixins"; /* 此处省略了文件扩展名.scss */

3.1 使用SASS部分文件
那些专门为@import命令而编写的sass文件，并不需要生成对应的独立css文件，这样的sass文件称为局部文件。局部文件用‘_night-sky.scss’, 引入@import "night-sky";
3.2 默认变量值
!default 含义是：如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。
mixins.scss

$fancybox-width: 400px !default;
.fancybox {
  width: $fancybox-width;
}

main.scss

$fancybox-width: 500px;
@import "mixins";
/* 变量的最终值为500px */

3.3 嵌套导入

4. 静默注释

body {
  color: red; //这种注释不会出现在css文件中
  padding: 0; /*这种注释会出现在css文件中*/
}

5. 混合器@mixin

5.1 何时应用
应用于不断重复的一段样式。通过@mixin定义代码块，@include来引用

@mixin no-bullets {
  list-style: none;
  li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0px;
  }
}

ul.plain {
  color: #444;
  @include no-bullets;
}

5.2 给混合器传参

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

a {
  @include link-colors(red, green, yellow);
}
// 或者
a {
  @include link-colors(
    $normal: red,
    $hover: green,
    $visited: yellow
  );
}

5.3 默认参数

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

6. 选择器继承 @extend

6.1 如何使用

.error {
  border: 1px solid red;
  background-color: #eee;
}
.serious-error {
  @extend .error;
  font-size: 10px;
}

参考链接: https://www.sass.hk/guide/