Sass中連體符（&）的運用

在CSS中，這種想法是沒法實現的，但在Sass中，能夠輕鬆的經過連體符&來實現。這也是咱們今天要說的。

咱們先來回憶一下，CSS中常見的一組樣式：

/*頁面中連接的顏色*/ a {clolor: #ff3366; } a:hover {color: #cc0033; } /*主菜單中連接的顏色*/ .nav-menu a {color: #ff668c; } .nav-menu a:hover {color: #ff99b3; } .nav-menu a.active {color: #ff0040; } /*頁腳菜單中連接的顏色*/ .footer-menu a {color: #ff1a53; } .footer-menu a:hover {color: #cc0033; }

這是一組控制頁面連接顏色的樣式代碼，首先在樣式中定義了通樣的連接文本顏色，而主菜和頁腳菜單中連接文本顏色各不相同，咱們須要經過類名.nav-menu和.footer-menu來覆蓋默認的樣式。這樣咱們在寫樣式的時候，在選擇器這一部分，咱們都須要書寫相同的一個部分：

a a:hover 

或許不少同窗會說，這有什麼的，真是大驚小怪。可是，若是你的選擇器偏長，重複的代碼偏多，必定會影響您的開發速度。從而影響您的效率。那麼在Sass中，經過連體符&能夠幫助咱們避免這樣的問題，並且還能夠實現一些其餘的效果。接下來，咱們一塊兒來看看Sass中&的一些使用方法以及其功能。

與僞類的結合

僞類和僞元素在CSS中是經常使用的一種方式。好比最多見的是連接的僞類或者說僞元素:after和:before的使用。你們常看到的就是清除浮動的clearfix:

.clearfix:before, .clearfix:after { content:""; display:table; } .clearfix:after { clear:both; overflow:hidden; } .clearfix { *zoom: 1; }

那麼在Sass中，使用&會變得更簡單，更方便：

$lte-ie: true !default; .clearfix { @if $lte-ie { *zoom: 1; } &:before, &:after { content: ""; display: table; } &:after { clear: both; overflow: hidden; } } 

這個簡單的例子很是明確說明，在Sass中可使用&和僞元素、僞類配合使用，並且使用的方法很是簡單。就是用&替代元素自身。

多類選擇器

多類選擇器.className1.className2在CSS中並不常見(主要由於在IE6中解析有所誤差，詳情參考這裏)，但仍是很是有用。好比說增長一個懸浮效果的時候，能夠看到這樣的樣式代碼：

.mod.on { color: green; }

那麼在Sass中，一樣可使用&來替代選擇器.mod：

.mod {
    &.on{
        color: green;
    }
}

這裏須要特別的注意，&和相連的類名之間不能有任何的空格，否則就會變成CSS選擇器中的後代選擇器：

.mod {
    & .on {
        color: green;
    }
}

編譯出來的CSS就成了：

.mod .on { color: green; }

在Sass中還有同等效果的寫法是Sass的直接嵌套：

.mod {
    .on {
        color: green;
    }
}

後代選擇器

正如上面的示例所示，在Sass中能夠經過Sass的層級嵌套來實現後代選擇器。嵌套的越深，層級越多：

.nav-menu {
    li {
        a {
            color: green;
        }
    }
}

生成的CSS:

.nav-menu li a { color: green; }

看到這裏你們或許會問，這跟&有什麼關係呢？由於在選擇器前面加上&符和不加上&符將獲得的效果是同樣。但你們可能也碰到過，有時候在Sass先寫了子元素的效果，但還須要另外一個地方來覆蓋，那麼&將會起到大做用。先來看一個簡單的示例：

a {
    color: red;

    .nav-menu &{
        color: blue;
    }
}

生成的CSS:

a { color: red; } .nav-menu a { color: blue; }

示例很是簡單的說明了一切，&在選擇器後面時的功能。但這裏須要特別的注意，&寫在後面的，前面必需要有空格。否則Sass在編譯時將會報錯：

>>> Change detected to: test.scss error test.scss (Line 78: Invalid CSS after " .nav-menu": expected "{", was "&{" "&" may only be used at the beginning of a compound selector.) 

綜合上面所述，咱們回到文章最開頭的那段CSS代碼，咱們只須要靈活的運用好&，就能夠輕鬆的完成：

$color: #444; $bg-color: #f5f5f5; $link-color: #f36; a { clolor: $link-color; &:hover { color: darken($link-color, 20%); } //Main menu Link Color .nav-menu & { color: lighten($link-color, 10%); &:hover { color: lighten($link-color, 20%); } &.active { color: darken($link-color, 10%); } } //Footer menu link color .footer-menu & { color: darken($link-color, 5%); &:hover { color: darken($link-color, 20%); } } } 

相鄰兄弟選擇

在CSS選擇器中還有一種是相鄰兄弟選擇器+。如：

label + input[type="text"]{...}

input[type="text"]元素緊鄰label元素。在Sass中，一樣可使用&符來替代其中某個元素：

lable {
    color: green;

    & + input[type="text"] {
        border: 1px solid green;
    }
}

編譯CSS:

lable { color: green; } lable + input[type="text"] { border: 1px solid green; }

在這裏僅僅想經過這樣一個簡單的示例來演示&在選擇器中所承載的對象，換句話說，就是&替代的是哪一處元素。這跟其所處的位置以及對應使用的選擇器符號頗有關係。

媒體查詢中的嵌套

在Sass中，媒體查詢配合&符，能夠輕鬆的讓你管理幾個不一樣版式的樣式（方便管理不一樣斷點下的樣式），先來看一個簡單的示例：

.main {
    float: left; width: 45em; @media (max-width: 480px) { & { float: none; width: 100%; } } } 

編譯出來的CSS:

.main { float: left; width: 45em; } @media (max-width: 480px) { .main { float: none; width: 100%; } } 

這樣在製做響應式設計的時候是否是變得很是的簡單，並且易於管理您的代碼。

不過除了上面種方式以外，咱們還能夠採用下面的方式與媒體查詢配合使用：

.main {
    float: left; width: 45em; & { @media (max-width: 480px) { float: none; width: 100%; } } } 

這段SCSS代碼編譯出來的CSS和前面的是如出一轍的。

&符在Sass中存在的問題

前面主要演示了&在Sass中如何讓你更好的使用您的選擇器，可是&在Sass中運用也存在一些問題。接下來一塊兒看看&在Sass中存在的問題，以及如何避免這些問題。

說到這個問題，咱們繼續拿CSS中的BEM來講事。先簡單回憶一下BEM的模式：

.block{...} .block__element{...} .block--modifier{...} 

很想在Sass中經過下面的方式實現BEM的模式：

.block{ ... &__element{...} &--modifier{...} } 

但是這樣書寫，編譯器沒法編譯，將會報出錯誤信息：

Invalid CSS after " &": expected "{", was "__element{"

"__element" may only be used at the beginning of a compound selector.)

此時不少人有可能想到了使用Sass中的插件#{&}的方式來替代.block。

.block{ clolor: red; #{&}__element{ color: green; } #{&}--modifier{ color: blue; } } 

但編譯出來的CSS代碼仍是不盡人意：

.block { clolor: red; } .block .block__element { color: green; } .block .block--modifier { color: blue; }

編譯出來的CSS代碼雖然有效，但並非好的CSS代碼。並且這樣編譯出來的CSS也離開了BEM的初衷。

這也是&在Sass中看成插值使用不盡人意之處。不過這種現像也有方法能夠解決。簡單一點的：

$last-rule: null; .block{ clolor: red; $last-rule: &; } #{$last-rule}__element{ color: green; } #{$last-rule}--modifier{ color: blue; } 

編譯出來的CSS:

.block { clolor: red; } .block__element { color: green; } .block--modifier { color: blue; }

這種方法有兩個關鍵之處：

• 定義一個變量$last-rule，賦予變量值爲null主要用來表明相同的前綴；
• 在B中經過$last-rule:&來賦予新值也就表明了對應的綴。

特別聲明：採用這種方法，編譯的時候會提示警告信息，但並不會影響代碼編譯：

Assigning to global variable "$last-rule" by default is deprecated. In future versions of Sass, this will create a new local variable. If you want to assign to the global variable, use "$last-rule: & !global" instead. 

值得慶幸的是，在Sass的測試版本中有一個新的功能@at-root。使用他配合#{&}能夠輕鬆的解決這個問題。

.block {
    color: red; @at-root #{&}__element{ color: green; } @at-root #{&}--modifier{ color: blue; } } 

編譯出來的CSS：

.block { clolor: red; } .block__element { color: green; } .block--modifier { color: blue; }

這個是否是簡單輕鬆多了。那麼有關於@at-root與BEM結合在一塊兒的詳細介紹，能夠猛擊《Sass ＠at-root》一文。

總結

Sass中的連體符&讓你在嵌套和插值的使用過程時，會讓你憂，會讓你喜。憂的是一不當心使用不對帶來錯誤，或者讓你的代碼變得冗餘。喜的是讓你控制選擇器變得更加的靈活。在這篇文章中，僅經過幾個簡單的示例，闡述了&在Sass中的一些基本使用方式，以有這些方式將會產生什麼樣的效果，又會帶來什麼樣的麻煩，以及如何避免這些麻煩。但願對初學者有所幫助。

著做權歸做者全部。
商業轉載請聯繫做者得到受權,非商業轉載請註明出處。
原文: http://www.w3cplus.com/preprocessor/use-ampersand-in-selector-name-with-Sass.html © w3cplus.com