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

注：伪元素和伪选择是不是一个元素的孩子，但都连接因此没有父母本身。我认为父母意味着萨斯嵌套意义上的父母。