父選擇器

使用引用父選擇器 &，運算符表示嵌套規則的父選擇器，最經常使用於將修改類或僞類應用於現有選擇器時。

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