我在CSS樣式表中使用了幾種顏色。例如可以在css中定義常量嗎？

#testdiv{ 
    background: #123456; 
}

是否有可能通過名稱來定義色彩，所以我可以在CSS表像這樣引用它

#testdiv{ 
    background: COLORNAME; 
}

來源

2011-01-31 zmol

如果您使用諸如SASS框架，你將與其他輝煌功能相處此功能。 – Coderchu 2015-07-14 04:56:26

是的，他們現在被稱爲[CSS自定義屬性]（https://mobile.htmlgoodies.com/html5/css/a-guide-to-using-css-variables.html） – gbjbaanb 2017-12-10 04:35:41

這可能是一個更好的做法定義CSS類，並重新使用它，你要指定顏色的每個元素上，而不是它的編碼到特定元素。

像這樣：

.darkBackground { 
    background: #123456; 
} 

.smallText { 
    font-size:8pt; 
}

它還有助於瞭解一個元素都可以應用多個類，所以你可以打破你的「恆」的元素值轉換成單獨的類，並根據需要應用多個。

<div id="myDiv1" class="darkBackground smallText"></div> 
<div id="myDiv2" class="darkBackground bigText"></div>

來源

2011-01-31 07:21:10 JohnFx

+32

我不太喜歡你的榜樣。我相信CSS類最適用於對html文檔結構進行分類。一個名爲darkBackground的類沒有描述文檔的結構，並創建了文檔的概念耦合到外觀的某個方面 - 這正是CSS應該讓我們遠離的東西。如果將來的開發人員需要切換到淺色背景，他們可能需要編輯大量html以使用class「lightBackground」，或者通過編輯「darkBackground」規則來引用淡色，從而違反其類的含義。 – csj 2013-08-01 00:50:20

與純CSS

不是，但也有一些CSS擴展，你可以使用，如SASS或less-css。

這裏是少CSS的例子：

@color: #4D926F; 

#header { 
    color: @color; 
} 
h2 { 
    color: @color; 
}

來源

2011-01-31 05:19:34 probabilityzero

+29

常常不會有已被添加到CSS3。 Web開發已進入中世紀。 – 2015-05-26 05:50:18

@ AlikElzin-kilaka我多年來都這麼覺得，但在使用less-css一段時間後，經歷了它帶來的衆多功能之後，我停止關注我認爲CSS存在的缺陷。 – csj 2016-03-03 06:57:57

使用SASS或less。

如今，使用類似上述的預處理器是更好的前端開發工作流程的常見做法。

它可以幫助你更有組織，像變量或混合功能是他們值得考慮的一些原因。

來源

2011-01-31 10:20:59 Red

有一個這樣的couple of proposals，所以它很快就會發生，但據我所知沒有任何標準。

爲此使用CSS類的問題是，如果您想爲不同的屬性使用相同的值，例如如果您想要在一個元素上使用特定的顏色值作爲邊框，背景顏色在另一個。

來源

2012-09-07 08:15:40 codebox

-5

執行此操作的標準方法是PHP。添加#define語句在你的CSS文件的開頭，就像

#define COLORNAME: #123456;

而是在HTML文件的頭部鏈接到CSS文件，運行在該位置的PHP腳本。該腳本加載CSS文件，將所有出現的COLORNAME替換爲#123456，並使用echo或print將修補後的文本流式傳輸到客戶端。

或者，您可以上傳源文件（也使用PHP），使用PHP創建一個CSS文件，其中所有出現的#define都將被替換，並在HTML中使用該文件。這樣做效率更高，因爲您只需在上傳時進行一次轉換，而不是每次加載HTML文件。

來源

2013-10-30 16:34:28

-2

你可以有常量在CSS文件，宣佈他們是這樣的：

*{ 
-my-lightBlue: #99ccff; 
-my-lightGray: #e6e6e6; 
}

然後你可以在CSS文件中像這樣使用它們：

.menu-item:focused { 
    -fx-background-color: -my-lightBlue; 
}

之後，你可以使用它們這樣編程：

progressBar.setStyle("-fx-accent: -my-lightBlue;");

來源

2015-07-14 04:40:02 JohnBeGood

在CSS中，你可以聲明你的常量在：root bloc：

:root { 
    --main-bg-color: #1596a7; 
}

，並用VAR（）方法的使用：

.panel-header { 
    background: var(--main-bg-color); 
    color: .... 
}

來源

2017-10-25 15:26:28

是，使用類是一個很好的方法，但它現在可以在CSS聲明變量。變量（特別是顏色）在聲明相同的顏色時非常有用（如果使用集成顏色，則需要十六進制值）。

這是使用純CSS（和tbh，幾乎不像使用SASS或lessCSS一樣優雅），但它適用於純CSS的目的。首先，在:root區塊中定義實際變量。您可以在例如一個p塊（或其他任何事情），但它只會在該塊中可用。因此，要確保它的全球訪問，將它放在根塊：

:root { 
    --custom-color: #f0f0f0; 
}

並採用var方法（不VAR方法也不會被解析爲一個實際的參考），那麼你可以在以後引用它：

p{ 
    color: var(--custom-color); 
}

由於:root塊（像所有其他的CSS聲明）一個全功能的塊引用元素，你不能聲明是這樣的：

:root{ 
    color: #00ff00; 
}

這將引用每個元素的顏色屬性，並將其設置爲（在此示例中）#00ff00。你聲明的每個變量名開始與--，這意味着你可以這樣做：再次

:root{ 
    --color: #00ff00; 
}

而且，如果可以的話，使用類似SASS或lessCSS。通過編寫@color = #fff *和引用@color *來聲明它們的能力比處理純CSS更容易，並且每次要訪問自定義屬性時都必須使用var關鍵字。

你還可以用JS訪問內嵌CSS來獲取和/或改變性質：

//Inline CSS 
element.style.getPropertyValue("--custom-color"); 

// get variable from wherever 
getComputedStyle(element).getPropertyValue("--custom-color"); 

// set variable on inline style 
element.style.setProperty("--custom-color", "#f0f0f0");

注意！

這是最近添加的功能，所以browser compatibility is important to check。尤其是firefox值得特別注意，因爲它在引入變量聲明本身和var()方法之間有差距。

_{*與lessCSS它@color，與上海社會科學院是$color}

來源

2018-01-09 19:12:45 Zoe

可以在css中定義常量嗎？

回答

注意！

相關問題