我可以制作一個我可以在CSS，JS和HTML之間共享的自定義顏色定義嗎？

Question

我有一個藍色的顏色，我想在我的應用程序的許多地方使用，目前我正在我的CSS中的樣式之間復制和粘貼它。 有沒有一種方法可以定義一個常量，如標准顏色，'藍色'，'紅色'等，我可以在我的CSS，我的HTML和我的JS之間分享？

我想能夠說（某處，最好是CSS）

myblue = #33CC99

在CSS說...

background-color:myblue;

在HTML中說...

<td color="myblue"/>

並在JavaScript中

tag.style.backgroundColor = myblue;

我猜這是不可能的，谷歌什么都沒有，所以有沒有人有任何想法？ 我懷疑我是唯一遇到這種情況的人。

Answer 1

一個非常有前途的產品，將變量等高級表達式“編譯”到CSS中是很少的 。 它需要Ruby。 我還沒用過，但絕對值得一看。

更原始的方法是使用像PHP這樣的服務器端腳本語言。

您可以在PHP中定義常量，如下所示：

define ("MYBLUE", "#33CC99");

然后使用<?=MYBLUE;?>輸出所需的值

大缺點：要在外部css和js文件中執行此操作，您顯然必須由PHP解釋器解析它們，如果您有大量訪問者，這不是很好的性能。 對於低流量站點，它可能無關緊要。

Answer 2

是的，這是不可能的。 但是，您可以編寫自己的CSS預處理器（或使用其中一個現有的預處理器），例如使用PHP。 最大的缺點是您必須使用PHP在整個站點上輸出顏色代碼，並且您的腳本看起來像

tag.style.backgroundColor = <? echo $myblue; ?>

同樣在CSS中

.someClass {
  background-color: <? echo $myblue ?>
}

或類似的東西。 這也不是很好。 當然，您可以使用您選擇的任何服務器端腳本語言。 據我所知，這是在整個網站中使用顏色常數的唯一可能性。

你可以看看一些處理器：

• http://cssp.codeplex.com/
• http://www.shauninman.com/archive/2007/06/27/css_server_side_pre_processor
• http://icant.co.uk/articles/cssconstants/

Answer 3

您可以查看HAML + SASS 。 雖然您不能同時為所有三種語言定義變量，但這兩種語言可以使編寫HTML + CSS變得更加容易。

Answer 4

我如何處理這個問題就是在我的CSS中創建一個類。

.color_class {color: #33CC99;}

然后在我的HTML中調用它

<td class="color_class" />

您可以為HTML元素分配多個類。

在JS中，只需命名該類

document.getElementById('id').className = 'color_class';

當然，你可以玩你想要如何選擇你的元素。 JS庫可能有更簡單的方法來分配CSS類。

Answer 5

要在不使用任何動態CSS的情況下實現這一點（例如，使用內容類型text/css提供PHP文件），最好的辦法是將您定義“主題”的地方分開。

<script type="text/javascript">
   var theme = '#003366';
 </script>

然后，您可以使用JavaScript文件根據主題編寫樣式。

但是，如果您能夠使用CSS預處理器，請使用它。 您將擁有更大的靈活性，代碼將更易於維護。 我幾乎總是使用PHP的PHP或JSP頁面。

Answer 6

正如其他用戶已經注意到的那樣，除非你通過CGI / PHP / ASP腳本傳遞所有HTML，JS和CSS內容，否則你不能用直接的HTML，JS或CSS做到這一點 - 這實際上並不是一個糟糕的方法，因為它很容易維護。

如果你在包含CSS / JS文件的引用中使用查詢字符串 - 例如'/css/stylesheet.php?timestamp=2010-01-01+00:00:00'，那么幾乎所有客戶端都會積極地緩存你的CSS / JS文件，否定對用腳本語言解析它們的負載的任何影響可能有（雖然除非站點可能特別繁忙，否則我不會太過關聯）。

如果您正在使用Apache（很可能），另一種方法是使用類似mod_set的東西來為您重新編寫所有HTML，JS和CSS文件。 如果您不熟悉配置Apache（或正在使用其他Web服務器），則可能更難以支持。

關於標簽命名：

無論采用哪種方法，我強烈建議使用清晰的標記系統來表示您的動態變量（例如％MyBlue％）並考慮使變量名稱具有代表性（例如％HeadingBackgroundColor％，％FontColor％，即使兩者都設置為％MyBlue％）因為這可以防止事情在以后變得毛茸茸（當你發現改變一個值有預期后果時）。

使用更具代表性的名稱乍一看似乎不必要的冗長，但在許多情況下會導致問題，因為當顏色與原始方案明顯不同時，顏色最終會以意想不到的方式發生沖突（許多主流軟件都可以使用 - 因為作者假設％value1％和％value2％總是在一起，所以％value1％和％value3％ - 這意味着主題的選項受到非預期的依賴性的嚴重限制。

Answer 7

我是在構建時通過Freemarker運行我的CSS文件來完成的。

Answer 8

我不確定你的最終目標。 如果要允許為網頁選擇幾個主題之一，您可以簡單地擁有多個CSS文件，以及用戶首選樣式表的cookie /會話變量/數據庫存儲。 那你就可以做

 <link rel=<? echo stylepref; ?> type='text/css'>

或類似的規定

如果您希望能夠完全自定義網站，則需要上述答案之一。

Answer 9

在純客戶端CSS分組選擇器允許您在許多不同的元素上放置相同的顏色：

p, .red, #sub, div a:link { color: #f00; }

Answer 10

CSS中沒有“變量”的概念，但我強烈建議不要做你正在做的事情。 沒有充分的理由不能將CSS表格中的所有樣式信息定義為CSS類。 如果你這樣做，然后只是在html和javascript中應用所述類，那么在復制和粘貼方面這是一個主要的負擔。

其次，請記住，您可以為元素定義多個CSS類，例如

<div class='blue-text white-background'>my content</div>

然后你可以在CSS中獨立定義那些，la：

.blue-text { color : Blue; }
.white-background { background-color: white;}

您甚至可以創建僅在應用兩者時生效的規則：

.blue-text.white-background { color : AliceBlue; }

如果您想要動態生成顏色選擇，唯一真正的方法就像其他人建議的那樣，既可以在部署之前預處理文件，也可以使用您選擇的語言動態生成和提供CSS。