从SASS mixin中访问父选择器 [英] Access the parent selector from within a SASS mixin

问题描述

我使用display：inline-block设置了一个按钮的mixin。我试图得到任何类的父，最终将最终使用mixim，所以我可以添加font-size：0px行，以确保我不需要对我的HTML进行调整，以避免不必要的

I have set up a mixin for a button using display:inline-block. I am trying to get to the parent of whatever class that will eventually end up using the mixim, so I can add the font-size: 0px line there to make sure that I don't need to make adjustments to my HTML to avoid unwanted space between each button.

这是一个例子...我想要的。父类接受font-size：0px行。

Here's an example... I want the. parent class to receive the font-size: 0px line.

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

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

推荐答案

否， 这不可能。您可以这样做：

No, this is not possible. You could do something like this, though:

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

这篇关于从SASS mixin中访问父选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！