Question

我正在学习CSS和HTML，我正在做一个简单的代码示例。在我的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执行此操作？

（这是我的第一篇文章，很抱歉，如果它有点令人困惑......）

Answer 1

在编写样式表时，您需要一个SCSS预处理器来使用变量（或者 - 使用松散的术语 - 常量）。

预处理器领域的两个主要参与者是：

一些例子：

SASS （使用scss语法）：

$mycolor: #000000;

h1 { color: $mycolor; }

<强> LESS

@mycolor: #0000000;

h1 { color: @mycolor; }

首先，我的建议是在Codepen或CSSDeck（两者都提供SASS / LESS实时编译）中同时使用，以了解语法。

预处理器还为您提供更多编程内容，例如mixins和控制结构。警告：一旦开始预处理，就很难回去：）

Answer 2

不，普通的CSS不会给你这样的功能。

如果您需要该功能，则需要使用Less之类的内容。

Answer 3

嗯，简短的回答是肯定的，但现在不是（可能暂时没有）

http://css3.bradshawenterprises.com/blog/css-variables/解释了如何使用已在最新版本的Chrome中测试的方法。

这个想法是使用如下代码：

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

h1 {
    color: var(color);
}

实际上，这个代码已经从Webkit中删除了，很多人评论说他们并不喜欢它。

因此，人们经常使用SASS或LESS。

我也写过：

SASS让它变得如此简单：

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

h1 {
    color: $brand-color;
}

Answer 4

您可以使用预处理器来完成您的问题，并且您有多个选择。如其他答案中所述，您可以使用LESS或SASS。

如果您需要帮助确定哪一个适合您，请考虑阅读此post by Chris Coyier.

Answer 5

您可以这样做：

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

然后在你的HTML中你这样做：

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

使用css和定义这样的东西的技巧是你可以在你的元素上组合类。

这意味着你可以这样做：

<div class="mycolorBg mycolorText">

虽然这不允许你在一个地方进行，但它确实让你只在2个地方进行，这仍然很容易更新。

否则你必须做别人说的并使用css-preprocessor。