我的许多css文件(包括bootstrap)都使用指定的颜色.我希望能够在一个中心位置更改主要颜色(例如我正在添加的配置页面).
我已经看到css var可能很快就会成为一件事,但目前还没有得到很好的支持.
有没有更优雅的方式,我可以这样做,我目前的想法使用css文件作为模板,我将加载页面加载的颜色配置?
最佳答案 您可以使用
LESS而不是CSS来获得变量和更多优势.
如果你将LESS与分离到不同CSS文件的主题结合使用(如@Thorarins建议的那样),你将获得更强大和可维护性.
较少的功能:
1)变量
LESS
@link-color: #CC0000;
a {
color: @link-color;
}
“编译”到
CSS
a {
color: #CC0000;
}
2)嵌套
LESS
.article {
a {
text-decoration: underline;
}
p {
margin: .5ex .5em;
}
}
“编译”到
CSS
.article a {
text-decoration: underline;
}
.article p {
margin: .5ex .5em;
}
3)Mixins
LESS
.box-shadow(@style, @color)
{
-webkit-box-shadow: @style @color;
box-shadow: @style @color;
}
div
{
.box-shadow(0 0 5px, 30%);
}
“编译”到
CSS
div {
-webkit-box-shadow: 0 0 5px 30%;
box-shadow: 0 0 5px 30%;
}
4)功能
LESS
@text-color: #000;
.article {
p {
color: lighten(@text-color);
}
}
“编译”到
CSS
.article p {
color: #4d4d4d;
}