样式规则

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

Playground

SCSS Syntax

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

Sass Syntax

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

CSS Output

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

嵌套嵌套 permalink

¥Nesting

但 Sass 希望让你的生活更轻松。你可以将一种样式规则编写在另一种样式规则中，而不是一遍又一遍地重复相同的选择器。Sass 会自动将外部规则的选择器与内部规则的选择器组合起来。

¥But Sass wants to make your life easier. Rather than repeating the same selectors over and over again, you can write one style rules inside another. Sass will automatically combine the outer rule’s selector with the inner rule’s.

Playground

SCSS Syntax

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

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}
Playground

Sass Syntax

nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    padding: 6px 12px
    text-decoration: none

CSS Output

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

⚠️ Heads up!

嵌套规则非常有用，但它们也会让你很难直观地看到你实际生成了多少 CSS。嵌套得越深，为 CSS 提供服务所需的带宽就越多，浏览器渲染 CSS 所需的工作量也就越多。让这些选择器保持浅层！

¥Nested rules are super helpful, but they can also make it hard to visualize how much CSS you’re actually generating. The deeper you nest, the more bandwidth it takes to serve your CSS and the more work it takes the browser to render it. Keep those selectors shallow!

选择器列表选择器列表 permalink

¥Selector Lists

嵌套规则可以巧妙地处理选择器列表（即逗号分隔的选择器）。每个复杂的选择器（逗号之间的选择器）单独嵌套，然后将它们组合回选择器列表。

¥Nested rules are clever about handling selector lists (that is, comma-separated selectors). Each complex selector (the ones between the commas) is nested separately, and then they’re combined back into a selector list.

Playground

SCSS Syntax

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

Sass Syntax

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

CSS Output

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

选择器组合器选择器组合器 permalink

¥Selector Combinators

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

¥You can nest selectors that use combinators as well. You can put the combinator at the end of the outer selector, at the beginning of the inner selector, or even all on its own in between the two.

Playground

SCSS Syntax

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

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

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

Sass Syntax

ul >
  li
    list-style-type: none



h2
  + p
    border-top: 1px solid gray



p
  ~
    span
      opacity: 0.8

CSS Output

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

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

p ~ span {
  opacity: 0.8;
}

高级嵌套高级嵌套 permalink

¥Advanced Nesting

如果你想对嵌套样式规则进行更多操作，而不仅仅是按顺序将它们组合起来，并用后代组合器（即，一个简单的空格）将它们分开，那么 Sass 可以为你提供支持。有关详细信息，请参阅 父选择器文档。

¥If you want to do more with your nested style rules than just combine them in order with the descendant combinator (that is, a plain space) separating them, Sass has your back. See the parent selector documentation for more details.

插值插值 permalink

¥Interpolation

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

¥You can use interpolation to inject values from expressions like variables and function calls into your selectors. This is particularly useful when you’re writing mixins, since it allows you to create selectors from parameters your users pass in.

Playground

SCSS Syntax

@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", "👭");
Playground

Sass Syntax

@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", "👭")

CSS Output

@charset "UTF-8";
span.emoji-women-holding-hands {
  font-family: IconFont;
  font-variant: normal;
  font-weight: normal;
  content: "👭";
}

💡 Fun fact:

Sass 仅在解析插值后才解析选择器。这意味着你可以安全地使用插值来生成选择器的任何部分，而不必担心它无法解析。

¥Sass only parses selectors after interpolation is resolved. This means you can safely use interpolation to generate any part of the selector without worrying that it won’t parse.

你可以将插值与父选择器 &、@at-root 规则 和 选择器功能 结合起来，以便在动态生成选择器时发挥强大的作用。有关详细信息，请参阅 父选择器文档。

¥You can combine interpolation with the parent selector &, the @at-root rule, and selector functions to wield some serious power when dynamically generating selectors. For more information, see the parent selector documentation.