CSS全局变量

我有一个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;
}

您现在无法在CSS中创建变量。您确实在CSS预处理器（如SASS）（或更少）中获得此功能，但在运行时则不会（因为它是预处理器）。您应该继续使用JavaScript实现此目标。

将来，SASS或SASS提供的一些善良可能会在CSS4中实现。

不幸的是，您不能使用JavaScript更改类属性，但是，根据您的情况，此问题中的某些折衷解决方案可能会有所帮助：jQuery CSS：动态更改类的属性

您需要更少或萨斯预编译。

我不认为您在问一个变量，开发人员可以使用，但最终用户，访客可以设置，正确？

如果是这样，则需要将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)

另一方面，您询问客户如何（例如购买软件托管的人）如何为其业务设置自己的自定义颜色（ala a"模板"），您有一些选择。最简单的是让他们为此类定义自己的CSS：

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

如果您只需要通过某种管理工具来执行此操作，则需要使用一些后端代码将其写入DB或static .CSS文件中的变量。

您可以使用CSS，不需要SASS或更少的。现在，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>

相关内容

最新更新

热门标签：