blocks|key|1386269|text|CSS本身不使用变量。但是，您可以使用另一种语言，如SASS，使用变量定义样式，并自动生成CSS文件，然后将其放到web上。请注意，每次更改CSS时都必须重新运行生成器，但这并不难。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1386270|entityMap|0|LINK|mutability|MUTABLE|url|http://sass-lang.com/^0|Q|4|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

CSS itself doesn't use variables. However, you can use another language like <a href="http://sass-lang.com/" rel="noreferrer">SASS</a> to define your styling using variables, and automatically produce CSS files, which you can then put up on the web. Note that you would have to re-run the generator every time you made a change to your CSS, but that isn't so hard.

blocks|key|1386336|text|恐怕不是PHP，但Zope和Plone使用类似于SASS的DTML来实现这一点。它在CMS中非常有用。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1386337|Upfront+Systems在Plone中有一个使用它的good+example。|1386338|entityMap|0|LINK|mutability|MUTABLE|url|http://www.zope.org/Documentation/Guides/DTML-HTML/DTML.html|1|http://www.upfrontsystems.co.za/courses/plone/ch02s03.html^0|T|4|0|0|T|C|1|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]]]

Not PHP I'm afraid, but Zope and Plone use something similar to SASS called <a href="http://www.zope.org/Documentation/Guides/DTML-HTML/DTML.html" rel="nofollow noreferrer">DTML</a> to achieve this. It's incredibly useful in CMS's.

Upfront Systems has a <a href="http://www.upfrontsystems.co.za/courses/plone/ch02s03.html" rel="nofollow noreferrer">good example</a> of its use in Plone.

blocks|key|1171070|text|CSS版的Ruby+Gem看起来很棒。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1171071|http://lesscss.org/|offset|length|1171072|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|J|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@$D|O|E|P|1|Q]]|A|$]]|$1|F|3|-4|5|6|7|R|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|C]]]]

The 'Less' Ruby Gem for CSS looks awesome. 

<a href="http://lesscss.org/" rel="noreferrer">http://lesscss.org/</a>

blocks|key|1386421|text|您可以通过javascript传递CSS，并用某种颜色替换COLOUR1的所有实例(基本上是正则表达式)，并提供一个备份样式表，以防最终用户关闭JS。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1386422|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

You could pass the CSS through javascript and replace all instances of COLOUR1 with a certain color (basically regex it) and provide a backup stylesheet incase the end user has JS turned off

blocks|key|1171186|text|我不清楚为什么你不能使用PHP。然后，您可以根据需要简单地添加和使用变量，将文件另存为PHP文件，并链接到该.php文件作为样式表，而不是.css文件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1171187|它不一定非得是PHP，但你明白我的意思。|1171188|当我们想要编程的东西时，为什么不使用一种编程语言，直到CSS+(也许)支持像变量这样的东西？|1171189|此外，请查看Nicole+Sullivan的Object-oriented+CSS。|offset|length|1171190|entityMap|0|LINK|mutability|MUTABLE|url|http://wiki.github.com/stubbornella/oocss^0|0|0|0|M|J|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|U|8|@]|9|@$H|V|I|W|1|X]]|A|$]]|$1|J|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q]]]]

I'm not clear on why you can't use PHP. You could then simply add and use variables as you wish, save the file as a PHP file and link to that .php file as the style sheet instead of the .css file.

It doesn't have to be PHP, but you get what I mean.

When we want programming stuff, why not use a programming language until CSS (maybe) supports things like variables?

Also, check out Nicole Sullivan's <a href="http://wiki.github.com/stubbornella/oocss" rel="nofollow noreferrer">Object-oriented CSS</a>.

blocks|key|1171248|text|dicejs.com+(formally+cssobjs)是SASS的客户端版本。您可以在CSS中设置变量(存储在json格式的CSS中)，并重用您的颜色变量。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1171249|//create+the+CSS+JSON+object+with+variables+and+styles
var+myCSSObjs+=+{
++cssVariables+:+{
++++primaryColor:'#FF0000',
++++padSmall:'5px',
++++padLarge:'$expr($padSmall+*+2)'
++}
++'body'+:+{padding:'$padLarge'},
++'h1'+:+{margin:'0',+padding:'0+0+$padSmall+0'},
++'.pretty'+:+{padding:'$padSmall',+margin:'$padSmall',+color:'$primaryColor'}
};

//give+your+css+objects+a+name+and+inject+them
$.cssObjs('myStyles',myCSSObjs).injectStyles();|code-block|syntax|javascript|1171250|这里有一个完整的可下载演示的链接，它比他们的文档更有帮助：dicejs+demo|1171251|entityMap|0|LINK|mutability|MUTABLE|url|http://dicejs.com/|1|http://dicejs.com/demo/cssobjs_demo.zip^0|0|T|0|0|0|T|B|1|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@$A|10|B|11|1|12]]|C|$]]|$1|K|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]|S|$5|N|O|P|C|$Q|T]]]]

<a href="http://dicejs.com" rel="nofollow">dicejs.com (formally cssobjs)</a> is a client-side version of SASS. You can set variables in your CSS (stored in json formatted CSS) and re-use your color variables.

<pre><code>//create the CSS JSON object with variables and styles
var myCSSObjs = {
 cssVariables : {
 primaryColor:'#FF0000',
 padSmall:'5px',
 padLarge:'$expr($padSmall * 2)'
 }
 'body' : {padding:'$padLarge'},
 'h1' : {margin:'0', padding:'0 0 $padSmall 0'},
 '.pretty' : {padding:'$padSmall', margin:'$padSmall', color:'$primaryColor'}
};

//give your css objects a name and inject them
$.cssObjs('myStyles',myCSSObjs).injectStyles();
</code></pre>

And here is a link to a complete downloadable demo which is a little more helpful then their documentation : <a href="http://dicejs.com/demo/cssobjs_demo.zip" rel="nofollow">dicejs demo</a>

blocks|key|1171261|text|是的，在不久的将来(我在2012年6月写了这篇文章)，你可以定义原生css变量，而不需要使用less/sass等！Webkit引擎刚刚实现了第一个css变量规则，所以Chrome和Safari的尖端版本已经可以使用它们了。查看带有onsite+css浏览器的Official+Webkit+(Chrome/Safari)+development+log+演示。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1171262|希望在接下来的几个月里我们可以期待浏览器对原生css变量的广泛支持。|1171263|entityMap|0|LINK|mutability|MUTABLE|url|http://trac.webkit.org/browser/trunk/LayoutTests/fast/css/variables/colors-test.html^0|3L|1C|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

Yes, in near future (i write this in june 2012) you can define native css variables, without using less/sass etc ! The Webkit engine just implemented first css variable rules, so cutting edge versions of Chrome and Safari are already to work with them. See the <a href="http://trac.webkit.org/browser/trunk/LayoutTests/fast/css/variables/colors-test.html">Official Webkit (Chrome/Safari) development log </a> with a onsite css browser demo.

Hopefully we can expect widespread browser support of native css variables in the next few months.

blocks|key|1171272|text|你可以试试CSS3+variables|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1171273|body+{
++--fontColor:+red;
++color:+var(--fontColor);
}|code-block|syntax|javascript|1171274|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/css-variables/^0|5|E|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

You can try <a href="http://www.w3.org/TR/css-variables/" rel="noreferrer">CSS3 variables</a>:

<pre><code>body {
 --fontColor: red;
 color: var(--fontColor);
}
</code></pre>

blocks|key|1171286|text|您可以对选择器进行分组：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1171287|#selector1,+#selector2,+#selector3+{+color:+black;+}|code-block|syntax|javascript|1171288|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can group selectors:

<pre><code>#selector1, #selector2, #selector3 { color: black; }
</code></pre>

blocks|key|1386657|text|单独使用CSS是不可能的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1386658|您可以使用less.js在JavaScript和LESS中执行此操作，这样可以将较少的变量呈现到CSS中，但它仅用于开发，并且为实际使用增加了太多开销。|offset|length|1386659|与CSS最接近的是使用这样的attribute+substring+selector：|1386660|[id*="colvar-"]+{
++++color:+#f0c69b;
}|code-block|syntax|javascript|1386661|并将您想要调整的所有元素的id设置为以colvar-开头的名称，例如colvar-header。然后，当您更改颜色时，所有ID样式都会更新。这就是你仅用CSS就能得到的最接近的结果。|style|CODE|1386662|entityMap|0|LINK|mutability|MUTABLE|url|http://lesscss.org/#usage|1|http://lesscss.org/|2|http://www.w3.org/TR/css3-selectors/#attribute-substrings^0|0|5|7|0|O|4|1|0|E|S|2|0|0|D|2|J|7|Y|D|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@]|9|@$D|14|E|15|1|16]|$D|17|E|18|1|19]]|A|$]]|$1|F|3|G|5|6|7|1A|8|@]|9|@$D|1B|E|1C|1|1D]]|A|$]]|$1|H|3|I|5|J|7|1E|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|1F|8|@$D|1G|E|1H|O|P]|$D|1I|E|1J|O|P]|$D|1K|E|1L|O|P]]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|1M|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]|Y|$5|T|U|V|A|$W|Z]]|10|$5|T|U|V|A|$W|11]]]]

It’s not possible with CSS alone.

You can do it with JavaScript and <a href="http://lesscss.org/" rel="nofollow">LESS</a> using <a href="http://lesscss.org/#usage" rel="nofollow">less.js</a>, which will render LESS variables into CSS live, but it’s for development only and adds too much overhead for real-life use.

The closest you can come with CSS is to use an <a href="http://www.w3.org/TR/css3-selectors/#attribute-substrings" rel="nofollow">attribute substring selector</a> like this:

<pre class="lang-css prettyprint-override"><code>[id*="colvar-"] {
 color: #f0c69b;
}
</code></pre>

and set the <code>id</code>s of all your elements that you want to be adjusted to names starting with <code>colvar-</code>, such as <code>colvar-header</code>. Then when you change the color, all the ID styles are updated. That’s as close as you can get with CSS alone.

blocks|key|1171368|text|如果将css文件编写为xsl模板，则可以从简单的xml文件中读取颜色值。然后使用xslt处理器创建css。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1171369|colors.xml：|1171370|<?xml+version="1.0"?>
<colors>
++++<background>#ccc</background>
</colors>|code-block|syntax|javascript|1171371|styles.xsl：|1171372|<?xml+version="1.0"?>
<xsl:stylesheet+version="1.0"+xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
++++<xsl:output+method="text"+version="1.0"+encoding="iso-8859-1"/>
++++<xsl:template+match="/">body+{
++++background-color:+<xsl:value-of+select="/colors/background"+/>;
}
</xsl:template>
</xsl:stylesheet>|1171373|渲染css的命令：xsltproc+-o+styles.css+styles.xsl+colors.xml|offset|length|style|CODE|1171374|styles.css：|1171375|body+{
++++background-color:+#ccc;
}|1171376|entityMap^0|0|0|0|0|0|9|18|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|13|8|@$O|14|P|15|Q|R]]|9|@]|A|$]]|$1|S|3|T|5|6|7|16|8|@]|9|@]|A|$]]|$1|U|3|V|5|F|7|17|8|@]|9|@]|A|$G|H]]|$1|W|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|X|$]]

If you write the css file as an xsl template, you could read color values from a simple xml file. Then create the css with an xslt processor.

colors.xml:

<pre><code>&lt;?xml version="1.0"?&gt;
&lt;colors&gt;
 &lt;background&gt;#ccc&lt;/background&gt;
&lt;/colors&gt;
</code></pre>

styles.xsl:

<pre><code>&lt;?xml version="1.0"?&gt;
&lt;xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"&gt;
 &lt;xsl:output method="text" version="1.0" encoding="iso-8859-1"/&gt;
 &lt;xsl:template match="/"&gt;body {
 background-color: &lt;xsl:value-of select="/colors/background" /&gt;;
}
&lt;/xsl:template&gt;
&lt;/xsl:stylesheet&gt;
</code></pre>

Command to render css: <code>xsltproc -o styles.css styles.xsl colors.xml</code>

styles.css:

<pre><code>body {
 background-color: #ccc;
}
</code></pre>

blocks|key|1386736|text|在某种程度上，多亏了多个类的奇妙世界，当然可以做到这一点：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1386737|.red+{color:red}
.blackBack+{background-color:+black}|code-block|syntax|javascript|1386738|但我经常会像这样将它们组合在一起：|1386739|.highlight+{color:red,+background-color:+black}|1386740|我知道语义警察会一直盯着你，但它很管用。|1386741|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Sure can, sort of, thanks to the wonderful world of multiple classes, can do this:

<pre><code>.red {color:red}
.blackBack {background-color: black}
</code></pre>

but I often end up combining them anyway like this:

<pre><code>.highlight {color:red, background-color: black}
</code></pre>

I know the semantic police will be all over you, but it works.

I’m working on a CSS file that is quite long. I know that the client could ask for changes to the color scheme, and was wondering: is it possible to assign colors to variables, so that I can just change a variable to have the new color applied to all elements that use it?

Please note that I can’t use PHP to dynamically change the CSS file.

How can I define colors as variables in CSS?

JSON

我正在处理一个很长的CSS文件。我知道客户可能会要求更改配色方案，并想知道:是否可以将颜色分配给变量，这样我就可以只更改一个变量，使新颜色应用于使用它的所有元素？请注意，我不能使用PHP来动态更改CSS文件。

问如何在CSS中将颜色定义为变量？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在CSS中将颜色定义为变量？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在CSS中将颜色定义为变量？
EN