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