使用 Sass 管理 CSS

Sass 與 CSS

Sass 需要透過編譯 才能使用，瀏覽器只看得懂CSS。
使用Sass或SCSS時，可保持一個大原則，類別階層不要超過四層以上，以避免網頁渲染效能有所影響。

Sass 與 SCSS

Sass 是程式語言，提供兩種格式寫法:

1. SCSS : SCSS的寫法一般CSS的方式相同，但額外多了許多方便的語法。
2. Sass

常用工具符號

& 連接符號

看父層是誰

.header{
    height: 300px;
    .logo{
        background: #333;
        a{
            color: #333
        }
        a:hover{
            color: blue;
        }
    }
}

上面的範例a標籤有hover的效果，但上面的寫法會重複撰寫標籤，Sass 就可以使用 & 連結符號 簡化。

.header{
    height: 300px;
    .logo{
        background: #333;
        a{
            color: #333
         &:hover{
            color: blue;
            }
        }
    }
}

變數

使用變數簡化重複項目的修改。

$font-lg: 64px;
$font-md: 32px;
$font-sm: 16px;

$white: #fff;

p{
    font-size: $font-lg;
    color: $white;
}

@import 匯入

使用讓每隻 Sass 檔專心做一件事情

@mixin

將常用語法化簡為自己的知識庫
常用的技巧範例:

1. 圖片取代文字
2. 兼容個瀏覽器的inline-block 寫法
3. 各 CSS3 語法瀏覽器支援解決方案
4. 清除浮動解決方案(clearfix)
5. 用CSS畫各方向的三角形。

使用 @include帶入

@mixin hide-text{
    text-indent: 101%;
    white-space: nowrap;
    overflow: hidden;
}

.header h1{
    @include hide-text;
}

Sass 結構優化

第一次寫SCSS建議結構(all.sass)

@import "mixin" //所有全域變數與mixin
@import "reset" //reset.css
@import "layout" //共同框架
@import "module" //常用組件樣式(btn,form...)
@import "index" //首頁
@import "page/.." //內頁

@mixin 與 RWD

@mixin pad{
    @media(max-width: 768px;){
        @content
    }
}

.header{
    width: 100px;
    height: 100px;
    @include pad{
        height: auto;
    }
}