如何从代码隐藏更改我的 css 文件中使用的颜色？

【问题标题】：How can I change the color used in my css files from codebehind?如何从代码隐藏更改我的 css 文件中使用的颜色？
【发布时间】：2015-07-07 08:32:45
【问题描述】：

我的许多css 文件（包括引导程序）都使用指定的颜色。我希望能够在一个中心位置更改主要颜色（例如我正在添加的配置页面）。

我已经看到css var 可能很快就会出现，但目前还没有得到很好的支持。

有没有更优雅的方法可以做到这一点，我目前的想法是使用css 文件作为模板，我将在页面加载时加载颜色配置？

【问题讨论】：

【解决方案1】：

您可以使用 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) 混合

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;
}

【讨论】：