2012-09-11 50 views
7

我正在將樣式表從轉換爲SCSS,我對變量作用域看到的東西感到困惑。SCSS變量範圍

$my-color: #000; 

#logo { 
    $my-color: #555; 
    color: $my-color; 
} 

a { 
    color: $my-color; 
} 

轉換爲下面的CSS:一個簡單的例子再現

#logo { 
    color: #555555; 
} 

a { 
    color: #555555; 
} 

LESS等效構造將導致a color值爲#000作爲#logo範圍內的變量聲明將重寫更一般的,但只在該範圍內。變量示波器不能像SCSS那樣工作嗎?有沒有辦法實現同樣的事情?

+0

http://stackoverflow.com/questions/5469931/sass-variable-default-scope的副本? – moopet

回答

10

通過對Sass variable default scope似乎變量SCSS的工作方式不同,以LESS答案閱讀。

在這種情況下在#logo所述的$my-color定義改變全局變量而在LESS它將被視爲該全局變量的一個塊本地覆蓋的值。

我想我必須有不同的結構來實現相同的結果。

+5

在我看來,這很糟糕,因爲你正在污染全球空間。每當你進入新塊時,你必須想出一個新的變量名,這會導致變量名:'$ color','$ color1','$ color2' .... –

+2

很快Sass就會有適當的詞法範圍,你可以像下面這樣覆蓋全局變量:'$ var:newvalue!global;' - 當你覆蓋沒有'!global'的全局時,Sass 3.3已經給出了一個棄用警告。 –

+2

警告:這不再是這種情況。見下面的答案。 – justinsAccount

16

這不再的情況下至少爲SCSS v3.4.12的:

現在作用域正確的變量:

輸入:

$my-color: #000; 

#logo { 
    $my-color: #555; 
    color: $my-color; 
} 

a { 
    color: $my-color; 
} 

輸出:

#logo { 
    color: #555; 
} 

a { 
    color: #000; 
} 

可試用於:http://sassmeister.com/