嵌套

.nav {
    border: 1px solid grey;
    
    > ul { => 嵌套
        border: 1px solid green;
        > li {
            border: 1px solid red;
        }
    }
}

變量

$grey: grey; => 變量
$red: red;
$green: green;

.nav {
    border: 1px solid $grey;
    
    > ul {
        border: 1px solid $green;
        > li {
            border: 1px solid $red;
        }
    }
}

Mixin（類似于函數(shù)）

兩處地方用相同代碼時(shí)可以用Mixin講法，相當(dāng)于機(jī)械地拷貝CSS代碼到不同地方。

@mixin debug($border-color: red) { => 默認(rèn)傳入的值是red
    border: 1px solid red;
}

.nav {
    @include debug(grey); => 引用debug(xxx)
    > ul {
        @include debug(red);
        > li {
            @include debug(green);
        }
    }
}

Placeholder（類似于類class）

兩處地方用相同代碼時(shí)，用Mixin時(shí)只是copy相同代碼。用Placeholder 方法可以省略更多的代碼 -> 將CSS代碼只寫一遍，而將選擇器提到CSS代碼前面。

%box {
    margin: 20px;
    box-shadow: 0 0 3px black;
    border-radius: 4px;
}

.nav {
    >ul {
        border: 1px solid red;
        >li {
            @extend %box;
        }
    }
}

.demo {
    @extend %box;
    height: 100px;
}