我在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中定义常量吗？

回答

注意！

相关问题