样式规则

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

  SCSS

  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

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

  SCSS

  Sass

  CSS

      
      Playground
    SCSS Syntaxnav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

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

      
      Playground
    Sass Syntaxnav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

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


CSS Outputnav 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 所需的带宽就越多，浏览器渲染所需的工作也就越多。保持选择器层次浅！

选择器列表选择器列表 permalink

嵌套规则对处理选择器列表（即逗号分隔的选择器）很聪明。每个复杂选择器（逗号之间的选择器）都单独嵌套，然后再组合回选择器列表。

  SCSS

  Sass

  CSS

      
      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

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

  SCSS

  Sass

  CSS

      
      Playground
    SCSS Syntaxul > {
  li {
    list-style-type: none;
  }
}

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

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

      
      Playground
    Sass Syntaxul >
  li
    list-style-type: none



h2
  + p
    border-top: 1px solid gray



p
  ~
    span
      opacity: 0.8



CSS Outputul > li {
  list-style-type: none;
}

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

p ~ span {
  opacity: 0.8;
}

高级嵌套高级嵌套 permalink

如果你想对嵌套的样式规则做更多操作，不仅仅是按顺序组合它们并用后代组合器（即普通空格）分隔，Sass 已经为你准备好了。更多详情请参见父选择器文档。

插值插值 permalink

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

  SCSS

  Sass

  CSS

      
      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 仅在插值解析之后解析选择器。这意味着你可以安全地使用插值来生成选择器的任何部分，而不必担心它无法解析。

你可以将插值与父选择器 &、@at-root 规则和选择器函数结合起来，在动态生成选择器时发挥强大的功能。更多信息请参见父选择器文档。