如何在样式表中重用颜色？

Question

我有一个样式表和许多具有相同边框颜色的样式(#CCCCCC确切地说).

有没有办法指定某种变量并重用它,所以#CCCCCC我可以输入:而不是反复输入,

border: 1px solid $bordercolor;

PS我正在使用ASP.NET MVC.

Answer 1

.classA, .classB, .classC {
   border-color: #CCC;
}

.classA {
   border-width: 1px;
   border-style: solid;
}

...

但是你不能再使用简写语法来定义边框了.

Answer 2

元素可以分配多个类.因此,您可以创建一个定义边框颜色的样式,并将其与其他类一起用于其他属性:

.bordercolor { border-color:#CCCCCC; }

<div class="bordercolor otherstyle">

Answer 3

不是我知道的,但你可以从.NET页面生成CSS.

然后用它来调用它

StyleSheet.aspx看起来像

<%@ Page Language="C#" %> 
H1 
{ 
  background-color:<%= MyColourVariable %>; 
}

编辑:但是,今天我建议使用LESS或SASS

Answer 4

您还可以使用"更高级别"的CSS.Sass和Less都提供变量.它们通过使用CSS的超集语言编写,然后在测试/部署时将其编译为CSS.两者都有RoR的钩子,可能有一个用于asp.net.

Answer 5

你无法在CSS中真正定义变量,但是你可以通过几种方式来做你想做的事情.首先,您可以将多个类应用于元素,并在其自己的类中保留颜色.

.myBorderColor { border-color: #000000; }
.myOtherClass { font-weight: bold; }

<div class="myBorderColor myOtherClass">content</div>

另一种方法是实际级联您的样式,因此应用了多个块.

div.a { font-weight: bold; }
div.b { color: #cccccc; }

div.a div.b { border-color: #000000; }

这样你仍然可以从一个地方控制你的颜色.