CSS變量賦值

Question

是否可以在CSS文檔中使用變量，可能通過使用Javascript？

例如，如果我有一個總體變量「colorOne」分配給「#ffffff」。

以後可以調用「colorOne」嗎？例如「color：colorOne;」？

我可以使用查找和替換來替換實例，但這變得非常單調乏味，有沒有其他選擇？

Answer 1

您可以使用預處理器，例如：http://lesscss.org/

這可以讓您做的是編寫您的CSS這樣

@colorOne: #FFFFFF; 

.main_links { 
    color: @colorOne; 
} 
h2 { 
    color: @colorOne; 
} 

和輸出一旦它的編制將是

.main_links { 
    color: #FFFFFF; 
} 
h2 { 
    color: #FFFFFF; 
} 

有使用比它分配變量，它的強大LESS更多的理由，並允許你做更多的事情，比如嵌套樣式，看看這個文檔：http://lesscss.org/#synopsis

Answer 2

這對純CSS來說是不可能的。

但是，你可以使用一個第三方庫，如LESS，來實現這一目標：

@nice-blue: #5B83AD; 

#header { color: @nice-blue; } 

Answer 3

你將不得不使用像LESS：

這將允許您使用variables ：

@colorOne: #5B83AD; 

#header { color: @colorOne; } 

Answer 4

在純粹的CSS - 不！

但是你可以使用許多工具，允許這樣做，並編譯CSS的你：

1. 減CSS - http://lesscss.org/
2. 指南針 - http://compass-style.org/（編譯SASS/SCSS http://sass-lang.com/）

Answer 5

不要忘了SASS。 http://sass-lang.com

Syntatically Awesome Stylesheets。

Answer 6

你不能在純CSS中使用變量，但除了LESS之類的事情之外，還有另外一種方式（不是最清潔的，但它的工作原理是......）。

建立代表你的變量類：

.color-black { 
    color: #000000; 
} 

.color-red { 
    color: #FF0000; 
} 

然後，您可以針對一個元素指定多個類別：

<div class="some-class other-class color-black"></div> 
<div class="some-class other-class color-red"></div> 

此後，只要你在color-black更改值，或color-red，這將改變使用該類的所有元素的顏色。

正如我所說的，它不是最乾淨的方式來做事情，並可能導致臃腫的HTML/CSS，但它可以使用它...例如在測試環境中說，如果你測試顏色計劃/設計。

注：的另一件事提的是，使用這種方法可以讓你換出動態使用javascript類，你在你的問題提到。

實施例（與jQuery）

$("#MyDiv").mouseenter(function() { 
    $(this).removeClass("color-red").addClass("color-black"); 
}).mouseleave(function() { 
    $(this).removeClass("color-black").addClass("color-red"); 
});