SASS 使用总结

发表于 分类于 本文字数： 2.1k 阅读时长 ≈ 2 分钟

在项目中安装 sass

1
yarn add node-sass 或 npm i node-sass -S

使用淘宝源

1
npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

使用变量

以$开头定义变量，如

1
2
3
4
5
$width: #409eff;

button: {
  min-width: $width;
}

插值

在字符串中使用时，用#{}包起来，如 #{$width}

嵌套

在 css 中

1
2
3
4
5
6
7
.a-long-class-name .class1 {
  color: white;
}

.a-long-class-name .class1 {
  color: black;
}

在 scss 中

1
2
3
4
5
6
7
8
9
.a-long-class-name {
  .class1 {
    color: white;
  }

  .class1 {
    color: black;
  }
}

不用再把 class 写多遍

注释

CSS 格式注释

使用/* code */方式，编译后会保留到 CSS 中

1
2
3
/*
这是注释
*/

单行注释

使用 //，编译后不存在 CSS

1
2
// 这是注释
// 这也是注释

重要注释

/*! code */

编译后仍然存在，即使压缩后也存在，可用于声明版权等。

1
2
3
/*!
重要注释！不会被省略
*/

继承

可继承选择器，可复用很多代码。

1
2
3
4
5
6
7
8
9
.base {
  margin: 10px;
}

.children {
  @extend .base;

  padding: 6px;
}

children 继承 base 选择器

可重用代码块 Mixin

1
2
3
4
5
6
7
8
@mixin color($back: #000) {
  color: white;
  background-color: $back;
}

button {
  @include color(#666);
}

此处 button 的样式为灰底白字

Mixin 示例

生成浏览器前缀

1
2
3
4
5
6
7
8
9
10
11
12
13
@mixin rounded($vert, $horz, $radius: 10px) {
  border-#{$vert}-#{$horz}-radius: $radius;
  -moz-border-radius-#{$vert}#{$horz}: $radius;
  -webkit-border-#{$vert}-#{$horz}-radius: $radius;
}

#navbar li {
  @include rounded(top, left);
}

#footer {
  @include rounded(top, left, 5px);
}

引用文件

可引用 css 和 scss 文件

1
　@import "path/filename.scss";

条件语句

可以使用 @if 和@else 判断

1
2
3
4
5
@if $width > 200 {
  color: #000;
} @else {
  color: #fff;
}

循环语句

for 循环

在 sass 中 for 循环有 2 种方式

for through

包含结束值

1
2
3
4
5
@for $i from 1 through 100 {
  .class-#{$i} {
    width: #{$i + 100}px;
  }
}

此例从 1 循环到 100

for to

不包含结束值

1
2
3
4
5
@for $i from 1 to 100 {
  .class-#{$i} {
    width: #{$i + 100}px;
  }
}

此例从 1 循环到 99

while 循环

1
2
3
4
5
6
7
$i: 100;
@while $i > 0 {
  .class-#{$i} {
    width: #{$i + 100}px;
  }
  $i: $i - 1;
}

each 循环

1
2
3
4
5
@each $color in red, green, yellow, blue {
  .btn_#{$color} {
    background-color: #{$color};
  }
}

编译的结果为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.btn_red {
  background-color: red;
}

.btn_green {
  background-color: green;
}

.btn_yellow {
  background-color: yellow;
}

.btn_blue {
  background-color: blue;
}