Sass

sass

sass同less 一样也是 CSS 预处理语言。其语法也极其相似。
sass中文网

安装

vscode 插件

  1. vscode 中安装插件 Live Sass Compiler
  2. ctrl+shift+P键入Live Sass: Watch Sass以开始实时编译，或者按键入Live Sass: Stop Watching Sass以停止实时编译。

webpack环境

在webpack4中使用 node-sass和 sass-loader。详情请参考webpack 开发环境配置。

语法

sass 文件后缀有两种 : .scss 和更早期的 .sass。这两种后缀在语法上是有差异的。建议使用 .scss ，这种格式仅在 CSS3 语法的基础上进行拓展，所有 CSS3 语法在 SCSS 中都是通用的，同时加入 Sass 的特色功能。

注释

1
2
/* 这是多行注释 */
// 这是单行注释

// 这种注释内容不会出现在生成的css文件中

/ 这种注释内容会出现在生成的css文件中 /

@import

使用 @import 导入 css或 .scss文件，如果是 .scss文件后缀可以省略。

1
2
@import './index.css';
@import './public'; //public.scss

数据类型

Sass 支持 6 种主要的数据类型：

  • 数字，1, 2, 13, 10px
  • 字符串，有引号字符串与无引号字符串，"foo", 'bar', baz
  • 颜色，blue, #04a3f9, rgba(255,0,0,0.5)
  • 布尔型，true, false
  • 空值，null
  • 数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
  • maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)

变量

使用 $ 声明变量

1
2
3
4
5
6
7
// 声明变量
$bg-color: yellow;

.box{
    // 引用变量
    background: $bg-color;
}

运算

算术运算

支持数字的加减乘除、取整等运算 (+, -, *, /, %)，如果必要会在不同单位间转换值。计算的结果以最左侧操作数的单位类型为准。

1
2
3
4
5
$box-size: 20px;

.box{
    font-size: $box-size - 2;
}

字符串运算

+ 可用于连接字符串

1
2
3
4
$text: '-resize';
.box{
    cursor: e + $text;
}

编译输出：

1
2
3
.box {
    cursor: e-resize;
}

运算优先级（）

圆括号（）可以用来影响运算的顺序

1
2
3
p {
  width: 1em + (2em * 3);
}

编译输出为：

1
2
3
p{
    width: 7em;
}

Mixin 混入

使用@mixin 声明要混入数据，@include 使用混入数据。

1
2
3
4
5
6
7
8
9
10
11
12
// 声明要混入样式
@mixin box-border {
    border: 1px solid gray ;
    border-radius: 5px;
    box-shadow: 0 0 8px gray;
}
.box2{
    width: 100px;
    height: 100px;
    // 混入数据
    @include box-border;
}

带参数的Mixin

带参数的Mixin类型 js 中的函数传参。 在 @mixin 中定义参数列表，在 @include 时传入对应的参数。

注意在传入参数时需要和定义时一一对应。

1
2
3
4
5
6
7
8
9
10
11
12
// 声明要混入样式
@mixin box-border($border-width,$color) {
    border: $border-width solid $color ;
    border-radius: 5px;
    box-shadow: 0 0 8px $color;
}
.box2{
    width: 100px;
    height: 100px;
    // 混入数据
    @include box-border(1px, red);
}

sass 允许使用 $name: value的方式向 @mixin 传参，这种语法可以不理会参数的先后 顺序。

1
2
3
4
5
6
7
8
9
10
11
12
// 声明要混入样式
@mixin box-border($border-width,$color) {
    border: $border-width solid $color ;
    border-radius: 5px;
    box-shadow: 0 0 8px $color;
}
.box3{
    width: 200px;
    height: 200px;
    // 混入数据
    @include box-border($color:yellow , $border-width:10px )
}

嵌套CSS 规则

1
2
3
4
5
6
7
#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}

编译输出为：

1
2
3
4
 /* 编译后 */
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

& 父选择器

1
2
3
4
article a {
  color: blue;
  &:hover { color: red }
}

编译输出为：

1
2
article a { color: blue }
article a:hover { color: red }

关系选择器

1
2
3
4
5
6
7
8
9
article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}

编译输出为：

1
2
3
4
5
article ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }

继承 @extend

1
2
3
4
5
6
7
8
9
10
//通过选择器继承继承样式
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
    // 继承
  @extend .error;
  border-width: 3px;
}

编译输出为：

1
2
3
4
5
6
7
8
9
.error, .seriousError {
  border: 1px solid red;
  background-color: #fdd;
}

.seriousError {
  border-width: 3px;
}

混合器@mixin主要用于展示性样式的重用，而 @extend 类名用于语义化样式的重用。因为继承是基于类的（有时是基于其他类型的选择器），所以继承应该是建立在语义化的关系上。当一个元素拥有的类（比如说.seriousError）表明它属于另一个类（比如说.error），这时使用继承再合适不过了。