CSS 全局变量答案

【问题标题】：CSS global variablesCSS 全局变量
【发布时间】：2016-05-12 12:52:37
【问题描述】：

我有一个 css 文件，它在许多不同的元素上使用一种颜色。我希望能够指定一个全局变量（例如：$color1）来为我设置颜色，而不是使用 jquery 来动态更改每个元素。

下面是一个示例，其中颜色#F54F36 用于许多不同的元素。我目前正在使用 jQuery 来动态更改这些元素，但我想看看是否有办法在 CSS 中定义全局变量。

::selection {
    background: #F54F36;
    color: #fff;
}::-moz - selection {
    background: #F54F36;
    color: #fff;
}#jpreBar, .patern span, .red, .nav - button span, .inner - overlay, .skillbar - bar, .serviseslider h3 span, .icon - holder, .subscriptionForm input#submitButton, #loadingProgress, .sepcolor, .quote - icon, .skillbar - bar, #facts ul li h6, #closeProject a, #ajaxpage a.lanch - project, #clientlist, #contact_form textarea: focus,
#contact_form input: focus,
.owl - theme.owl - controls.owl - page.active span,
.owl - theme.owl - controls.clickable.owl - page: hover span,
.slides - pagination a.current,
.slides - pagination a: hover,
.submit_btn: hover,
.resume - head,
.resume - line,
.resume - date,
.download - resume {
    background: #F54F36;
}.ajl,
.bigtext,
.sections - head,
.slides - container h1 span,
.error,
#options li: hover,
#options li.actcat,
.social - list ul li a: hover,
.num,
.project - description h3,
.project - details h3,
.subcribe div#error,
.subcribe div#success,
.smallicon: hover,
.footer,
.company - color {
    color: #F54F36;
}#team.content,
#options li.back,
#subscribe.content,
#prices.content {
    border - top: 2px solid#F54F36;
}#facts ul li h6: before {
    border - bottom - color: #F54F36;
}#testimonials.content {
    border - top: 2px solid#F54F36;
    border - bottom: 2px solid#F54F36;
}.actser: after {
    border - top - color: #F54F36;
}.inner a: hover,
.inner li.current a {
    color: #F54F36;
    border - right: 2px solid#F54F36;
}.customNavigation a.next - slide {
    background: #F54F36 url(.. / images / pl - small.png) no - repeat center;
}.customNavigation a.close {
    background: #F54F36 url(.. / images / close - white.png) no - repeat center;
}.customNavigation a.btn: hover {
    box - shadow: 0 0 0 2px rgba(255, 255, 255, 0.1),
    0 0 10px 10px#F54F36,
    0 0 0 10px rgba(255, 255, 255, 0.5);
}.triangle {
    border - color: transparent#F54F36 transparent transparent;
}.popup - gallery a span {
    background: #F54F36 url(.. / images / pl - small.png) no - repeat center;
}.social - list ul li.back {
    border - top: 1px solid#F54F36;
}.to - top: after {
    border - bottom - color: #F54F36;
}.flex - direction - nav.flex - next {
    background: #F54F36 url(.. / images / project - next1.png) no - repeat center;
}.flex - direction - nav.flex - prev {
    background: #F54F36 url(.. / images / project - prev1.png) no - repeat center;
}.right - date: before {
    border - right - color: #F54F36;
}.left - date: before {
    border - left - color: #F54F36;
}.resume - circle {
    border: 2px solid#F54F36;
}.resume - slider {
    border - bottom: 10px solid#F54F36;
}

【问题讨论】：

使用 LESS、SASS 或 Stylus :)
这种情况是否存在网站的基本 .css 文件，并且该网站的用户可以选择自定义某些部分，并且每个用户可能有不同的自定义？
您是在问如何拥有变量（作为开发人员，在这种情况下，像 SASS 这样的答案最有意义）还是在问您网站的访问者如何设置背景颜色结束了？
这里有问题吗？如果您知道自己需要 CSS 预处理器，为什么不阅读它们或尝试一下？
@bagofmilk 包含 [sass] 和 [less]（都是 CSS 预处理器）标签似乎意味着您非常了解这里需要的内容。既然如此，下一步合乎逻辑的步骤是研究这些技术，看看它们是否能解决您的问题。

标签： css sass less

【解决方案1】：

您现在不能在 CSS 中创建变量。您确实可以在像 SASS 或 LESS 这样的 CSS 预处理器中获得此功能，但不是在运行时（因为它是一个预处理器）。您应该继续使用 Javascript 来实现这一点。

将来，SASS 或 LESS 提供的一些优点可能会在 CSS4 中实现。在此之前，您无法在纯 CSS 中实现这一点。

不幸的是，您也不能使用 Javascript 来更改类属性，但是，根据您的情况，此问题中的一些妥协解决方案可能会有所帮助：jQuery CSS: Dynamically change attributes of a class

【讨论】：

我们可以在css中创建全局变量见这里stackoverflow.com/questions/22262189/css-global-variables/…

【解决方案2】：

您需要研究 Less 或 SASS 预编译。

【讨论】：

如果我使用 SASS。如何让用户定义他们想要的颜色并更新样式表？
例如。如果我在 SASS 中将$color1 定义为“红色”，但用户将其更改为“#ff3636”。我将如何更新 SASS 变量？
那不一样了。您将需要一个后端服务来根据您可以重新加载的查询参数返回样式表。让 php、node、python 等任何东西根据 GET 请求返回动态样式表。
我们可以在 css 中创建全局变量，看这里stackoverflow.com/questions/22262189/css-global-variables/…

【解决方案3】：

我认为您不是在询问一个供您（开发人员使用）的变量，而是最终用户（访问者）可以设置的变量，对吗？

如果是这样，那么您需要将 JavaScript 纳入其中。

设置你的类，这样你就有了一个专门用于定义这种颜色的类。

.userColor {/* put a default color here */}

在您的 HTML 中，您将拥有：

<div class="class1 class2 userColor etc"></div>

然后您可以使用 jQuery 将所有具有该类的元素更改为您想要的颜色：

var = yourColorVariable // up to you how to set a value for this
$('.userColor').css('background',yourColorVariable)

另一方面，如果您询问客户（例如购买了您的软件来托管它的人）如何设置自己的自定义颜色（也就是他们业务的“模板”），您有几个选择.最简单的就是让他们为这个类定义自己的 CSS：

.userColor {/*let the customer modify this directly*/}

如果您需要他们仅通过某种管理工具执行此操作，您将需要使用一些后端代码将其写入数据库中的变量或静态 .css 文件。

【讨论】：

谢谢。但我已经提到我目前正在使用 jquery 来完成此操作。我可能会尝试添加更多像你提到的类......
@bagofmilk 哦！你不想使用 jQuery。我建议从您的问题中删除 jQuery 标签。正如其他人所说，CSS中没有变量这样的东西。作为开发人员，您可以在 SASS 等预编译工具中使用它们，或者通过输出 CSS 的服务器端代码，但不能在浏览器中使用它们。
我们可以在 css 中创建全局变量，看这里stackoverflow.com/questions/22262189/css-global-variables/…

【解决方案4】：

您可以使用 CSS，不需要像 SASS 或 LESS 这样的预处理器。现在 css 支持全局变量。简单的例子如下所示。

<!DOCTYPE html>
<html>
<style>
:root {
  --bigfont:100px;
}
#test{
font-size:var(--bigfont);
}

</style>
<body style="text-align:center;margin-top:60px">

<div id="test">Merbin Joe</div>

</body>
</html>

【讨论】：