Question

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

下面是一个示例，其中颜色＃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;
}

Answer 1

您现在无法在CSS中创建变量。您确实在像SASS或LESS这样的CSS预处理器中获得此功能，但在运行时却没有（因为它是预处理器）。您应该继续使用Javascript来实现此目的。

将来，SASS或LESS提供的一些优点可以在CSS4中实现..直到那时你无法在纯CSS中实现这一点。

不幸的是，您无法使用Javascript更改类属性，但根据您的具体情况，此问题中的某些受到破坏的解决方案可能会有所帮助：jQuery CSS: Dynamically change attributes of a class

Answer 2

您需要查看Less或SASS预编译。

Answer 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文件。

Answer 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>

CSS全局变量

4 个答案: