sass - SASS ミックスイン内から親セレクターにアクセスする

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

Sass 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 2

いいえ、これは不可能です。ただし、次のようなこともできます。

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