Sass 变量

Sass 中，变量以 $ 开头，后跟变量名

1
2
3
4
5
6
7
8
$main-fonts: Arial, sans-serif;
$headings-color: green;

<!-- 使用 -->
h1{
  font-family: $main_fonts;
  color: $headings-color;
}

在 Sass 中，$main-fonts 和 $main_fonts 指向的是同一个变量

默认值 !default

一般情况下，反复声明一个变量，以最后声明的那个变量的值为准。如果想实现一个功能：即 该变量在此处没有被声明的话，就用该变量的值；如果被声明过的话，就用声明过的值，此时可以用 !default

1
2
3
4
5
import 'sassFile'
$fancybox-width: 400px !default;
.fancybox {
  width: $fancybox-width;
}

以上代码，如果导入的文件中声明了 $fancybox-width 变量，则使用导入文件中该变量的值，如果没有声明，才会使用 400px 的值

父选择器标识符 &

1、常用方法

1
2
3
4
5
6
7
8
9
10
11
12
13
article a {
  color: blue;
  &:hover {
    color: red;
  }
}
<!-- 编译后 -->
article a {
  color: blue;
}
article a:hover {
  color: red;
}

2、在父选择器之前添加选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
#content aside {
  color: red;
  body.ie & {
    color: green;
  }
}
<!-- 编译后 -->
#content aside {
  color: red;
}
body.ie #content aside {
  color: green;
}

属性嵌套

把属性名从中划线的地方断开，在根属性后面加一个冒号，紧跟一个 {} 块，把子属性部分写在这个 {} 块中

1
2
3
4
5
6
7
8
9
10
11
12
13
nav {
  border: {
    style: solid;
    width: 1px;
    color: #ccc;
  }
}
<!-- 编译后 -->
nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

对于属性的缩写形式，也可以像下边这样来嵌套，指明例外规则

1
2
3
4
5
6
7
8
9
10
11
12
nav {
  border: 1px solid #ccc {
    left: 0px;
    right: 0px;
  }
}
<!-- 编译后 -->
nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}

用 Mixin 创建可重用 CSS

1、创建定义
定义以 @mixin 开头，后跟自定义名称。括号内为可选参数

1
2
3
@mixin box-shadow($x, $y, $blur, $c){
  box-shadow: $x $y $blur $c;
}

2、调用定义
通过 @include 指令调用

1
2
3
4
5
6
7
8
9
10
11
12
13
div {
  @include box-shadow(0px,0px,4px,#fff)
}

<!-- 也可以通过 key: value 的形式传参。此时参数顺序可以打乱 -->
div {
  @include box-shadow(
    $x: 0px,
    $y: 0px,
    $blur: 4px,
    $c: #fff
  )
}

可以给参数指定一个默认值。默认值可以是具体样式属性值，也可以是其他参数的引用

1
2
3
4
5
6
7
8
9
10
11
12
@mixin link-colors(
    $normal,
    $hover: $normal,
    $visited: $normal
  )
{
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}
<!-- 调用 -->
@include link-colors(red)

使用 @if 和 @else 为样式添加逻辑

Sass 中的 @if 工作方式与 JS 中的 if 语句类似

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@mixin make-bold($bool){
  @if $bool == true {
    font-weight: bold;
  }
}

@mixin text-effect($val){
  @if $val == danger{
    color: red;
  }
  @else if $val==alert{
    color: yellow;
  }
  @else if $val==success{
    color: green;
  }
  @else{
    color: black;
  }
}

使用 @for 创建循环

1、start through end 语法。从开始到结束（包括结束）

2、start to end 语法。从开始到结束（不包括结束）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
@for $i from 1 to 6{
  .text-#{$i}{
    font-size: 15px*$i;
  }
}
// #{$i} 类似于模板字符串
// 以上代码编译为 CSS 后，如下
.text-1{
  font-size: 15px;
}
.text-2{
  font-size: 30px;
}
.text-3{
  font-size: 45px;
}
.text-4{
  font-size: 60px;
}
.text-5{
  font-size: 75px;
}

使用 @each 遍历列表中的项目

1、纯 @each 语法

1
2
3
4
5
@each $c in blue,red,green{
  .#{$C}-text{
    color: $c;
  }
}

2、map 语法

1
2
3
4
5
6
7
8
$colors: (color1:bule, color2:red, color3:green);

@each $key, $c in $colors{
  .#{$c}-text{
    color: $c;
  }
}
// $key, $c 相当于 key,value。如果只有 一个的话，这一个变量编译后为当前项，即 color1:blue

两种语法编译后的结果如下：

1
2
3
4
5
6
7
8
9
.blue-text {
  color: blue;
}
.red-text {
  color: red;
}
.green-text {
  color: green;
}

使用 @while 循环创建样式

@while 语法与 JS 中的 while 类似

1
2
3
4
5
6
7
$x: 1;
@while $x<5 {
  .col-#{$x} {
    width: 100% / 12 * $x;
  }
  $x: $x+1;
}

用 Partials 将样式分成小块

Sass 中的 Partials（局部文件） 是包含 CSS 代码段的单独文件。这些片段可以导入其他 Sass 文件使用

Partials 的名称以 下划线（_）开头，这样 Sass 就知道它是 CSS 的一小部分，而不会将起编译为 CSS 文件。Sass 文件以 .scss 文件扩展名结尾。导入使用 @import 指令

导入直接导入文件名即可，不需要加 _，Sass编译器会自动处理

1
2
// 导入文件名为 _mixins 的 Partials
@import 'mixins'

如果导入命令写在 CSS 规则内，则局部文件会被直接插入到 CSS 规则内

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- 名为 _blue-theme.scss 的局部文件 -->
aside {
  background: blue;
  color: white;
}

<!-- 导入到 CSS 规则内 -->
.blue-theme {
  @import 'blue-theme'
}

<!-- 编译后如下 -->
.blue-theme {
  aside {
    background: blue;
    color: red;
  }
}

*被导入的局部文件中定义的所有变量和混合器，只会在当前规则范围内生效

继承样式

使用 @extend 从一个元素中借用 CSS 规则 并在另一个元素上使用他们

1
2
3
4
5
6
7
8
9
.info{
  width: 200px;
  border: 1px solid black;
  margin: 0 auto;
}
.info-important{
  @extend .info;
  background-color: magenta;
}

.info-important 既具有 .info 的三个样式，也有自己的一个样式