從SASS中訪問父選擇器mixin

Question

我已經使用display：inline-block爲按鈕設置了一個mixin。我試圖去找最終使用mixim的任何類的父項，所以我可以在其中添加font-size：0px行，以確保我不需要對HTML進行調整以避免不必要的每個按鈕之間的空間。

下面是一個例子...我想要的。父類接收font-size：0px行。

@mixin button() { 
    display:inline-block; 
    font-size: 1em; 
    //other stuff to make a pretty button 
    && { font-size: 0px; } 
} 

.parent{ 
    .child { 
     @include button(); 
    } 
} 

Answer 1

不，這是不可能的。你可以做這樣的事情，雖然：

@mixin button($child: '.child') { 
    font-size: 0px; 
    //other stuff to make a pretty button 

    #{$child} { 
     display:inline-block; 
     font-size: 1em; 
    } 
} 

.parent{ 
    @include button(); 
} 

輸出：

.parent { 
    font-size: 0px; 
} 
.parent .child { 
    display: inline-block; 
    font-size: 1em; 
} 

Answer 2

有個XXX！ CSS 4規範草案中的選擇器，將按照您喜歡的方式進行操作。它宣佈CSS樣式聲明的主題，如果選擇匹配

所以，如果你有這樣的選擇

.a > .b! > .c 

它將匹配例如此

<div class="a"> 
    <div class="b"> 
     <div class="c"> 
     </div> 
    </div> 
</div> 

但樣式聲明將不會承擔.c影響，但對.b，因爲我用感嘆號宣佈，該元素應該是風格的主題 http://dev.w3.org/csswg/selectors4/#subject

你不能立即使用它。但有一個jQuery插件，這是一個polyfill的。 http://dev.w3.org/csswg/selectors4/

參見該堆棧：Is there a CSS parent selector?

如何申請？ 好了，我不知道到底在SASS，但在不到它會

*! > & { 
    /* ... */ 
} 

Answer 3

由於薩斯3.4的，這是現在可能。

@mixin parent { 

    @each $selector in & { 

    $l: length($selector); 

    @if ($l == 1) { 
     @error "Used parent mixin on a top-level selector"; 
    } @else { 

     $parent: nth($selector,1); 
     @for $i from 2 to $l { 
     $parent: append($parent,nth($selector,$i)); 
     } 

     @at-root #{$parent} { 
     @content; 
     } 

    } 
    } 
} 

// Use 
.grandparent { 
    .parent{ 
     .child { 
     font-size: 1em; 
      @include parent { 
      font-size: 0px; 
      } 
     } 
    } 
} 

// Result 
.grandparent .parent .child { 
    font-size: 1em; 
} 
.grandparent .parent { 
    font-size: 0px; 
} 

// Errors: 
.root { 
    @include parent { 
    content: "Won't work"; 
    } 
} 
.grandparent .parent, .root { 
    @include parent { 
    content: "Also won't work"; 
    } 
} 

Answer 4

儘管Karol的答案接近完美，但沒有考慮僞元素或僞選擇器。此外，如果使用多個complex selector，代碼將被複制。我想出了一個簡化版本：

@mixin parent { 
    $parents:(); 
    $parent: ''; 

    @each $selector in & { 
     $length: length($selector); 
     $index: 0; 
     $last-selector: nth($selector, $length); 

     @if ($length == 1) { 
      @error "Used parent mixin on a top-level selector"; 
     } @else { 
      $index: str-index($last-selector, '::'); 

      @if ($index) { 
       $last-selector: str-slice($last-selector, 1, $index - 1); 
      } @else { 
       $last-selector: null; 
      } 
      // Inspect allows us to combine two selectors in one block. 
      $parent: inspect(set-nth($selector, $length, #{$last-selector})); 
      $parents: join($parents, $parent, comma); 
     } 
    } 
    @at-root #{$parents} { 
     @content; 
    } 
} 

有一個第一循環遍歷selector list（選擇，並在最後逗號）。由於複雜選擇器也被視爲一個列表，我們只需要移除列表的最後一個元素。因爲我們只需要丟棄最後一個，所以沒有循環來遍歷複合或簡單的選擇器。

Sass沒有刪除列表元素的功能，但我們可以使用set-nth設置元素的值。通過將最後一個元素作爲空字符串並取消引用，我們可以從列表的打印表示（字符串）中刪除最後一個元素。由於選擇器可以是字符串，我們只需使用新字符串作爲選擇器。

當使用下列內容：

.grandmother, 
.grandfather { 
    .parent { 
     .child { 
     font-size: 10em; 
      @include parent { 
      font-size: 5em; 
      } 

      &::after { 
      font-size: 1px; 
      @include parent { 
       font-weight: bold; 
      } 
      } 
     } 
    } 
} 

我們得到如下：

.grandmother .parent .child, 
.grandfather .parent .child { 
    font-size: 10em; 
} 
.grandmother .parent, 
.grandfather .parent { 
    font-size: 5em; 
} 
.grandmother .parent .child::after, 
.grandfather .parent .child::after { 
    font-size: 1px; 
} 
.grandmother .parent .child, 
.grandfather .parent .child { 
    font-weight: bold; 
} 

注：僞元素和僞選擇是不是一個元素的孩子，但都連接因此沒有父母本身。我認爲父母意味着薩斯嵌套意義上的父母。