武林網(www.49028c.com)文章簡介：停止使用很多的Sass變量。

使用Sass，像這樣來寫代碼：

color: $body-text-color; padding: $sidebar-padding;

但我并不喜歡這樣這樣，我現在喜歡用Sass按下面的方式來寫：

color: $hot-pink; padding: 20px;

第一個是抽像的實例，遠離了實用價值，我們應該使用一種更通用的，語義命名變量。

這種方法和很多人喜歡，特別當它涉及到顏色的應用。Sacha Greif的文章就是一個簡單的Sass實例。

-color: $blue; $link-color: $red; .foo{ color: $text-color; } a{ color: $link-color; }

類似的事情做得多了，我從中發現它不易于進行長期的維護，實際上也減慢了開發速度。

取決于你說的“語義化”

為一個變量定義一個具語義化名，就必須得傳達出有意義的東西。我作為一名開發人員，這是具有語義化：

$sidebar-text-color不添加任何值或者說不能從選擇器或屬性值中推斷出他的意思。他僅是一個不斷重復使用的信息。

得到任何有意義的信息，我需要將鏈接到其他地方的一個兩個值，如：

$sidebar-text-color: $hot-pink; //_sidebar.scss color: $sidebar-text-color;

這可能聽起來并不算多，但它在整個項目和你在更多開發中使用到。

另一個方面，將示例修改成：

立即有更多的有用信息。$hot-pink抽像化對顏色代碼塊并沒有太多意義，但對開發來說，加入了更多的含義。

另外，如果想看到這個值的實際作用，僅在一個地方定義了這樣的一個值：

color: $hot-pink; 但那不是維護的噩夢嗎？

評論中有這樣的一種觀點：

 

如果我想把我的文本從“pink”變成“green”，我不能把$hot-pink從“pink”變成“green”。這樣沒有道理呀！

 

同意。因此，只是添加一個抽像層，并沒有做任何事情來解決這個問題，只需添加新的色彩變量和在更新所需要替代的值：

-green: #0c5c19; // _sidebar.scss color: $forest-green;

好嗎？好。

 

但是，如果我需要在多個地方更新顏色什么的時候呢？

 

在多個地方更新，這真的不是件難事。

當我想在全局樣式中改變一個值，不管它用在哪里，我想不出一個只用一次的方法。

我花了大部分時間用在一個單一的模塊上。模塊是獨立的，所以我不能想到一個例子，我想說“無論在任何模塊中出現，修改這個值”。

主題

如果你從一個單一的樣式表或引用的不同樣式變量的模塊生成多個主題就是強大的嗎？在這個例子中，$sidebar-text-color是一個真正的變量，它不僅僅是一個使用不同名的常數，所以我們會這樣做：

-text-color: $red; // _halloween.scss $sidebar-text-color: $orange; // _sidebar.scss color: $sidebar-text-color;

但是你多久真的需要這樣做呢？它對我來說是很少見。

總結

在一年前Nicolas Gallagher就告訴我們內容派生出來的類名并不總是最有用的名字對于開發人員，但當我們被告之.bold和.red被Web開發中除去的理由時，我們依然還帶有這么多的類名。

可重用的顏色轉換為我們可讀的變量，如$hot-pink是很優秀和值得推薦的。

然而使用一個content-或module-定義另外一人變量。

不易于長期維護。如查我需要在一個模塊中改變一個顏色，在模塊中易于定義一個可易讀懂的值。

降低開發。每次我要添加一個color或background找到或創建一個全局變量是比較痛苦。

如果你接受這個顏色想法，你可以最終會寫成這樣：

看起來沒什么樂趣可言，我寧愿大家像下面這樣維護：

);

譯者手語：整個翻譯依照原文線路進行，并在翻譯過程略加了個人對技術的理解。如果翻譯有不對之處，還煩請同行朋友指點。謝謝！

英文原文：

中文譯文：