難得的好教程，分享給大家，希望大家喜歡。
不過sas5并不想強(qiáng)迫任何人一定使用中劃線或下劃線,所以這兩種用法相互兼容。用中劃線聲明的變量可以使 用下劃線的方式引用,反之亦然。這意味著即使 compass選擇用中劃線的命名方式,這并不影響你在使用 compass 的樣式中用下劃線的命名方式進(jìn)行引用 sLink-coLor: blue color: sLink coLor //編譯后 color: blue 在上例中,$1ink- color和$ ink color其實(shí)指向的是同一個(gè)變量。實(shí)際上,在sass的大多數(shù)地方,中劃線 命名的內(nèi)容和下劃線命名的內(nèi)容是互通的,除了變量,也包括對(duì)混合器和Sass數(shù)的命名。但是在sass中純css部 分不互通,比如類名、D或?qū)傩悦?盡管變量自身提供了很多有用的地方,但是sass基于變量提供的更為強(qiáng)大的工具才是我們關(guān)注的焦點(diǎn)。只有當(dāng)變 量與sass的其他特性一起使用時(shí),才能發(fā)揮其全部的潛能。接下來,我們將探討其中一個(gè)非常重要的特性,即規(guī)則嵌 2.嵌套CSS規(guī)則; c55中重復(fù)寫選擇器是非常惱人的。如果要寫一大串指向頁面中同一塊的樣式時(shí),往往需要一遍又一遍地寫同 #content article h1 i color: #333 J #content article pi margin-bottom: 1. 4em #content aside[ background-color: #EEE 像這種情況,sass可以讓你只寫一遍,且使樣式可讀性更高。在Sass中,你可以像俄羅斯套娃那樣在規(guī)則塊中嵌 套規(guī)則塊。sas5在輸出css吋會(huì)幫你打這些套規(guī)則處理好,避免你的亙復(fù)書寫 content article i h1 i color: #333] pi margin-bottom: 1. 4em H aside i background-color: #EEE J /*編譯后+/ #content article h1 i color: #333 y #content article pi margin-bottom: 1. 4em j #content aside[ background-color: #EEE 上邊的例子,會(huì)在輸出css時(shí)把它轉(zhuǎn)換成跟你之前看到的樣的效果。這個(gè)過程中,sass用了兩步,每一步都是 像打開俄羅斯套娃那樣把羋邊的嵌套規(guī)則塊一個(gè)個(gè)打開。首先,把* content(父級(jí))這個(gè)id放到 article詵擇器 (子級(jí))和 aside選擇器(子級(jí))的前邊 #content h1 i color: #333] p[ margin-bottom: 1. 4em j #content aside i background-color: #EEE 3 編譯后 # content article h1 i color: #333 1 *content article pi margin-bottom: 1. 4em 1 #content aside[ background-color: #EEE 然后,# content article里邊還有嵌套的規(guī)則,sass重復(fù)一遍上邊的步驟,把新的選擇器添加到內(nèi)嵌的選擇 器前邊。 一個(gè)給定的規(guī)則塊,既可以像普通的CSS那樣包含屬性,又可以嵌套其他規(guī)則塊。當(dāng)你同時(shí)要為一個(gè)容器元素及其子 元素編寫特定樣式時(shí),這種能力就非常有用了。 content i background-color: #f5f5f5; 咨器元素的樣式規(guī)則會(huì)被單獨(dú)抽離出來,而嵌套元紊的樣式規(guī)則會(huì)像容器元素沒有包含任何屬性時(shí)那樣被拍烹出來。 content background-color: #++5f5 H #content aside background-color: #eee 大多數(shù)情況下這種簡(jiǎn)單的嵌套都沒問題,但是有些場(chǎng)景下不行,比如你想要在嵌套的選擇器里邊立刻應(yīng)用一個(gè)類似 于: hover的偽類。為了解決這種以及其他情況,sass提供了一個(gè)特殊結(jié)構(gòu)& 2-1.父選擇器的標(biāo)識(shí)符&; 一般情況下,sass在解開—個(gè)嵚套規(guī)則時(shí)就會(huì)把父選器(# content)通過一個(gè)空格連接到子選擇器的前邊 ( article和 aside)形成( ontent artic1e和# content aside)。這種在CSS里邊被稱為后代選擇器 因?yàn)樗x擇D為 content的元素內(nèi)所有命中選擇器 article和 aside的元素。但左有些情況下你卻不會(huì)希 望sass使用這神后代選擇器的方式生成這神連接。 最常見的一種青是當(dāng)你為鏈接之類的元素寫: hover這種偽類時(shí),你并不希望以后代詵擇器的方式連接。比如 兌,下面這種情況sass就無法正常工作 article a i lor: blue hover[ color: red 這意味莙 color:red這條規(guī)則將會(huì)被應(yīng)用到迒擇器 article a: hover, article元素內(nèi)鏈嶶的所有子元素 在被 hover時(shí)都會(huì)變成紅色。這是不正確的!你想把這條規(guī)則應(yīng)用到超鏈接自身,而后代選擇器的方式無法幫你實(shí) 解決之道為使用一個(gè)特殊的sass選懌器,即父選擇醫(yī)。在使用嵌套規(guī)則時(shí),父選擇器能對(duì)于嵌套規(guī)則如何解開提 供更好的控制。它就是一個(gè)簡(jiǎn)單的&符號(hào),且可以放在任何一個(gè)選擇器可岀現(xiàn)的地方,比如h1放在哪,它就可以放 在哪。 article a i color: blue i color: red y 當(dāng)包含父選擇器標(biāo)識(shí)符的嵌套規(guī)則被打開時(shí),它不會(huì)像后代選擇器那樣進(jìn)行拼接,而是&被父選擇器直接替換 article a i color: blue 1 article a: hover i color: red 在為父級(jí)選擇器添加:hoνer等偽類時(shí),這種方式非常有用。同時(shí)父選擇器標(biāo)識(shí)符還有另外一種用法,你可以在父 選擇器之前添加選擇器。舉例來說,當(dāng)用戶在使用IE瀏覽器時(shí),你會(huì)通過3 javAscript在<boy>標(biāo)簽上添加一個(gè)ie的 類名,為這種情況編寫特殊的樣式如下 icontent aside color: red: body. ie color: green /*編譯戶* icontent aside [ color: red; body.ie #content aside i color: green y sass在選擇器嵌套上是非常智能的,即使是帶有父選擇器的情況。當(dāng)sass選到群組選擇器(由多個(gè)逗號(hào)分隔開 的選擇器形成)也能完美地處理這種嵌套。 2-2.群組選擇的嵌套; 在CSs里邊,選擇器h1h2和h3會(huì)同時(shí)命中h1元素、h2元素和h3元素。與此類似, button button會(huì) 命中 button元素和類名為 button的元素。這種選擇器稱為群組選擇器。群組選擇器的規(guī)則會(huì)對(duì)金中群組中任何一個(gè)選 擇器的元素生效 button, button t margin. 0j 當(dāng)看到上邊這段代碼時(shí),你可能還沒意識(shí)到會(huì)有重復(fù)性的工作。但會(huì)很快發(fā)現(xiàn):如果你需要在一個(gè)特定的容器元素內(nèi) 對(duì)這樣—個(gè)群組選擇器進(jìn)行修飾,情況就不同了。css的寫法會(huì)讓你在群組選擇器中的每一個(gè)選擇器前都重復(fù)一遍容器 元素的選擇器。 container h1, container h2,. container h3( margin-bottom:. &em y 非常運(yùn),sass的嵌套特性在這種場(chǎng)景下也非常有用。當(dāng)sas5解開一個(gè)群組選擇器規(guī)則內(nèi)的規(guī)則時(shí),它會(huì)把 每—個(gè)內(nèi)畝選擇器的規(guī)則都正確地解出來 container i hI, h2, h3 imargin-bottom: Bem] 首先sass將. container和h1. container和h2. container和h3分別組合,然后將三者重新組合 成一個(gè)群組選擇器,生成你前邊看到的普通css樣式。對(duì)于內(nèi)嵌在群組選擇器內(nèi)的嵌套規(guī)則,處理方式也一樣 nav, aside t a icolor: blue] 首先sass將nav和 a aside和a分別組合,然后將二者重新組合成一個(gè)群組生選擇器 nav a, aside a icolor: blue 處理這種群組選擇器規(guī)則嵌套上的強(qiáng)大能力,正是sas5在減少重復(fù)敲寫方面的貢剌之一。尤其在當(dāng)嵌套級(jí)別達(dá)到 兩層甚至三層以上時(shí),與普通的εss編寫方式相比,只寫一遍群組選擇器大大減少了工作量。 有利必有弊,你需要特別注意群組選擇器的規(guī)則嵌套生成的css。雖然sass讓你的樣式表看上去很小,但實(shí)際生 成的css卻可能非常大,這會(huì)降低網(wǎng)站的速度。 關(guān)于選擇器嵌套的最后一個(gè)方面,我們看看sass如何處理組合選擇器,比如>、+和~的使用。你將看到,這種場(chǎng) 環(huán)下你甚至無需使用父選擇器標(biāo)識(shí)符。 2-3.子組合選擇器和同層組合選擇器:>、+和 上邊這三個(gè)組合選擇必須和其他選擇器配合使用,以指定瀏覽器僅選繹杲種特定上下文中的元素。 article section i margin: 5px J article sectioni border: 1px solid #ccc 你可以用子組合選擇器>選擇一個(gè)元素的直接子元素。上例中,第一個(gè)選擇器會(huì)選擇 article下的所有命中 section選擇 器的元素。第二個(gè)選擇器只會(huì)選擇 article下緊跟著的子元素中命中 section選擇器的元素 在下例中,你可以用同層鄰組合洗擇器+選擇 header元素后緊齦的p元素 header pi font-size: 1. lem j 你也可以用同層全體組合選擇器~,選擇所有跟在 article后的同層 article元素,不管它們之間隔了多少其 他元素 article 這些組合選擇器可以毫不費(fèi)力地應(yīng)用到sass的規(guī)則嵌套中。可以把它們放在外層選擇器后邊,或生層選擇器前 article i border-top: 1px dashed #ccc y section background: #eee J d1> dt i color: #333 1 dd i color: #555 1 nav +&i margin-top: 0 I sass會(huì)如你所愿地將這些嵌套規(guī)則—一解開組合在一起 article w article border-top: 1px dashed #ccc article footer i background: #eee article dl dt i color: #333 article di > ddi color: #555 nav article i margin-top: 0] 在sass中,不僅僅css規(guī)則可以嵌套,對(duì)屬性進(jìn)行嵌套也可以少很多重復(fù)性的工作。 2-4.嵌套屬性; 在sass中,除了CSs選擇器,屬性也可以進(jìn)行嵌套。盡編寫屬性涉及的重復(fù)不像編寫選擇器那厶糟糕,但是要 反復(fù)寫 border-sty1 e border- .dth border-colo以及 border-*等七是非常煩人的。在sass中,你只需 敲寫一遍 border: nav width: 1px; color: #ccci 嵌套屬性的規(guī)則是這樣的:把屬性名從中劃線的地方斷開,在根屬性后邊添加一個(gè)冒號(hào):緊跟一個(gè){}塊,把子 屬性部分寫在這個(gè)【}塊中。就像ss選澤器嵌套一樣,sass會(huì)把你的孑屬性—解開,把根屬性和子屬性部分 通過中劃線連接起來,最后生成的效果與你手動(dòng)一遍遍寫的css樣式一樣 nav border-style: solid border-width: 1px 對(duì)于屬性的縮虧形式,你甚至可以像下邊這樣來嵌套,指明例外規(guī)則 nav 這比下邊這種同等樣式的寫法要好 border: 1px solid #ccci border-left: opx; 屬性和選擇器嵌套是非常仹大的特性,因?yàn)樗鼈儾粌H大大減少了你的編弓量,而彐通過視覺上的縮進(jìn)使你編寫的樣式 結(jié)構(gòu)更加清晰,更易于閱讀和開發(fā)。 即便如此,隨著你的樣式表變得越來越大,這種寫法也很難倮持結(jié)構(gòu)湑詬。有吋,處囯這種大量杄式的唯-方法就是 把它們分拆到多個(gè)文件中。sa55通過對(duì)css原有 import規(guī)則的改進(jìn)直接支持了這一特性 3.導(dǎo)入SASS文件; Css有一個(gè)特別不常用的持性,即刨 import規(guī)則,它允許在一個(gè)cs文件中導(dǎo)入其他css文件。然而,后果 是只有抹行到@ import時(shí),瀏器才會(huì)去下載其他css文件,這導(dǎo)致頁面加載起來特別慢。 sass也有一個(gè)@ Import規(guī)則,但不同的是,sass的@ import規(guī)則在生成css文件時(shí)就把相關(guān)文件導(dǎo)入進(jìn) 來。這意味著所有相關(guān)的樣式被歸納到了司一個(gè)css文件中,而無需發(fā)起額外的下載請(qǐng)求。另外,所有在被導(dǎo)入文件中 定義的變量和混合器(參見25節(jié))均可在導(dǎo)入文件中使用。 使用sas5的@ import規(guī)則并不需要指眀被導(dǎo)入文件的全名。你可以省略.sas5或·scs5文件后綴(見下 圖)。這樣,在不修改樣式表的前提下,你完全可以隨意修改你或別人寫的被導(dǎo)入的sass樣式文件語法,在sass 和sc55語法之間隨意切換。舉例來說,@ import" sidebar;這條命令將把 sidebar.scs5文件中所有樣式添加到當(dāng) 前樣式表中。 colors. scss import"colors @ lmport“ mIxIns"; mixins. Scss lmport“grid” grid. scss 本節(jié)將介紹如何使用sass的imot來處理多個(gè)sass文件。首先,我們將學(xué)習(xí)編寫那些被導(dǎo)入的 sass 件,因?yàn)樵谝粋€(gè)大型sass項(xiàng)目中,這樣的文件是你最常編寫的那一類。接著,了鮮集中導(dǎo)入sass文件的方法,使你 的樣式可重用性更高,包括聲明可自定義的變量值,以及在杲一個(gè)選擇器范圍內(nèi)導(dǎo)入sa55文件。最后,介紹如何 在sass中使用css原生的@ import命令。 通常,有些sass文件用于導(dǎo)入,你并不希望為每個(gè)這樣的文件單獨(dú)地生成一個(gè)css文件。對(duì)此,sass用一個(gè) 特殊的約定來解決 3-1.使用SASS部分文件; 當(dāng)通過@ import把sas5樣式分散到多個(gè)文件時(shí),你通常只想牛成少數(shù)幾個(gè)css文件。那些專門為 import命 令而編寫的sas5文件,并不需要生成對(duì)應(yīng)的獨(dú)立css文件,這樣的sas5文件稱為局部文件。對(duì)此,sass有一個(gè) 特殊的約定來命名這些文件。 此約定即,sass局部文件的文件名以下劃線開頭。這樣,sass就不會(huì)在編譯時(shí)單獨(dú)編譯這個(gè)文件輸出css 而只把這個(gè)文件用作導(dǎo)入。當(dāng)你@ import一個(gè)局部文件時(shí),還可以不寫文件的全名,即省略文件名開頭的下劃線。舉 例來說,你想導(dǎo)入 themes/ night-sky.scss這個(gè)局部文件里的變量,你只需在樣式表中寫@ import themes/night-sky"j 局部文件可以被多個(gè)不同的文件引用。當(dāng)一些樣式需要在多個(gè)頁面甚至多個(gè)項(xiàng)目中使用時(shí),這非常有用。在這種情況 下,有時(shí)需要在你的樣式表中對(duì)導(dǎo)入的樣式稍作修改,sass有一個(gè)功能剛好可以解決這個(gè)問題,即默認(rèn)變量值 3-2.默認(rèn)變量值; 一股情況下,你反復(fù)聲明一個(gè)變量,只有最后一處聲明有效且它會(huì)覆蓋前邊的值。舉例說明 sLink-coLor: blue; sLink-coLor: red; color: sLink-coLor 在上邊的例子中,超鏈接的co1or會(huì)被設(shè)置為red。這可能并不是你想要的結(jié)果,假如你寫了一個(gè)可被他人通 過@ lmport導(dǎo)入的sass庫(kù)文件,你可能希望導(dǎo)入者可以定制修改sass庫(kù)文件中的某些值。使用sass 的! default標(biāo)簽可以實(shí)現(xiàn)這個(gè)目的。它很像css屬性中! important標(biāo)簽的對(duì)立面,不同的是! default用于變 量,含義是:如果這個(gè)變量被聲明賦值了,那就用它聲明的值,否則就用這個(gè)默認(rèn)值。 Sfancybox-width: 400px default 在上例中,如果用戶在導(dǎo)入你的sass局部文件之前聲明了一個(gè)$ fancybox- width變量,那么你的局部文件中 對(duì)$ ancybox-wdth賦值4ap×的操怍就無效。如果用戶沒有做這樣的聲明,則$ fancybox-wdth將默認(rèn) 為40 接下來我們將學(xué)習(xí)嵌套導(dǎo)入,它允許只在某一個(gè)選擇器的范圍內(nèi)導(dǎo)入sass局部文件。 3-3.嵌套導(dǎo)入; 跟原生的css不同,sass允許@ import命令寫在css規(guī)則內(nèi)。這種導(dǎo)入方式下,生成對(duì)應(yīng)的css文件時(shí) 局部文件會(huì)被直接插入到css規(guī)則內(nèi)導(dǎo)入它的地方。舉例說明,有一個(gè)名為blue- there.scss的局部文件,內(nèi)容如 下 background: blue lite; 然后把它導(dǎo)入到個(gè)CS5規(guī)則內(nèi),如下所示 blue-theme faimport "blue-theme"H /生成的結(jié)果跟你直接在.b1ue- theme選擇器內(nèi)寫bue- theme.sCS文件的為容完全一樣。 aside i background: blue; colr:#ff千 被導(dǎo)入的局部文件中定義的所有變量和混合器,也會(huì)在這個(gè)規(guī)則范圍內(nèi)生效。這些變量和混合器不會(huì)全局有效,這樣 我們就可以通過嵌套導(dǎo)入只對(duì)站點(diǎn)中某一特定區(qū)域運(yùn)用某種顏色主題或其他通過變量配置的樣式 有時(shí)可用css原生的 import機(jī)制,在瀏覽器中下載必需的css文件。sass也提供了幾種方法來達(dá)成這種 需求 3-4.原生的CSS導(dǎo)入; 由于sass兼容原生的css,所以它也支持原生的css@imot。盡管通常在sass中使用@ import 時(shí),sass會(huì)嘗試找到對(duì)應(yīng)的sass文件并導(dǎo)入進(jìn)來,但在下列三種情況下會(huì)生成原生的 CSS@import,盡管這會(huì)造 成瀏覽器解析css時(shí)的額外下載 o被導(dǎo)入文件的名字以css結(jié)尾 被導(dǎo)入文件的名字是一個(gè)URL地址(比如http://www.sass.hk/css/css.css)由此可用谷歌字體AP提供的相應(yīng) 服務(wù) 被導(dǎo)入文件的名字是CSs的ur(值。 這就是說,你不能用sass的@ mport直接導(dǎo)入一個(gè)原始的css文件,因?yàn)閟ass會(huì)認(rèn)為你想用css原生的 import。但是,因?yàn)閟ass的語法完全兼容css,所以你可以把原始的css文件改名為,scss后綴,即可直接 導(dǎo)入了 文件導(dǎo)入是保證sass的代碼可維護(hù)性和可讀性的重要—環(huán)。次之但亦非常重要的就是注釋了。注釋可以幫助樣式