父选择器

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

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;
    }