SCSS

使用SCSS取代CSS更易於阅读，巢状的写法、提供的功能像变数、mixin、function、import等等，也更容易扩展与复用。
此外，还有一个跟SCSS很像的「SASS」。

SCSS 跟 SASS 差异

两者差别在於SCSS是有「{}」的，而SASS是直接使用缩排的方式。
SCSS

.navigation
{
  list-style:none;
  float:left;
  li {
    display : inline-block;
    margin-left : 30px;
    &:first-child
    {
      margin-left:0;
    }
    a:link {
      @include style-link-text($color-text-dark);
    }
    a {
      text-decoration:none;
      text-transform :uppercase;
      color:$color-text-dark;
    }
  }
  

SASS

.navigation

  list-style:none;
  float:left;
  li 
    display : inline-block;
    margin-left : 30px;
    &:first-child
      margin-left:0;
    a:link 
      @include style-link-text($color-text-dark);
    a 
      text-decoration:none;
      text-transform :uppercase;
      color:$color-text-dark;

变数

以下我们都会以SCSS来实作。
在预处理器中我们可以像写程序一样定义变数，尔後即可以重复使用。

$color-primary : #f9ed69;
li {
    color : $color-primary;
}

mixin

mixin跟变数有点像，但mixin是一段CSS，不像变数一样只是单纯的一个值，让我们来看看例子吧。

@mixin clearfix {
  &::after {
    content : "";
    clear : both;
    display:table;
  }
}

紧接着透过@include在CSS中插入mixin，编译後nav就有mixin内所撰写的css罗。

nav
{
  margin:30px;
  background-color: $color-primary;
  @include clearfix;
}

在定义mixin时还可以加入参数:

@mixin style-link-text($color) {
    text-decoration:none;
    text-transform : uppercase;
    color : $color;
}

在使用的地方加入参数就可以罗。

a:link {
    @include style-link-text($color-text-dark);
}