sass入門

// .sass文件（使用縮進代替大括號， 使用換行的代替分號）與.scss文件的差別在於語法格式的區別

// ************************************小結*********************************************
// 1. 嵌套、導入、註釋是保持sass條理性和可讀性的最基本的三個方法
// 2. 混合器和繼承是減小重複代碼的主要特性
// *************************************************************************************

// 1. 聲明變量 使用 `$` 標識符
// （中劃線和下劃線。取決於我的的喜愛 `-` 兩種用法相互兼容）
// 使用`-`聲明，可使用 `_`引用， 反之亦然。
$font-color: blue;
// 變量值引用其餘變量
$border-color: $font-color;
.color {
    $font-color: red;
    color: $font_color; // 使用 `_` 引用
}

// 2.嵌套
// 2.1 父選擇器標識符 `&`
// 2.2 支持羣組選擇器 h1, h2, h3 {}
// 2.3 支持子組合選擇器 `>` 和同層組合選擇器：`+` 和 `~`
// 2.4 屬性嵌套: border: {width, style, color}
.hello {
    .color1 {
        $hover-color: yellow;
        color: $font-color;
        border: 1px solid $border_color; // 使用 `_` 引用
        &:hover { // => &:hover
            color: $hover-color;
        }
    }
    .qunzu {
        h1, h2, h3 { // 羣組選擇器
            color: $font-color;
            font-size: 12px;
        }
        > .zi { // `>` .quanzu 全部的 `.zi` 子元素
            color: red;
        }
        h1 + .zi {  // '+' `h1` 元素後緊跟的 `.zi` 元素
            color: green;
            border: 1px solid red { //  屬性嵌套
                top: 0; // border-top: 0;
                right: 0;// border-right: 0;
            }
        }
        h2 ~ .zi { // '~'  `h2` 元素後面全部的 `.zi`元素
            color: #333;
            font-size: 20px;
        }
    }
}
// 3. @import 能夠省略.sass或.scss文件後綴
// sass的@import規則在生成css文件時就把相關文件導入進來。
// 這意味着全部相關的樣式被概括到了同一個css文件中，而無需發起額外的下載請求
// 局部文件: 那些專門爲@import命令而編寫的sass文件，並不須要生成對應的獨立css文件，這樣的sass文件稱爲局部文件。
//          對此，sass有一個特殊的約定來命名這些文件。sass局部文件的文件名如下劃線 `_` 開頭。這樣，sass就不會在編譯時單獨編譯這個文件輸出css，而只把這個文件用做導入。
$comm-color: red;
// 3.2默認變量值 !default 若是以前有聲明的就用以前的，不然使用默認的
// 3.3 嵌套導入 把樣式文件導入到規則裏面
@import '../assets/scss/comm.scss'; // 引入局部文件 _comm.scss
.imp-comm {
    text-align: left;
    color: $comm-color;
    .one {
        @import '../assets/scss/fontsize'; // 引入局部文件 _fontsize.scss
        font-size: $imp-font-size;
        color: green;
    }
}

// 4. 靜默註釋 不會出如今源代碼中
/* css的標準註釋格式 */
// sass 靜默註釋的語法跟JavaScriptJava等類C的語言中單行註釋的語法相同，它們以//開頭

// 5. 混合器 使用 `@mixin` 標識符定義 `@include` 使用混合器
// 5.1 定義跨瀏覽器的圓角混合器
// 5.2 混合器中容許包含樣式規則
@mixin border-round {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    // 混合器中的樣式規則
    a {
        font-size: 12px;
        color: #333;
        text-decoration: line-through;
    }
}
// 5.3/5.4 混合器傳遞參數 (參數設置默認值)
@mixin link-color($color, $size: 28px) {
    box-shadow: 2px 2px 5px #666;
    a {
        color: $color;
        font-size: $size;
    }
}
.hh {
    border: 1px solid $comm-color {
        color: blue;
    }
    @include border-round; // 使用混合器 border-round
    // @include link-color(blue); // 使用帶參數的混合器
    @include link-color($color: red, $size: 12px); // 使用帶參數的混合器, 多個參數用`，`隔開($color:red, $size: 12);
}

// 6. 選擇器繼承 經過 `@extend` 語法實現 (不要用後代選擇器去繼承)
// .error {
//     border: 1px solid $comm-color;
//     background: #fdb;
// }
@import '../assets/scss/error'; // 導入sass文件
.info-error {
    @extend .error;
    display: inline-block;
    border-width: 3px;
    padding: 2px 4px;
    margin-top: 10px;
}

// ************************************小結*********************************************
// 1. 嵌套、導入、註釋是保持sass條理性和可讀性的最基本的三個方法
// 2. 混合器和繼承是減小重複代碼的主要特性
// *************************************************************************************