使用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);
}