CSS全局变量

我有一个css文件，在许多不同的元素上使用一种颜色。我希望能够指定一个全局变量（例如：

$color1

），为我设置颜色，而不是使用jquery动态更改每个元素

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

：：选择{
背景#F54F36；
颜色：#fff；
}：-moz-选择{
背景#F54F36；
颜色：#fff；
}#jpreBar、.patren span、.red、.nav-button span、.inner-overlay、.skillbar-bar、.serviselder 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#联系方式文本区：焦点、，
#联系形式输入：焦点，
.owl-theme.owl-controls.owl-page.active span，
.owl-theme.owl-controls.clickable.owl-page:悬停范围，
.幻灯片-分页a.当前，
.幻灯片-分页a：悬停，
.提交_btn:悬停，
.简历-总目，
.简历行，
.简历-日期：，
.下载-简历{
背景#F54F36；
}ajl先生，
.bigtext，
.部门-总目，
.幻灯片-容器h1跨度，
.错误，
#选项李：悬停，
#选项li.actcat，
.社交-列表ul li a：悬停，
纳姆先生，
.项目-说明h3，
.项目-详细信息h3，
.subcribe div#错误，
.订阅部门#成功，
.smallicon:悬停，
.页脚，
.公司-颜色{
颜色：#F54F36；
}#团队内容，
#李，回来，
#订阅内容，
#价格、内容{
边框-顶部：2个实心#F54F36；
}#事实ulli h6：之前{
边框-底部-颜色：#F54F36；
}#推荐内容{
边框-顶部：2个实心#F54F36；
边框-底部：2px实心#F54F36；
}艾克瑟：之后{
边框-顶部-颜色：#F54F36；
}.a:悬停，
.内里{
颜色：#F54F36；
右边框：2px实心#F54F36；
}.customNavigation a.下一张-幻灯片{
背景：#F54F36 url（../images/pl-small.png）无重复中心；
}.关闭{
背景：#F54F36 url（../images/close-white.png）无重复中心；
}.customNavigation a.btn:悬停{
框-阴影：0 0 2pxRGBA（255，255，255，0.1），
0 0 10px 10px#F54F36，
10px rgba（255,255,255,0.5）；
}.三角形{
边框颜色：透明#F54F36透明；
}.弹出窗口-图库a跨度{
背景：#F54F36 url（../images/pl-small.png）无重复中心；
}.社会-列表ul li.back{
边框-顶部：1px实心#F54F36；
}.到顶部：之后{
边框-底部-颜色：#F54F36；
}.flex-方向-nav.flex-下一个{
背景：#F54F36 url（../images/project-next1.png）无重复中心；
}.flex-方向-nav.flex-prev{
背景：#F54F36 url（../images/project-prev1.png）无重复中心；
}.正确日期：之前{
边框-右-颜色：#F54F36；
}.左-日期：之前{
边框-左-颜色：#F54F36；
}.简历-圈{
边框：2px实心#F54F36；
}.恢复-滑块{
边框-底部：10px实心#F54F36；
}

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

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

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

---

不幸的是，您也不能使用Javascript来更改类属性，但是，根据您的情况，这个问题中的一些折衷解决方案可能会有所帮助：

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

如果是这样，那么您需要将JavaScript合并到混合中

设置你的类，这样你就有了一个定义这种颜色的类

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

在HTML中，您将拥有：

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

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

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

---

如果您需要他们只通过某种管理工具来完成这项工作，那么您需要使用一些后端代码将其写入db或static.css文件中的变量

您可以使用CSS，不需要像SASS或更少的预处理器。现在css支持全局变量。下面是一个简单的例子

：根{
--大字体：100px；
}
#试验{
字体大小：var（--bigfont）；
}
梅宾·乔

Use LESS，SASS或Stylus:）是否存在这样的情况：站点有一个base.css文件，并且该站点的用户可以选择自定义某些部分，而每个用户可能有不同的自定义？您是否在询问如何拥有一个变量（作为开发人员，在这种情况下，像SASS这样的答案最有意义）或者你在问你的网站访问者如何设置他们网站的背景色？这里有问题吗？如果你知道你需要一个CSS预处理器，为什么不仔细阅读或尝试一下呢？@bagofmilk包含[sass]和[less]（两个CSS预处理器）标签似乎意味着你对这里需要的东西有很好的理解。既然如此，下一个合乎逻辑的步骤就是研究这些技术，看看它们是否能解决您的问题。我如何让用户定义他们想要的颜色并更新样式表？例如。如果我在SASS中将

$color1

定义为“红色”，但用户将其更改为“#ff3636”。如何更新SASS变量？那就不同了。您需要一个后端服务根据查询参数返回样式表，然后重新加载。有博士学位

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