是否可以在CSS中定義一個變量？

我在學習CSS和HTML，並且正在做一個簡單的代碼示例。在我的CSS中，我爲許多樣式使用顏色，設置邊框顏色或文本顏色！是否可以在CSS中定義一個變量？

我可以將此顏色定義爲通用名稱嗎？我問這個問題，因爲我認爲如果我想稍後改變它，那麼改變1行更容易！

例子：

DEFINE MYCOLOR #000000 

h1{text-color:MYCOLOR;} 
#mydiv{background-color:MYCOLOR;}

我發現這篇文章（Is it possible to define constants in css?），但它並沒有爲我工作（所以它不重複），因爲1個回答說要用類的，並沒有奏效因爲我使用MYCOLOR具有不同的屬性，其他答案表示使用CSS擴展。

是否可以用純CSS和HTML做到這一點？

（這是我的第一篇文章，很抱歉，如果這是一個有點混亂...）

來源

2013-05-28 thur

「可以用純CSS和HTML做到這一點嗎？」不。 – j08691

你是C開發人員，是嗎？ ;） – MMM

您將需要一個SCSS預處理程序來使用變量（或 - 使用術語鬆散 - 常量）來編寫樣式表。

在預處理器領域的兩個主要球員是：

SASS（我個人最喜歡的，特別是與compass使用時）
Less

一些例子：

SASS（使用SCSS語法）：

$mycolor: #000000; 

h1 { color: $mycolor; }

LESS

@mycolor: #0000000; 

h1 { color: @mycolor; }

要開始了，我的建議是玩弄都在Codepen或CSSDeck（兩者報價SASS/LESS實時編譯）來感受語法。

預處理器還爲您提供更多的程序化的東西，如mixin和控制結構。警告：一旦你開始前處理，很難回去：）

來源

2013-05-28 17:03:18

沒有，純CSS不給你這樣的功能。

如果您需要該功能，您需要使用類似Less的東西。

來源

2013-05-28 16:59:42

嗯，簡單的答案是肯定的，但不是現在（和可能沒一會兒）

http://css3.bradshawenterprises.com/blog/css-variables/介紹瞭如何使用已在最新版本的Chrome中進行測試的方法。

的想法是使用如下代碼：

:root { 
    var-color: rgba(255,0,0); 
} 

h1 { 
    color: var(color); 
}

然而實際上，這個代碼已從的Webkit刪除，很多人都表示，他們真的不喜歡它。

因此，人們經常使用SASS或LESS。

我也寫有關：

http://css3.bradshawenterprises.com/blog/why-sass/

上海社會科學院使得這一樣容易：

$brand-color: rgb(255,0,0); 

h1 { 
    color: $brand-color; 
}

來源

2013-05-28 17:04:58

您可以使用一個預處理器來完成你的問題，你有一個以上的選擇。正如其他答案中提到的，您可以使用LESS或SASS。

如果您需要幫助確定哪一個更適合你認爲閱讀這post by Chris Coyier.

來源

2013-05-28 17:05:29 ekims

你可以做這樣的事情：

.mycolorText{ 
    color: #000000; 
} 
.mycolorBg{ 
    background-color: #000000; 
}

然後在你的HTML你這樣做：

<h1 class="mycolorText"> 
<div class="mycolorBg">

css和定義像這樣的技巧是你可以組合你的元素的類。

這意味着你可以這樣做：

<div class="mycolorBg mycolorText">

雖然這不會讓你在一個地方做它，它讓你在短短的2個地方這仍然是很簡單的更新做。

否則，你將不得不做別人說的話，並使用一個CSS預處理器。

來源

2013-05-28 17:05:50 Ryan

是否可以在CSS中定義一個變量？

回答

相關問題