变量的操作分为两种：一、直接操作变量（即变量表达式）；二、通过函数。

函数又分为两种：一、跟代码块无关的函数，多是自己的内置函数，称functions；二、可重用的代码块，称mixin，类似于C语言中的宏。

mixin又细分为两种概念：一、使用时以赋值拷贝的方式存在的，通过@include方式调用；二、使用时以组合声明的方式存在的，通过@extend的方式调用。

变量表达式和functions

两者的使用范围都较窄，歪果仁关于表达式变量的例子经常是下面这个样子的：

p {
  height: (500px / 2);
}

从这个例子中可以看出两点：一、歪果仁的数学不咋地；二、变量表达式的运算可以带单位。

Sass官网上列出了所有的functions，看这里 。比如hsl()，HSL是CSS3新增的颜色表示模式，HSL就是色调(Hue)、饱和度(Saturation)和亮度(Lightness)的缩写。Sass是CSS的超集，所以当然也支持这种模式。可以通过@functions声明函数。

mixin：@include

定义

mixin的定义以@mixin开头，如下：

@mixin col-6 {
  width: 50%;
  float: left;
}

也可以增加参数信息使mixin更具有可配置性，如下：

@mixin col($width) {
  width: $width;
  float: left;
}

当然，mixin也支持默认参数，如下：

@mixin col($width:50%) {
  width: $width;
  float: left;
}

使用

也许你会说，mixin代码块的定义是如此简单，那么，你可能会觉得代码块的使用更简单，只需要使用@include引入即可，如下：

@include col-6();
@include col(25%);

mixin：@extend

场景介绍

首先考虑一个样式正交性的问题，设想这样一个场景，假设你有下面两个div：

<div class="error">今天没有学习!!!!</div>
<div class="serious-error">这两天都没有学习！！！</div>

现在你想让error类显示红色的字体，而serious-error类除了字体为红色之外，还要有一个红色的边框，那么你可能会这样设计两个类的样式，然后再给serious-error的div增加一个error类名。

.error {
  color: #f00;
}
.serious-error {
  border: 1px solid #f00;
}

或者这样设计类的样式：

.error {
  color: #f00;
}
.serious-error {
  color: #f00;
  border: 1px solid #f00;
}

显然，这两种做法都不太好，冗余，不好维护。

extend登场

Sass的extend属性可以帮助我们解决这个问题，明确指定一个类去继承另一个类的样式。

.serious-error {
  @extend .error;
  border: 1px solid #f00;
}

编译生成的css文件如下：

.error, .serious-error {
  color: #f00;
}
.serious-error {
  border: 1px solid #f00;
}

extend工作的原理很简单，就是把继承者的选择器（.serious-error）插入到被继承者的选择器（.error）出现的地方。

继承多个和连续继承

继承多个类的情况下，可以写多个extend，每个后面跟一个类名，也可以写一个extend，后面的类名以逗号分隔。

连续继承也很简单，如下，存在多个继承和连续继承的情况：

.error {
  color: #f00;
}
.normal {
  font-size: 15px;
}
.serious-error {
  @extend .error, .normal;
  border: 1px solid #f00;
}

.dead-error {
  @extend .serious-error;
  border-color: #000;
}

extend的两个知识点

1. extend不可以继承选择器系列

   .A .B { 
     color: #f00;
   }
   .C { 
     @extend .A .B; //错误的
   }
   

   但是这样做却是可以的，虽然你可能并不想要这样的效果。

   .A .B { 
     color: #f00;
   }
   .C { 
     @extend .B;
   }
   .D {
     @extend .A;
   }
   

   生成的CSS代码如下：

   .A .B, .D .B, .A .C, .D .C {
     color: #000;
   }
   

2. 可以使用%，用来构建只用来继承的选择器。

   %error {
     color: #f00;
   }
   .serious-error {
     @extend %error;
     border: 1px solid #f00;
   }
   

   error的样式不会输出到生成的css文件里。

---

文字资料来自慕课网课程