我们可以在另一个css类中包含常见的css类吗？

Question

我是CSS新手.我只是想知道,是否有可能将一个共同的类包含在另一个类中？

例如,

.center {align: center};
.content { include .center here};

我遇到了css框架 - 蓝图.我们需要将位置信息放入HTML中,例如

<div class="span-4"><div class="span-24 last">

因此,我们将定位属性放在html中,而不是css中.如果我们改变布局,我们需要更改html而不是css.

这就是我问这个问题的原因.如果我可以将.span-4包含在我自己的CSS中,我将不必在我的html标记中指定它.

Answer 1

奇怪的是,即使CSS谈论继承,类也不能以这种方式"继承".你真正做的最好的是:

.center, .content { align: center; }
.content { /* ... */ }

另外我强烈建议你不要这样做"裸"类选择器.尽可能使用和ID或标签和类:

div.center, div.content { align: center; }
div.content { /* ... */ }

我之所以这么说是因为如果你尽可能广泛地选择你的选择器,一旦你获得大型样式表,它最终会变得难以管理(根据我的经验).您最终会将非预期的选择器相互交互到您创建新类(如.center2)的位置,因为更改原始内容会影响您不想要的各种事物.

Answer 2

这就是层叠的层叠样式表也发挥了作用.

将您的html元素或窗口小部件/模块(嵌套的html元素组)视为对象.您知道您将拥有共享相同属性的对象,因此您需要创建可以使用的可重用类.

.baseModule {align: center;}

假设您的模块是一条消息(错误,闪烁...).因此,您"扩展"或"包含".baseModule类,因为所有消息都将居中对齐(请参阅最终的html示例).

.message {border: 1px solid #555;}

此外,您希望您的错误消息具有红色背景.此外,如果您希望它是不同的颜色或其他东西,您可以在此处覆盖.baseModule.message的border属性.

.error {background-color: red;}

所以现在你有一些可以轻松重用的css定义.

<!-- Regular message module -->
<p class="baseModule message">
    I am a regular message.
</p>

<!-- Error message module -->
<p class="baseModule message error">
    I am an error message. My background color is red.
</p>

要将此与您的问题联系起来,您基本上可以利用多个类名来获得最大的可重用性.当然,ie6不支持链式选择器(class1.class2.class3),但它仍然是一个巧妙的技巧!

Answer 3

在标准的CSS中,它不可能这样做,尽管它会很好.

对于类似的东西,你需要使用SASS或类似的,"编译"到CSS.