編程教程6. 使用選擇器繼承來精簡CSS
使用sass的時候，最后一個減少重復的主要特性就是選擇器繼承。基于Nicole Sullivan面向對象的css的理念，選擇器繼承是說一個選擇器可以繼承為另一個選擇器定義的所有樣式。這個通過@extend語法實現，如下代碼://通過選擇器繼承繼承樣式.error { border: 1px red; background-color:……
6-2. 繼承的高級用法
任何css規則都可以繼承其他規則，幾乎任何css規則也都可以被繼承。大多數情況你可能只想對類使用繼承，但是有些場合你可能想做得更多。最常用的一種高級用法是繼承一個html元素的樣式。盡管默認的瀏覽器樣式不會被繼承，因為它們不屬于樣式表中的樣式，但是你對html元素添加的所有樣式都會被繼承。接下來的這段代碼定義了一個名為disabled……
6-3. 繼承的工作細節
跟變量和混合器不同，繼承不是僅僅用css樣式替換@extend處的代碼那么簡單。為了不讓你對生成的css感覺奇怪，對這背后的工作原理有一定了解是非常重要的。@extend背后最基本的想法是，如果.seriousError @extend .error， 那么樣式表中的任何一處.error都用.error.seriousError這一選……
2-4. 嵌套屬性
在sass中，除了CSS選擇器，屬性也可以進行嵌套。盡管編寫屬性涉及的重復不像編寫選擇器那么糟糕，但是要反復寫border-styleborder-widthborder-color以及border-*等也是非常煩人的。在sass中，你只需敲寫一遍border:nav { border: { style: solid; width: ……
2-3. 子組合選擇器和同層組合選擇器：>、+和~
上邊這三個組合選擇器必須和其他選擇器配合使用，以指定瀏覽器僅選擇某種特定上下文中的元素。article section { margin: 5px }article > section { border: 1px solid #ccc }你可以用子組合選擇器>選擇一個元素的直接子元素。上例中，第一個選擇器會……
2-1. 父選擇器的標識符&
一般情況下，sass在解開一個嵌套規則時就會把父選擇器(#content)通過一個空格連接到子選擇器的前邊(article和aside)形成(#content article和#content aside)。這種在CSS里邊被稱為后代選擇器，因為它選擇ID為content的元素內所有命中選擇器article和aside的元素。但在有些……
1-3. 變量名用中劃線還是下劃線分隔
sass的變量名可以與css中的屬性名和選擇器名稱相同，包括中劃線和下劃線。這完全取決于個人的喜好，有些人喜歡使用中劃線來分隔變量中的多個詞(如$highlight-color)，而有些人喜歡使用下劃線(如$highlight_color)。使用中劃線的方式更為普遍，這也是compass和本文都用的方式。不過，sass并不想強迫任何人……
7. 小結
本文介紹了sass最基本部分,你可以輕松地使用sass編寫清晰、無冗余、語義化的css。對于sass提供的工具你已經有了一個比較深入的了解，同時也掌握了何時使用這些工具的指導原則。變量是sass提供的最基本的工具。通過變量可以讓獨立的css值變得可重用，無論是在一條單獨的規則范圍內還是在整個樣式表中。變量、混合器的命名甚至sass的文……
6-4. 使用繼承的最佳實踐
通常使用繼承會讓你的css美觀、整潔。因為繼承只會在生成css時復制選擇器，而不會復制大段的css屬性。但是如果你不小心，可能會讓生成的css中包含大量的選擇器復制。避免這種情況出現的最好方法就是不要在css規則中使用后代選擇器(比如.foo .bar)去繼承css規則。如果你這么做，同時被繼承的css規則有通過后代選擇器修飾的樣式，……
sass 相關教程