样式规则

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

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

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

嵌套固定链接嵌套

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

SCSS
Sass
css
SCSS  语法nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

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

  li
    display: inline-block

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


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

Head️抬头！

嵌套规则非常有用，但是它们也可能使您很难直观地看到实际生成的CSS数量。嵌套的深度越深，服务CSS所需的带宽就越多，浏览器呈现它所需的工作也就越多。让选择器变浅！

选择器列表永久链接选择器列表

嵌套规则非常适合处理选择器列表（即，逗号分隔的选择器）。每个复杂的选择器（逗号之间的选择器）分别嵌套，然后将它们组合回到选择器列表中。

SCSS
Sass
css
SCSS  语法.alert, .warning {
  ul, p {
    margin-right: 0;
    margin-left: 0;
    padding-bottom: 0;
  }
}
Sass语法.alert, .warning
  ul, p
    margin-right: 0
    margin-left: 0
    padding-bottom: 0


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

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

您还可以嵌套使用组合器的选择器。您可以将组合器放在外部选择器的末尾，内部选择器的开始，甚至可以全部放在两者之间。

SCSS
Sass
css
SCSS  语法ul > {
  li {
    list-style-type: none;
  }
}

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

p {
  ~ {
    span {
      opacity: 0.8;
    }
  }
}
Sass语法ul >
  li
    list-style-type: none



h2
  + p
    border-top: 1px solid gray



p
  ~
    span
      opacity: 0.8



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

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

p ~ span {
  opacity: 0.8;
}

高级嵌套永久链接高级嵌套

如果您想对嵌套样式规则做更多的事情，而不仅仅是将它们按顺序与分隔它们的后代组合器（即纯净空间）组合在一起，那么Sass会为您服务。有关更多详细信息，请参见父选择器文档。

插值固定链接插值

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

SCSS
Sass
css
SCSS  语法@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语法@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  输出@charset "UTF-8";
span.emoji-women-holding-hands {
  font-family: IconFont;
  font-variant: normal;
  font-weight: normal;
  content: "????";
}

???? 有趣的事实：

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

您可以将插值与父选择器&，@at-rootrule和选择器功能结合使用，以在动态生成选择器时发挥重要作用。有关更多信息，请参见父选择器文档。