创建CSS全局变量：样式表主题管理[重复]

问题描述 投票：56回答：6

这个问题在这里已有答案：

有没有办法在css中设置全局变量，例如：

@Color1 = #fff;
@Color2 = #b00;

h1 {
  color:@Color1;
  background:@Color2;
}
css variables
6个回答
93
投票

最新更新：03/04/2018

CSS Variables (Custom Properties) have arrived!

Another year another browser. Edge has now joined Mozilla and Google by supporting this truly great feature.

预处理器“不”需要！

CSS中有很多重复。单个颜色可以在几个地方使用。

对于一些CSS声明，可以在级联中声明更高的值，并让CSS继承自然地解决这个问题。

对于非平凡的项目，这并不总是可行的。通过在:root伪元素上声明变量，CSS作者可以通过使用变量来暂停一些重复实例。

这个怎么运作

将变量设置在样式表的顶部：

CSS

创建根类：

:root {
}

创建变量（ - [String]：[value]）

:root {
  --red: #b00;
  --blue: #00b;
  --fullwidth: 100%;
}

在CSS文档中的任何位置设置变量：

h1 {
  color: var(--red);
}
#MyText {
  color: var(--blue);
  width: var(--fullwidth);
}

浏览器支持/兼容性

有关当前兼容性，请参阅caniuse.com。

![supported browsers

FIREFOX：版本31+（默认启用）

（像往常一样领先。）More info from Mozilla

CHROME：版本49+（默认启用）。

“通过启用实验性Web平台功能，可以在Chrome版本48中启用此功能以进行测试。在Chrome地址栏中输入chrome://flags/即可访问此设置。”

Safari / IOS Safari：版本9.1 / 9.3（默认启用）。

Opera：版本39+（默认启用）。

Android：版本52+（默认启用）。

IE：它永远不会发生。

Edge：版本15+（默认启用）。

CSS自定义属性登陆Windows Insider Preview build 14986

W3C SPEC

即将推出的CSS变量的完整规范

Read more

试试看

下面附有小提琴和片段用于测试：

（它只适用于支持的浏览器。）

DEMO FIDDLE

:root {
  --red: #b00;
  --blue: #4679bd;
  --grey: #ddd;
  --W200: 200px;
  --Lft: left;
}
.Bx1,
.Bx2,
.Bx3,
.Bx4 {
  float: var(--Lft);
  width: var(--W200);
  height: var(--W200);
  margin: 10px;
  padding: 10px;
  border: 1px solid var(--red);
}
.Bx1 {
  color: var(--red);
  background: var(--grey);
}
.Bx2 {
  color: var(--grey);
  background: black;
}
.Bx3 {
  color: var(--grey);
  background: var(--blue);
}
.Bx4 {
  color: var(--grey);
  background: var(--red);
}
<p>If you see four square boxes then variables are working as expected.</p>

<div class="Bx1">I should be red text on grey background.</div>
<div class="Bx2">I should be grey text on black background.</div>
<div class="Bx3">I should be grey text on blue background.</div>
<div class="Bx4">I should be grey text on red background.</div>
25
投票

您现在无法在CSS中创建变量。如果你想要这种功能，你需要使用像SASS或LESS这样的CSS预处理器。以下是您在SASS中出现的样式：

$Color1:#fff;
$Color2:#b00;
$Color3:#050;

h1 {
    color:$Color1;
    background:$Color2;
}

它们还允许你做其他（很棒）的东西，比如嵌套选择器：

#some-id {
    color:red;

    &:hover {
        cursor:pointer;
    }
}

这将编译为：

#some-id { color:red; }
#some-id:hover { cursor:pointer; }

查看official SASS tutorial以获取设置说明以及有关语法/功能的更多信息。我个人使用名为Web Workbench by Mindscape的Visual Studio扩展来轻松开发，其他IDE也有很多插件。

更新

截至2014年7月/ 8月，Firefox已经为CSS变量实现了draft spec，这里是语法：

:root {
  --main-color: #06c;
  --accent-color: #006;
}
/* The rest of the CSS file */
#foo h1 {
  color: var(--main-color);
}
6
投票

使用CSS是不可能的，但使用像less或SASS这样的CSS预处理器。

3
投票

尝试SASS http://sass-lang.com/或LESS http://lesscss.org/

我喜欢SASS并将其用于我的所有项目。

3
投票

我是这样做的：

html：

<head>
    <style type="text/css"> <? require_once('xCss.php'); ?> </style>
</head>

xCss.php：

<? // place here your vars
$fntBtn = 'bold 14px  Arial'
$colBorder  = '#556677' ;
$colBG0     = '#dddddd' ;
$colBG1     = '#44dddd' ;
$colBtn     = '#aadddd' ;

// here goes your css after the php-close tag: 
?>
button { border: solid 1px <?= $colBorder; ?>; border-radius:4px; font: <?= $fntBtn; ?>; background-color:<?= $colBtn; ?>; }
1
投票

您将需要LESS或SASS同样的..

但是，我认为这是另一种替代方案，我认为它将在CSS3中实现。

http://css3.bradshawenterprises.com/blog/css-variables/

示例：

 :root {
    -webkit-var-beautifulColor: rgba(255,40,100, 0.8);
    -moz-var-beautifulColor: rgba(255,40,100, 0.8);
    -ms-var-beautifulColor: rgba(255,40,100, 0.8);
    -o-var-beautifulColor: rgba(255,40,100, 0.8);
    var-beautifulColor: rgba(255,40,100, 0.8);
 }
  .example1 h1 {
    color: -webkit-var(beautifulColor);
    color: -moz-var(beautifulColor);
    color: -ms-var(beautifulColor);
    color: -o-var(beautifulColor);
    color: var(beautifulColor);
 }
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.