任何css
规则都可以继承其他规则,几乎任何css
规则也都可以被继承。大多数情况你可能只想对类使用继承,但是有些场合你可能想做得更多。最常用的一种高级用法是继承一个html
元素的样式。尽管默认的浏览器样式不会被继承,因为它们不属于样式表中的样式,但是你对html
元素添加的所有样式都会被继承。
接下来的这段代码定义了一个名为disabled
的类,样式修饰使它看上去像一个灰掉的超链接。通过继承a这一超链接元素来实现:
.disabled {
color: gray;
@extend a;
}
假如一条样式规则继承了一个复杂的选择器,那么它只会继承这个复杂选择器命中的元素所应用的样式。举例来说, 如果.seriousError
@extend
.important.error
, 那么.important.error
和h1.important.error
的样式都会被.seriousError
继承, 但是.important
或者.error下
的样式则不会被继承。这种情况下你很可能希望.seriousError
能够分别继承.important
或者.error
下的样式。
如果一个选择器序列(#main .seriousError
)@extend
另一个选择器(.error
),那么只有完全命中#main .seriousError
这个选择器的元素才会继承.error
的样式,就像单个类名继承那样。拥有class="seriousError"
的.main
元素之外的元素不会受到影响。
像#main .error
这种选择器序列是不能被继承的。这是因为从#main .error
中继承的样式一般情况下会跟直接从.error
中继承的样式基本一致,细微的区别往往使人迷惑。
现在你已经了解了通过继承能够做些什么事情,接下来我们将学习继承的工作细节,在生成对应css
的时候,sass
具体干了些什么事情。
Mixins允许创建一组可以在整个样式表中重复使用的样式,而不需要重新创建非语义类。在CSS中,mixin可以存储多个值或参数和调用函...
描述通过仅给出引用,规则集不访问任何新的范围。例子下面的例子演示使用给引用将不会修改LESS文件中的分离规则集范围:passing_...
描述Screen功能使用两种颜色作为参数,并输出较亮的颜色。参数: color1:颜色对象。 color2:颜色对象。返回:颜色。例子下面的...
描述它动态构建选择器,并使用属性或变量值作为任意字符串。例子下面的例子演示了在Less文件中使用转义:htmlhead titleLess Esca...
CSS3多列布局允许我们轻松创建多列。以下三个属性用于在CSS3中配置列布局。column-countcolumn-gapcolumn-rule设置列计数!DOCTYP...