Sass&Compass學習筆記（一）

1.sass中能夠使用變量

變量名以$符號開頭，可包含全部可用做CSS類名的字符，包括下劃線和 中劃線。  可見，中劃線也是能夠做爲命名的字符，這是與不少其餘語言的不一樣之處。變量的使用實例：

$company-blue: #1875e7;
h1#brand {
    color: $company-blue;
}
#sidebar {
    background-color: $company-blue;
}

這個例子中，咱們定義了一個$compay-blue變量，存放了#1875e7的顏色，所以，當多處須要改變顏色的值時，只須要$compay-blue的值便可了。

 

2.使用嵌套來快速寫出多層級的選擇器

請看下面的一段代碼：

ul.nav {float: right}
ul.nav li {float: left;}
ul.nav li a {color: #111}
ul.nav li.current {font-weight: bold;}

咱們在寫的層級選擇器的樣式時，不少父類都是重複的。若是用sass嵌套，則能夠寫成下面的形式使得代碼變得更加的簡潔：

ul.nav {
    float: right;
    li {
        float: left;
        a {
            color: #111;
         }
        &.current {
            font-weight: bold;
        }
    }
}

上面的&.current至關於li.current。若是未來li改爲了其餘的元素標籤，在這個元素內的current類依然命中這裏的樣式。

 

3.使用混合@mixin

好比咱們在寫頁面的整體佈局時，傳統css代碼以下：

#header ul.nav {
    float: right;
}
#header ul.nav li {
    float: left;
    margin-right: 10px;
}
#footer ul.nav {
    margin-top: 1em;
}
#footer ul.nav li {
    float: left;
    margin-right: 10px;
}

咱們發現，上面代碼中的float:left和margin-right有兩處都用到了，因此重複寫了兩次。若是用sass的混入來作的，則能夠寫成下面的形式：

@mixin horizontal-list {
li {
　　float: left;
　　margin-right: 10px;
}
}
 
#header ul.nav {
　　@include horizontal-list;
　　float: right;
}
#footer ul.nav {
　　@include horizontal-list;
　　margin-top: 1em;
}

更便利的是混合器和變量的結合，這纔是混合器的強大之處；也就是說，可以根據參數來決定使用的樣式，從而使混合器更具可複用性。舉個例子，假如你想要修改水平列表每一個條目之間的間距，怎麼使用混合器快速實現呢，請看下面的代碼：

//混合器傳參使用
@mixin horizontal-list($spacing: 10px) { //$spacing的默認值爲10px，若是不傳參則使用此值；
　　li {
　　　　float: left;
　　　　margin-right: $spacing;
　　}
}
 
#header ul.nav {
　　@include horizontal-list; //使用$spacing默認值，即10px;
　　float: right;
}
#footer ul.nav {
　　@include horizontal-list(20px); //賦予$spacing新值爲20;
　　margin-top: 1em;
}

 

4.使用選擇器繼承@extend來避免重複屬性

上面的例子中，使用混合器可以在手寫的樣式表中有效地避免重複。可是，由於規則都混入到其餘類中，因此在輸出的樣式表中不能徹底避免重複。由於輸出的CSS文件大小很重要，因而Sass引入了另外一種稍微有點複雜的方式，讓輸出的CSS徹底避免重複。選擇器繼承的意思就是讓一個選擇器可以複用另外一個選擇器的全部樣式，但又不重複輸出這些樣式屬性。請看下面的例子，這是一個表單錯誤的提示信息：

//使用繼承@extend，避免重複輸出
.error {
　　border: 1px #f00;
　　background: #fdd;
}
.error.intrusion {
　　font-size: 1.2em;
　　font-weight: bold;
}
.badError {
　　@extend .error;
　　border-width: 3px;
}

上述代碼中，經過選擇器繼承，可讓.barError繼承父類.error，也就是複用父類的全部樣式。編譯生成的css文件以下：

.error, .badError {
　　border: 1px #f00;
　　background: #fdd;
}
.error.intrusion,
.badError.intrusion {
　　font-size: 1.2em;
　　font-weight: bold;
}
.badError {
　　border-width: 3px;
}

 

5.在選擇器繼承中使用佔位選擇器（類名前綴%）

在上面的例子中，同時定義了error和badError類是有意義的，由於二者都須要在HTML中使用，但有時父類並不須要在HTML中使用。因而在Sass 3.2中引入了佔位選擇器，它支持在使用選擇器繼承的同時，不編譯輸出HTML中並不使用的父類，如sass代碼以下所示：

%button-reset {
　　margin: 0;
　　padding: .5em 1.2em;
　　text-decoration: none;
　　cursor: pointer;
}
.save {
　　@extend %button-reset;
　　color: white;
　　background: #blue;
}
.delete {
　　@extend %button-reset;
　　color: white;
　　background: red;
}

佔位顧名思義， 繼承了%button-reset的選擇器在輸出的CSS中佔據了%button-reset的 位置，編譯輸出的css代碼以下：

.save, .delete {
　　margin: 0;
　　padding: .5em 1.2em;
　　text-decoration: none;
　　cursor: pointer;
}
.save {
　　color: white;
　　background: #blue;
}
.delete {
　　color: white;
　　background: red;
}

佔位選擇器能把經常使用的樣式保存到一處，且不影響任何一個類名，使你可以放心使用。固然若是一個佔位選擇器沒有被繼承，其中的樣式就不會被編譯到CSS當中，以減小生產環境中樣式表的無用樣式，使其更小。