Scss規範你的css

簡介

Sass是成熟、強大、穩定的CSS預處理器，而CSS是Sass3版本當中引入的新語法特性，徹底兼容css3的同時繼承Sass強大的動態功能

特性概覽

css書寫代碼規模較大的Web應用時，容易形成選擇器，層疊的複雜度太高，所以推薦經過Sass需處理進行css的開發，Sass提供的遍歷，嵌套，混合，繼承等特性，讓css更加有趣和規範

變量

變量用來存儲須要在css中複用的信息 - 例如顏色和字體 Sass經過$符號去聲明一個變量

$primary-color:#333
body{
    color:$primary-color;  // color:#333
}
複製代碼

嵌套

Sass容許開發人員以嵌套的方式使用css，可是過分的使用嵌套會讓產生的css難以維護，而且看起來很複雜混亂

nav{
    ul{
        margin:0;
        padding:0;
        list-style:none;
    }
    li{
        display:inline-block;
    }
    a{
        display:block;
        padding:6px 12px;
    }
}
// Scss這種寫法具備更高的可讀性，是編寫css的良好方式
// 至關於
nav ul{
    margin:0;
    padding:0;
    list-style:none;
}
nav li{
    display:inline-block;
}
nav a{
    display:block;
    padding:6px 12px;
}
複製代碼

引入

Sass可以將代碼分割成多個片斷，並用underscore風格的下劃線做爲其命名前綴(_partial.scss),Sass會經過這些下劃線來辨別哪些文件是Sass片斷，而且不讓片斷內容直接生成爲css文件，從而只是在使用@import指令的位置被導入。css原生的@import會經過額外的HTTP請求獲取引入的樣式片斷，而Sass的@import則會直接將這些引入的片斷合併到當前css文件，而且不會產生新的HTTP請求 下面這段代碼，在base.scss文件當中引入_reset.scss片斷

// reset.scss
html,body,ul,ol{
    margin:0;
    padding:0;
}
// base.scss
@import 'reset'
body{
    background-color:#333
}
// Sass中引入片斷，能夠缺省擴展名
// 至關於
html,body,ul,ol{
    margin:0;
    padding:0;
}
body{
    background-color:#efefef;
}
複製代碼

混合

混合（Mixin）用來分組那些須要在頁面中複用的css聲明，開發人員能夠經過向Mixin傳遞變量參數來讓代碼更加靈活，該特性在添加瀏覽器兼容性前綴的時候十分有用，Sass目前使用@mixin name指令來定義混合操做

@mixin border-radius($radius){
    border-radius:$radius
    -ms-border-radius:$radius; // 兼容性
    -moz-border-radius:$radius; // 兼容性
    -webkit-border-radius:$radius; // 兼容性
}
.box{
    @include border-radius(10px) // 經過@include使用Mixin
}
// 編譯後至關於
.box{
    border-radius:10px;
    -ms-border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
}
複製代碼

繼承

繼承是Sass中很是重要的一個特性，能夠經過@extend指令在選擇器之間複用css屬性，而且不會產生冗餘的代碼

// 這段代碼不會被輸出到最終生成的css文件，由於它沒有被任何代碼所繼承
%other-styles{
    display:flex;
    flex-wrap:wrap;
}
// 而下面這段代碼會正常的被輸出到生成的css文件，由於它被其接下來的代碼所繼承
%message-common{
    border:1 solid #ccc;
    padding:10px;
    color:#333;
}
.message{
    @extend %message-common; // 繼承
}
.success{
    @extend %message-common;  // 繼承
    border-color:green;
}
// 編譯後至關於
.message,.success{
    border:1px solid #ccc;
    padding:10px;
    color:#333;
}
.success{
    border-color:green;
}
複製代碼

操做符

Sass提供了標準的算術運算符，例如 +、-、*、/、%

.container{
    width:100%
}
.article[role = 'main']{
    float:left;
    width:600px / 960px * 100%;
}
aside[role = 'complementary']{
    float:right;
    width:300px / 960px * 100%;
}
// 編譯後至關於
.container{
    width:100%;
}
.article[role='main']{
    float:left;
    width:62.5%;
}
.aside[role='complementary']{
    float:right;
    width:31.25%;
}
複製代碼

css擴展

引用父級選擇器&
Scss使用$關鍵字在css規則中引用父級選擇器
複製代碼

a{
    font-weight:bold;
    $:hover{  // & 指代a
        text-decoration:underline;
    }
    body.firefox &{  // & 指代a
        font-weight:normal;
    }
}
// 編譯後至關於
a{
    font-weight:bold;
    text-decoration:none;
    a:hover{
        text-decoration:underline;
    }
    body.firefox a{
        font-weight:normal;
    }
}

// 不管css規則嵌套深度如何，關鍵字&都會使用父級選擇器替換所有其出現的位置
#main{
    color:black;
    a{
        font-weight:bold;
        &:hover{ color:red; } // & 指代#main a
    }
}
// 編譯後至關於
#main{
    color:black;
    a{
        font-weight:bold;
        #main a{
            font-weight:bold;
            #main a:hover{
                color:red;
            }
        }
    }
}

// &必須出如今複合選擇器開頭的位置，後面再來連接自定義的後綴
#main{
	color:black;
    &-sidebar{ border:1px solid; }
}
// 編譯後至關於
#main{
    color:black;
    #main-sider{
        border:1px solid;
    }
}
// 若是在父級選擇器不存在的場合下使用&，Scss預處理器會報出錯誤信息
複製代碼

嵌套屬性

css許多屬性都是位於相同的命名空間(例如font-family，font-size，font-weight都會位於font命名空間下），Scss當中只須要編寫命名空間一次，後續嵌套的子屬性都將會位於該命名空間之下

.demo{
    // 命令空間後帶有冒號：
    font：{
        family：fantasy;
        size:30em;
        weight:bold;
    }
}
// 編譯後至關於
.demo{
    font-family:fantasy;
    font-size:30em;
    font-weight:bold;
}

// 命名空間上能夠直接書寫css簡寫屬性，可是平常開發中建議直接書寫css簡寫屬性，儘可能保持css語法的一致性
.demo{
    font:20px/24px fantasy{
        weight:bold;
	}
}
.demo{
    font:20px/24px fantasy;
    font-weight:bold;
}
複製代碼

---