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