Lzh on GitHub

概览

样式规则是 Sass 的基础，就像它们是 CSS 的基础一样。它们的工作方式相同：你使用选择器选择要设置样式的元素，并 声明属性 来影响这些元素的外观。

样式规则是 Sass 的基础，就像它们是 CSS 的基础一样。它们的工作方式相同：你使用选择器选择要设置样式的元素，并 声明属性 来影响这些元素的外观。

.button {
  padding: 3px 10px;
  font-size: 12px;
  border-radius: 3px;
  border: 1px solid #e1e4e8;
}

嵌套

但 Sass 想要让你的生活更轻松。与其一遍又一遍地重复相同的选择器，不如将一个样式规则写在另一个里面。Sass 会自动将外部规则的选择器与内部规则的选择器组合在一起。

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}
嵌套规则非常有用，但它们也可能使你难以直观地了解你实际生成了多少 CSS。你嵌套得越深，服务你的 CSS 所需的带宽就越多，浏览器渲染它所需的工作就越多。请保持选择器的浅层嵌套！

选择器列表

嵌套规则在处理选择器列表（即，逗号分隔的选择器）时非常智能。每个复杂的选择器（逗号之间的那些）都被单独嵌套，然后它们被组合回一个选择器列表。

.alert, .warning {
  ul, p {
    margin-right: 0;
    margin-left: 0;
    padding-bottom: 0;
  }
}

选择器组合器

你也可以嵌套使用组合器的选择器。你可以将组合器放在外部选择器的末尾，内部选择器的开头，甚至可以单独放在两者之间。

ul > {
  li {
    list-style-type: none;
  }
}

h2 {
  + p {
    border-top: 1px solid gray;
  }
}

p {
  ~ {
    span {
      opacity: 0.8;
    }
  }
}

高级嵌套

如果你想对嵌套的样式规则做更多的事情，而不仅仅是按顺序用后代组合器（即，一个普通的空格）将它们组合起来，Sass 可以帮你。更多详细信息，请参阅父选择器文档。

插值

你可以使用 插值 将 表达式（如变量和函数调用）中的值注入到你的选择器中。这在你编写 混合宏 时特别有用，因为它允许你根据用户传入的参数来创建选择器。

@mixin define-emoji($name, $glyph) {
  span.emoji-#{$name} {
    font-family: IconFont;
    font-variant: normal;
    font-weight: normal;
    content: $glyph;
  }
}

@include define-emoji("women-holding-hands", "👭");
Sass 只在插值解析后才解析选择器。这意味着你可以安全地使用插值来生成选择器的任何部分，而不必担心它无法解析。

你可以将插值与父选择器 &、@at-root 规则和选择器函数结合使用，在动态生成选择器时发挥出强大的作用。有关更多信息，请参阅父选择器文档。