Sass 快速入門教程

@import

若不想將scss編譯成css文件，在scss文件名前面加上下劃線_。

使用CSS @import指令
默認狀況下@import在當前目錄下需找scss文件加載，若想使用原生css的import指令可使用下面四個規則：

1. 當@import後面跟上的文件名是以.css結尾的時候；

2. 當@import後面跟的是http://開頭的字符串的時候；

3. 當@import後面跟的是一個url()函數的時候；

4. 當@import後面帶有media queries的時候。

使用@import導入文件
使用@import導入下劃線開頭文件不須要添加下劃線，compass會自動爲文件名添加下劃線導入。

父類選擇器

a {
    &:hover {
        color: blue;
    }
}

其中&符號表示鏈接父類，最終生成代碼：

a:hover {
    color: blue;
}

屬性嵌套

.main-sec {
    font-family: $main-sec-ff;
    
    .headline {
        font: {
            family: $main-sec-ff;
            size: 16px;
        }
    }
}

變量

定義

$color-withe: #FFFFFF;

以$符號開頭後面跟上字符串做爲變量名，後跟上冒號:和變量值，冒號是分分隔符，分割變量名和變量值。
使用

.main {
    background: $color-withe;
}

直接使用變量名引用即便用變量值。

函數

內置函數

稱爲functions

可重用代碼塊

minxin

使用時以複製拷貝存在，經過@include方式調用；

定義

@mixin col-6 {
    width: 50%;
    float: left;
}

// 使用
.webdemo-sec {
    @include col-6;
    
    &:hover {
        background: $color-FFF;
    }
}

生成的代碼：

.webdemo-sec {
    width: 50%;
    float: left;
}
.webdemo-sec:hover {
    background: $color-FFF;
}

帶參數函數

@mixin col ($width) {
    width: $width;
    float: left;
}
// 使用
.webdemo-sec {
    @include col(30%);
}

帶默認參數

@mixin col ($width: 50%) {
    width: $width;
    float: left;
}
// 使用
.webdemo-sec {
    @include col();
}

使用時以組合聲明方式存在，經過@extend方式調用。將繼承者選擇器插入到被繼承者選擇器出現的地方：

.error {
    color: #F00;
}
.serious-error {
    @extend: .error;
    border: 1px #F00 solid;
}

注：extend不能夠繼承選擇器序列。

使用%構建僅用來繼承選擇器：

%error {
    color: #F00;
}
.serious-error {
    @extend: %error;
    border: 1px #F00 solid;
}

at-root

被嵌套內容輸出到樣式表頂層

.main-sec {
    font-family: $main-sec-ff;
    
    @at-root {
        .main-sec-headline {
            font: {
                famili: $main-sec-ff;
                size: 16px;
            }
        }
        .main-sec-detail {
            font-size: 12px;
        }
    }
}
// 生成的代碼
.main-sec {
    font-family: $main-sec-ff;
}
.main-sec-headline {
    font-family: sans;
    font-size: 16px;
}
.main-sec-detail {
    font-size: 12px;
}

推薦閱讀：

巧用SASS之如何遍歷n個子元素併爲其設置屬性