变量的使用

// 全局变量
$color: red;
p {
  color: $color;
}
// 局部变量
p {
  $color: red;
  color: $color;
}
// 局部变量变为全局变量
p {
  $color: red !global;
  color: $color;
}
div {
  color: $color;
}

mixin 混合指令

// 混合指令的目的在于提取重复的样式，但是它不是函数，没有返回值，可以接受参数
@mixin common($fontSize: 12px) {
  font-size: $fontSize;
  color: #333;
  line-height: 28px;
}

// 使用 include 引用 mixin
p {
  @include common(14px);
}
div {
  @include common;
}

extend 继承

// 一个元素与另外一个元素的样式完全相同，但是又添加了额外的样式
.error {
  border: 1px solid red;
  background-color: green;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}