Question

我们可以使用＆号&来引用父选择器，但我们是否有引用父样式的解决方案？

我希望能够做到这样的事情：

@mixin copy {
    &-copy {
        @media (min-width: 300px) {
            @context; // directive doesn't exist but illustrates the point
        }
    }
}

.foo {
    font-size: 18px;
    color: red;

    @include copy;
}

并输出：

.foo {
    font-size: 18px;
    color: red;
}

@media (min-width: 300px) {
    .foo-copy {
        font-size: 18px;
        color: red;
    }
}

我可以到达一个非常接近的地方：

@mixin copy ($parent) {
    &-copy {
        @media (min-width: 300px) {
            @extend #{$parent};
        }
    }
 }

 .foo {
     font-size: 13px;
     color: red;

     @include copy(&);
 }

...但是因为Sass不允许我们@extend @media内的外部选择器无效。但是如果我没有使用媒体查询的话。

如果Sass无法做到，那么将来可能会添加它，或者另一个CSS预处理器可以做到吗？

Answer 1

是的，您可以使用＆符号，有关详细信息，请参阅http://thesassway.com/intermediate/referencing-parent-selectors-using-ampersand

Answer 2

你可能不会在@media中扩展外部选择器。你可能只同一指令中的@extend选择器。

所以延伸在@media中不起作用。（这是有道理的，因为扩展的作用只是将类添加到CSS中的其他类，例如：

.element, .the-extended-class {
  width: 200px;
  height: 200px;
  background: blue;
}

看看xD中的媒体查询应如何工作会很有趣。

无论如何，你要么直接写出那些CSS规则，要么就是我不能想到atm。

您通过mixin提到的嵌套在以笔形式尝试时效果很好：http://codepen.io/anon/pen/oLEROb

@mixin size() {
  background: blue;

  &-small {
    background: green;
    width: 100px;
  }
}

.element {
  width: 200px;
  height: 200px;
  @include size;
}

（我认为这不是你的问题，起初我以为是）

Answer 3

我不确定这是否是您想要的，但我发现解决方案可能对您有用：

<强> SASS

@mixin copy {
  @content;
  &-copy {
    @media (min-width: 300px) {
      @content;
    }
  }
}

.foo { 
  @include copy{
    font-size: 18px;
    color: red;
  }
}

<强>输出

.foo {
  font-size: 18px;
  color: red;
}
@media (min-width: 300px) {
  .foo-copy {
    font-size: 18px;
    color: red;
  }
}

Sass mixin引用父样式

3 个答案: