综述

样式规则是Sass的基石,就像CSS一样。它们的工作方式是相同的:您使用选择器选择要对哪些元素进行样式设置,并声明影响这些元素外观的属性

嵌套

Sass将自动组合外部规则的选择器和内部规则的选择器,这样可以避免您重复书写相同的选择器。

嵌套规则非常有用,但也是您很难直观的知道会生成多少CSS。嵌套越深,生成的CSS代码就会越多,消耗的服务器带宽、浏览器渲染的工作也越多。注意控制嵌套的深度!

选择器列表

嵌套规则在处理选择器列表(即逗号分隔的选择器)方面很聪明。每个复杂选择器(逗号之间的选择器)都是单独嵌套的,然后将它们组合回选择器列表中。

组合选择器

您也可以嵌套使用组合选择器。您可以将组合子(+,~,>,空格)放在外部选择器的末尾,内部选择器的开头,甚至全部放在两者之间。

高级嵌套规则

如果您有更复杂的嵌套需求,而不仅仅是按照子组合符(即纯空格)的顺序组合它们,那么Sass是您的后盾。有关详细信息,请参阅父选择器文档

插值

可以使用插值将变量和函数调用等表达式中的值注入选择器。这在编写mixin时特别有用,因为它允许您根据用户传入的参数创建选择器。

Sass只在插值解析后解析选择器。这意味着您可以安全地使用插值函数生成选择器的任何部分,而不必担心它不会解析。

您可以将插值与父选择器&@at-root规则选择器函数组合使用,以便在动态生成选择器时使用一些强大的功能。有关更多信息,请参见父选择器文档

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