3

我正在学习 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 来做到这一点？

（这是我的第一篇文章，如果有点混乱，很抱歉......）

4

5 回答 5

7

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

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

一些例子：

SASS（使用 scss 语法）：

$mycolor: #000000;

h1 { color: $mycolor; }

较少的

@mycolor: #0000000;

h1 { color: @mycolor; }

首先，我的建议是在Codepen或CSSDeck （它们都提供 SASS/LESS 实时编译）中玩弄一下，以了解语法。

预处理器还为您提供更多程序化的东西，如混合和控制结构。警告：一旦你开始预处理，就很难再回去了：）

于 2013-05-28T17:03:18.190 回答
5

不，纯 CSS 不会为您提供这样的功能。

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

于 2013-05-28T16:59:42.600 回答
3

好吧，简短的回答是肯定的，但不是现在（可能暂时不会）

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/

SASS 让这一切变得简单：

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

h1 {
    color: $brand-color;
}
于 2013-05-28T17:04:58.920 回答
1

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

如果您需要帮助确定哪一个适合您，请考虑阅读Chris Coyier 的这篇文章。

于 2013-05-28T17:05:29.277 回答
1

你可以这样做：

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

然后在您的 html 中执行以下操作：

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

使用 css 和定义这样的东西的诀窍是您可以在元素上组合类。

这意味着您可以这样做：

<div class="mycolorBg mycolorText">

虽然这不能让您在一个地方执行此操作，但它确实允许您仅在 2 个地方执行此操作，更新起来仍然非常简单。

否则，您将不得不按照其他人所说的去做并使用 css 预处理器。

于 2013-05-28T17:05:50.213 回答