變數（$Variable）

變數以$開頭，既可以用於選擇器(Selector)，也可以用於屬性(Property)和屬性值(Value)。
當用於屬性值時，通常可以直接引用；當用於選擇器、屬性和某些複雜屬性值(e.g. font-size/line-height)時，使用 #{$var} 的形式引用。

//簡單變數
$bgColor: #fefefe;
$fontSize: 14px;
$lineHeight: 1.5;
html, body {
    font: #{$fontSize}/#{lineHeight} sans-serif;
    background-color: $bgColor;
 

}

此處的font-size和line-height兩個屬性需要以#{$var}的形式引用，否則會被當做除法運算處理。

對於多值變數，有List和Map兩種形式，分別類似於JS中的陣列和物件，使用方式如下：

//多值變數：List形式
$margins: 5px 10px, 15px 20px;
div {
    margin: nth($margins, 1) nth($margins, 2);
    padding: nth($margins, 1);
}
//多值變數：Map形式
$headers: (h1:2em, h2:1.5em, h3:1.2em);
@each $header
 
, $size in $headers {
    #{$header} {
        font-size: $size;
    }
}

巢狀（Nesting）

巢狀可以分為選擇器巢狀和屬性巢狀，使用 & 表示在巢狀中對父元素的引用。

ul {
    border: 1px solid $ul-border-color;
    li {
        border: 1px solid $li-border-color;
        a {
            text-decoration: none;
            &:hover
 
 {
                text-decoration: underline;
                font: {
                    size: 1.5em;
                    weight: bold;
                }
            }
        }
    }
}

混合（Minxin）

可傳遞引數，通常與 @include 配合使用，提高程式碼複用率。

@mixin round($deg) {
    border-radius: $deg;
}
.panel {
    @include round(5px);
}

@mixin link-style($selector) {
    .list1 #{$selector} {
        color: $link-color1;
    }
    .list2 #{$selector} {
        color: $link-color2;
    }
}
@include link-style(".link");

繼承（Extend）

當某一類元素擁有大量相同屬性時，可以通過繼承來簡化程式碼，提高程式碼複用率。

.btn {
    display: inline-block;
    margin: 10px;
    padding: 5px 15px;
}
.btn-bor {
    border: 1px solid #ccc;
}
.btn-red {
    @extend .btn;
    @extend .btn-bor;
    border-color: red;
}

另外，繼承可以與佔位選擇器(%foo)配合使用。

.container div%box {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.bor-box {
    @extend %box;
}

//編譯為：
.container div.bor-box {...}

函式及運算 （Function）

SASS內建了顏色、數字等函式，並支援四則運算及分支、遍歷等特性，同時允許自定義函式。

$baseFontSize: 14px;
$gray: #ccc;
@function pxToRem($px) {
    @return $px / $baseFontSize * 1rem;
}
.dark {
    font-size: $baseFontSize;
    color: darken($gray, 20%);
}
.light {
    font-size: pxToRem(18px);
    color: lighten($gray, 20%);
}

註釋（Comments）

SASS支援 // 形式的單行註釋及 /* */ 形式的多行註釋，但是在編譯成css檔案的時候，單行註釋會被丟棄，而多行註釋則被保留。