Question

我有一个样式表和很多具有相同边框颜色的样式（确切地说#CCCCCC）。

有没有办法指定某种变量并重用它，所以不要反复输入#CCCCCC，我可以输入：

border: 1px solid $bordercolor;

P.S。我正在使用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>

另一种选择是实际级联您的样式，因此应用了超过1个块。

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

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

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

Answer 6

我想你可能指的是CSS variables。不幸的是，他们得不到很好的支持。

Answer 7

您可以将CSS作为带有text / css类型的php文件提供。然后，您可以使用所需的所有PHP变量。这适用于每个浏览器。这是一个例子：

http://mailmarkup.org/mmlorg.php

Answer 8

许多人已经完成了HttpHandlers，它为CSS添加了变量支持。基本上，HttpHandler负责在客户端看到CSS之前用它们的值替换变量。例子包括：

这肯定会奏效。我没有在我的任何应用程序中尝试过，所以我不能谈论性能影响。

Answer 9

除了从.NET页面生成它之外，您还可以使用某种预处理器。有一些常用的用途，例如m4或CSS特定的，例如LESS。

Answer 10

我也在考虑T4模板。它只是我认为的Visual Studio，所以它不是最通用的方式，但我想我会分享它。

<#@ template inherits="Microsoft.VisualStudio.TextTemplating.VSHost.ModelingTextTransformation" language="C#v3.5" debug="true" hostSpecific="true" #>
<#@ output extension=".css" #>
<# string font = " font-family: Verdana, Helvetica;\n\tfont-size: 11px;";#>

body { 
    <#= font #>
}
table.Bid {
    background-color:red;
    <#= font #>
}

这会生成一个包含以下内容的test.css文件：

body { 
     font-family: Verdana, Helvetica;
    font-size: 11px;
}
table.Bid {
    background-color:red;
     font-family: Verdana, Helvetica;
    font-size: 11px;
}

Answer 11

您可以为父标记设置边框样式。例如，如果#content中的每个元素都使用此边框属性，则可以将所需的边框样式应用于#content本身。

Answer 12

扩展颜色内的样式定义

LE：参见KennyTM的样本

Answer 13

在Rails中，这对我很有用：

http://unixgods.org/~tilo/Ruby/Using_Variables_in_CSS_Files_with_Ruby_on_Rails.html

也许你可以为.NET框架编写类似的预处理器..？

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

13 个答案: