Question

可能重复：
Avoiding repeated constants in CSS

我想在类中包含一个类 - 有点像变量类 - 这样我就可以定义一次并在整个工作表中使用它。如果我改变颜色，它会改变一切。

.myFontColor{color:blue;}
.myTitle{font-size:large; myFontColor}
.myHeader{font-weight:bold; myFontColor}

我认为这样做的唯一方法是。要在定义中包含每个类名，但是如果我在表中有20或30个项目引用该颜色，那么它会变得非常快。

.myFontColor, .myTitle, .myHeader{color:blue;}
.myTitle{font-size:large;}
.myHeader{font-weight:bold;}

或者在创建元素时列出每个类，这也有点混乱。

<div class="myFontColor myTitle myHeader">

感谢您的帮助。

Answer 1

我能想到的唯一方法是使用javascript动态分配属性。例如，列出要配置的所有属性（例如color, font-size, font-weight）以及要配置的所有类的列表（例如.myHeader，myTitle等）。然后做这样的事情：

for (x=0; x< cssClasses.length; x++)
{
  addAttribs(cssClasses[x]);
}

function addAttribs(class)
{
   $("." + class).css("color","#444");
   $("." + class).css("font-weight","bold");
   //And so on..
}

这可能是您可以获得的最接近的，并且它将具有存储在一个函数中的所有属性的优势，因此如果您更改它，那么它将在其他任何地方更新。

编辑：顺便说一句，我在addAttribs()函数中使用Jquery来轻松访问和设置css属性。

Answer 2

定义元素时可以编写几个类：

<div class="blue w210pt">
</div>
<p class="green w210pt">
</p>

<style>
.green{color:green;}
.blue{color:blue;}
.w210pt{width:210px;}
</style>

Answer 3

正如您所怀疑的那样，您不能以直接的方式完成您所描述的内容 - 您需要使用CSS的级联方面来获得您想要的内容。但是，我认为你可能在某种程度上滥用了CSS。您应该定义语义，然后将表示连接到这些语义。例如，看到像.myFontColor这样的类将是一个很大的暗示，你并没有真正使用类来表示语义（尽管我认识到这可能是简化的例子）。

Answer 4

您还可以使用像php这样的服务器端解决方案（或您有权访问的任何其他解决方案）。

使用php，您可以将样式表保存为php文件，每次请求时都会“执行”。您可以将所有变量放在最前面，并在需要的地方回显它们。

浏览器会看到一个正常的样式表，但服务器还有一些额外的工作要做。它并没有真正提高样式表的可读性......

不是一个非常优雅的解决方案，但它确实有效。

Answer 5

目前，CSS中无法使用变量（如您所需）。您必须像使用的那样使用Cascade，并在定义中包含所有类。

Answer 6

你可能想看看Sass，Rails社区中的一些东西会让你使用稍微不同的语法，但允许这样的智能。如果你没有做Ruby / Rails的事情，你仍然可以使用Sass作为命令行预处理器将你的Sass文件转换为CSS。

Answer 7

不重复声明的最简单的解决方案是组合几个类，如您所知。

也许您正在寻找css variables？

Answer 8

一种解决方案是使用PHP样式表：

<?
header('Content-type: text/css');

$color1 = '#123456';

echo <<<EOS

.myTitle {color: $color1}

EOS;
?>

是否可以改变CSS类？

8 个答案: