嵌套规则

Scss 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器。嵌套功能避免了重复输入父选择器，而且令复杂的 CSS 结构更易于管理

.container {
    width: 1200px;
    margin: 0 auto;

    .header {
        height: 100px;
        line-height: 2em;

        .logo {
            display: block;
            float: left;
            width: 100px;
            height: 100px;
        }
    }

    .footer {
        height: 300px;
        text-align: center;
        color: #fff;
        background-color: #000;
    }
}

编译后

.container {
  width: 1200px;
  margin: 0 auto;
}
.container .header {
  height: 100px;
  line-height: 2em;
}
.container .header .logo {
  display: block;
  float: left;
  width: 100px;
  height: 100px;
}
.container .footer {
  height: 300px;
  text-align: center;
  color: #fff;
  background-color: #000;
}

父选择器 &

在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器，例如，当给某个元素设定 hover 样式时，或者当 body 元素有某个 classname 时，可以用 & 代表嵌套规则外层的父选择器。编译后的 CSS 文件中 & 将被替换成嵌套外层的父选择器，如果含有多层嵌套，最外层的父选择器会一层一层向下传递。

.container {
    width: 1200px;
    margin: 0 auto;

    a {
        color: #333;

        &:hover {
            text-decoration: underline;
            color: red;
        }
        .main &{
            color: green;
        }
    }

    .top {
        border: 1px #ccc solid;

        &-left {
            float: left;
            width: 200px;
        }
    }
}

编译后

.container {
  width: 1200px;
  margin: 0 auto;
}
.container a {
  color: #333;
}
.container a:hover {
  text-decoration: underline;
  color: red;
}
.main .container a {
  color: green;
}
.container .top {
  border: 1px #ccc solid;
}
.container .top-left {
  float: left;
  width: 200px;
}

属性嵌套

有些 CSS 属性遵循相同的命名空间 (namespace)，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性，同时也为了避免了重复输入，Sass 允许将属性嵌套在命名空间中。

.container {
    color: #333;

    font: {
        size: 1em;
        family: sans-serif;
        weight: 500;
    }
    // 命名空间也可以包含自己的属性值
    margin: 24px {
        top: 30px;
    }
}

编译后

.container {
  color: #333;
  font-size: 1em;
  font-family: sans-serif;
  font-weight: 500;
  margin: 24px;
  margin-top: 30px;
}

占位符选择器 %foo

Sass 额外提供了一种特殊类型的选择器：占位符选择器 (placeholder selector)。与常用的 id 与 class 选择器写法相似，只是 # 或 . 替换成了 %。必须通过@extend指令调用，当占位符选择器单独使用时（未通过 @extend 调用），不会编译到 CSS 文件中。

// 形式一
%buttonStyle {
    width: 100px;
    height: 36px;
    display: inline-block;
}

.btn-default {
    @extend %buttonStyle;
    background-color: #333;
    color: #fff;
}

.btn-success {
    @extend %buttonStyle;
    background-color: #eee;
    color: green;
}
// 形式二
.card%cardStyle{
    padding: 20px;
    border-radius: 6px;
}

.main{
    @extend %cardStyle;
    background: #CCC;
}

// 形式三
.box %headerStyle{
    border: 1px solid #CCC;
}
.header{
    @extend %headerStyle;
}

编译后

.btn-success, .btn-default {
  width: 100px;
  height: 36px;
  display: inline-block;
}

.btn-default {
  background-color: #333;
  color: #fff;
}

.btn-success {
  background-color: #eee;
  color: green;
}

.card.main {
  padding: 20px;
  border-radius: 6px;
}

.main {
  background: #CCC;
}

.box .header {
  border: 1px solid #CCC;
}