Sass ＠at-root （1）

標籤：style   class   blog   code   http   tar   

在SassConf大會上，給我們傳遞了Sass3.3的新特性。這些新特性有很多意義，特別是@at-root指令，這讓你的代碼會得更佳清潔。

今天我們主要一起來瞭解Sass中的@at-root特性的使用規範。

 

在具體瞭解@at-root規範之間，我們先來回憶Sass的嵌套功能。簡單的來看一個樣本。在我們的CSS中常見有這樣的一段代碼：

.foo {    color:green;}.foo .bar {    color:gray;}

回到Sass中，實現上面的樣式，我們可以使用Sass的嵌套來完成：

.foo {    color: green;    .bar {        color: gray;    }}

除了上面的方法之外，還可以通過連體符&來實現：

.foo {    color: green;    & .bar {        color: gray;    }}

如若簡單實現:

.foo .bar {    color: gray;}

還可以使用另外一種特殊方式來實現：

.bar {    .foo & {        color: gray;    }}

 

在我們CSS中有一種命名方式是BEM,如：

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

試想我們在Sass中是否可以通過下面的方式來實現上面樣式代碼：

#{&}_element{}

不仿我們來驗證一下：

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

悲催的是，編譯出來的CSS並不是我們想要的代碼：

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

 

但在LESS和Stylus中，能很好的實現BEM類名的形式。此時在想，在Sass中有沒有這樣的功能呢？值得幸運的是，在Sass3.3中新增加了@at-root特性,能實現上面BEM的特性：

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

@at-root特性

前而的例子告訴我們@at-root是什麼。通過他可以告訴Sass，你不想嵌套選取器。當使用&選取器時，就算你不想嵌套選取器，Sass也會自動嵌套。但往往很多時候，我們是不想要嵌套選取器，例如BEM。使用@at-root和#{&}可以引用父（在Sass中總是引用父選取器）和插值，可以嵌套，做一些其他的事情。接下來，我們通過一些執行個體來說明@at-root的特性。

@at-root運行環境

@at-root是Sass的新特性。要想能正常的運行@at-root，首先需要先安裝Sass的全新版本：只要確保你的電腦上已經安裝了Ruby，你可以直接開啟終端命令運行下面的命令安裝Sass：

$ gem install sass --pre 

如果你無法確認，你以前安裝的Sass是不是最新版本，你可以通過：

$ sass -v

顯示的版本資訊：

Sass 3.3.0.rc.2 (Maptastic Maple)

如果不是，你可以使用下面的命令更新Sass:

$ gem update sass

注意，如果你的系統是剛升級到OS X 10.9 Mavericks，你得重新更新Command Line Tools:

$ xcode-select --install

重啟您的終端命令，重新執行上面的命令就可以擷取最新版本的Sass。請注意，這是一個未發表的版本，因為它還在開發中，但現在玩一點都不受影響，還可以體驗Sass中新增加的一些特性。

“Ben Frain在The things I want from Sass aren’t the things I thought I wanted一文中也詳細的描述了Sass中新增的特性，如：Source Maps。”

@at-root規範

@at-root使用規範是如何工作，這裡我們通過一些測試案例來做說明：

內聯選取器模式SCSS

.foo {    @at-root .bar {        color:gray;    }}

CSS

.bar {  color: gray; }

測試案例可以說明，@at-root的內聯選取器模式，將不會讓你的選取器發生任何的嵌套，直接移除了父選擇。在來看一個嵌套深一點的用例：

SCSS

.foo {    @at-root .bar {        color: gray;        @at-root button{            color:red;            @at-root span {                color: orange;            }        }    }}

CSS

.bar {  color: gray; }button {  color: red; }span {  color: orange; }

在SCSS中嵌套，使用@at-root內聯選取器模式，編譯出來的CSS無任何嵌套，讓代碼更加的簡單。回到SCSS中的嵌套中，如果不使用@at-root內聯選取器模式，將會按代碼的層級關係一層一層往下嵌套。如上例，將用例中的@at-root去掉之後，將會編譯出像下面的CSS代碼（瞭解過Sass）的同學，一點都不會覺得奇怪。

.foo .bar {  color: gray; }.foo .bar button {  color: red; }.foo .bar button span {  color: orange; }