CSS 预处理脚本 Sass/Scss 进阶

进阶语法

1 混合器

开发者在编写整个网站的时候常常遇到类似或者一样的样式块，例如 Bootstrap 中的栅格样式。当然如果重复的次数少又简单，当然没有什么影响，可当项目变得越来越复杂，产品需求越来越多，复制粘贴就很难应付了。此时便可以使用 Sass 的混合器来实现大段样式的重用。混合器使用标识符 @mixin 定义，在 @mixin 后面跟一个自定义的名字，然后用花括号内填写需要重用的样式。定义完以后便可以在样式中使用 @include 引用这个混合器。

// scss
@charset "utf-8";
// 定义混合器
@mixin flex-center{
  display: flex;
  justify-content: center;
  align-items: center;
}

// 使用混合器
.header-title{
  font-size: 20px;
  color: #000;
  @include flex-center;
}

// css
.header-title {
  font-size: 20px;
  color: #000;
  display: flex;
  justify-content: center;
  align-items: center; }

1.1 包含 CSS 规则的混合器

混合器中不仅可以包含 CSS 样式属性，也可以包含 CSS 的嵌套规则。

// scss
@charset "utf-8";
// 定义混合器
@mixin flex-center{
  display: flex;
  justify-content: center;
  align-items: center;
  &>li{
    color: #eee;
  }
}

// 使用混合器
ul.header-title{
  font-size: 20px;
  color: #000;
  @include flex-center;
}

// css
ul.header-title {
  font-size: 20px;
  color: #000;
  display: flex;
  justify-content: center;
  align-items: center; }
  ul.header-title > li {
    color: #eee; }

1.2 有参数的混合器

设想这样一个使用场景，开发者需要许多尺寸不一样的正方形或圆形，上面用法的混合器就满足不了需求了。但是 Sass 的混合器允许开发者传参数来改变规格。

// scss
@charset "utf-8";
@mixin square($len, $color){
  width: $len;
  height: $len;
  background-color: $color;
}

.square-red{
  @include square(50px, red);
}
.square-blue{
  @include square(30px, blue);
}

// css
.square-red {
  width: 50px;
  height: 50px;
  background-color: red; }

.square-blue {
  width: 30px;
  height: 30px;
  background-color: blue; }

1.3 带有默认参数的混合器

若没有给参数，转 CSS 的时候便会报错。开发者可以给混合器的参数默认参数，这样没有给参数的时候就使用默认参数。

// scss
@charset "utf-8";
@mixin square($len, $color: red){
  width: $len;
  height: $len;
  background-color: $color;
}

.square-red{
  @include square(50px);
}
.square-blue{
  @include square(30px, blue);
}

// css
.square-red {
  width: 50px;
  height: 50px;
  background-color: red; }

.square-blue {
  width: 30px;
  height: 30px;
  background-color: blue; }

1.4 关键词参数

使用混合器的时候有时会搞不清参数的顺序，为了解决这一问题，可以使用键值的方式制定参数的值，此时只要保证关键参数没有漏掉就可以了，不必在乎参数的顺序。

// scss
@charset "utf-8";
@mixin square($len: 50px, $color: red){
  width: $len;
  height: $len;
  background-color: $color;
}

.square-red{
  @include square(
    $len: 30px,
    $color: red
  );
}
.square-blue{
  @include square(
    $color: blue
  );
}

// css
.square-red {
  width: 30px;
  height: 30px;
  background-color: red; }

.square-blue {
  width: 50px;
  height: 50px;
  background-color: blue; }

2 继承

在编写 CSS 样式的时候常常遇到一个样式与另一个样式基本相同，但是又需要添加一点额外的样式，这时候就会用到 Sass 继承，标识符是 @extend。

// scss
.red{
  color: red;
}
.square-red{
  width: 50px;
  height: 50px;
  @extend .red;
}

// css
.red, .square-red {
  color: red; }

.square-red {
  width: 50px;
  height: 50px; }

2.1 继续继承

样式 2 继承样式 1 后，样式 3 可以继续继承样式 2。

// scss
.bgc-red{
  background-color: red;
}
.square-red{
  width: 50px;
  height: 50px;
  @extend .bgc-red;
}
.square-red-hover{
  @extend .square-red;
  &:hover{
    background-color: blue;
  }
}

// css
.bgc-red, .square-red, .square-red-hover {
  background-color: red; }

.square-red, .square-red-hover {
  width: 50px;
  height: 50px; }

.square-red-hover:hover {
  background-color: blue; }

2.2 只能用来继承的样式

有时候一个样式只想把它当作类来继承，不想在正式的 CSS 文件中生成，这时候便用到 Sass 的占位符选择器 %。

// scss
%bgc-red{
  background-color: red;
}
.square-red{
  width: 50px;
  height: 50px;
  @extend %bgc-red;
}

// css
.square-red {
  background-color: red; }

.square-red {
  width: 50px;
  height: 50px; }

3 运算

3.1 数字运算

Sass 支持数字的加减乘除取整运算。

// scss
$font-normal: 12px;

.header-title{
  font-size: $font-normal + 2;
}

// css
.header-title {
  font-size: 14px; }

3.2 颜色运算

Sass 会把 RGB 自动转换成十六进制的颜色值，可以使用函数 lighten() 或 darken() 让目标颜色变亮或变深。

// scss
$color-test: #5f5f5f;
.rgb-test{
  color: rgb(120, 120, 120);
}
.color-lighten{
  color: lighten($color-test, 50%);
}
.color-darken{
  color: darken($color-test, 10%);
}
.color-darken-to-black{
  color: darken($color-test, 50%);
}

// css
.rgb-test {
  color: #787878; }

.color-lighten {
  color: #dfdfdf; }

.color-darken {
  color: #464646; }

.color-darken-to-black {
  color: black; }