扩展与继承

这是Sass最有用的特性之一。使用@extend可以让您从一个选择器到另一个选择器共享一组CSS属性。它有助于Sass保持DRY(Don't Repeat Yourself)。在我们的示例中,我们将创建message\errors\warnings\successes 继承自同一占位符类。占位符类是一种特殊类型的类,它只在被继承使用时才会被编译到css,这样可以保持编译后的CSS整洁。

上面的代码告诉.message、.success、.error.warning的行为类似于%message-shared。这意味着在出现%message-shared的任何地方,.message、.success、.error.warning也会出现。神奇的事情发生在生成的CSS中,其中每个类都将获得与%message-shared相同的CSS属性。这有助于避免在HTML元素上编写多个类名。

除了Sass中的占位符类之外,您还可以扩展大多数简单的CSS选择器,但使用占位符是确保不需要扩展的类出现在css的最简便的方法,可以避免CSS中出现意外的选择器。

%equal-heights在CSS中不会被编译,因为%equal-heights没有被继承过。

上次更新: 2019-11-5 4:49:11 PM