父选择器

使用引用父选择器 &，运算符表示嵌套规则的父选择器，最常用于将修改类或伪类应用于现有选择器时。

    a {
      background: green;
      // 如果没有&,将生成一个：hover规则（与<a>标记内的悬停元素匹配的子代选择器）
      &:hover {
        background: red;
      }
    }

父选择器操作符有多种用途，基本上，在任何时候，我们都需要以默认值以外的其他方式组合嵌套规则的选择器。例如，&的另一个典型用法是生成重复的类名。

Multiple &

& 可能在选择器中出现多次，这表示我们可以重复引用父选择器而不用重复其名称，& 表示所有父选择器（而不仅仅是最近的祖先）。

    .multiple  {
      & + & {
        background: green;
      }
      & & {
        background: red;
      }
      && {
        background: blue;
      }
      &, &ish {
        background: yellow;
      }
    }
    
    // 输出
    .multiple + .multiple {
      background: green;
    }
    .multiple .multiple {
      background: red;
    }
    .multiple.multiple {
      background: blue;
    }
    .multiple, .multiple {
      background: yellow;
    }

更多选择器顺序

将选择器前置到继承的（父）选择器可能很有用，可以通过放置&after当前选择器来完成。例如，在使用modernizer时，可能需要根据支持的功能指定不同的规则。

    .header {
      .menu {
        border-radius: 3px;
        .more & {
          color: green;
        }
      }
    }
    
    // 选择器.more & 将 .more 在它父项 .header .menu 前面加上.more 以形成输出时的 .header .menu
    .header .menu {
      border-radius: 3px;
    }
    .more .header .menu {
      color: green;
    }

排列组合

& 也可用于在逗号分隔的列表中生成选择器的每个可能排列。

    // 5 * 5的组合（25）
    ul, li, p, a, span {
      border-radius: 3px;
      & + & {
        border--top-left-radius: 0;
      }
    }
    
    // 输出
    ul,li,p,a,span{
      border-radius: 3px;
    }
    ul + ul, ul + li, ul + p, ul + a, ul + span,
    li + ul, li + li, li + p, li + a, li + span,
    p + ul, p + li, p + p, p + a, p + span,
    a + ul, a + li, a + p, a + a, a + span,
    span + ul, span + li, span + p, span + a, span + span{
        border--top-left-radius: 0;
    }