检查SASS父选择器是否存在。可能吗

我有个问题。因此，在混合中，我引用了父选择器“&”。只要mixin没有嵌套，这就可以工作。有没有办法检测混合是否在非嵌套场景中使用，或者检查“&”是否为空

当mixin调用未嵌套时，此操作有效

=myresponsiveMixin($media)
  @if $media == small {
    @media only screen and (max-width: $break-small)
       @content
  @else if $media == medium
    @media only screen and (min-width: $break-small + 1) and (max-width: $break-large - 1)
       @content

 =myresponsiveMixin($media)
      @if $media == small {
        @media only screen and (max-width: $break-small)
           .classInHTMLToAllowMediaQueries &
               @content
      @else if $media == medium
        @media only screen and (min-width: $break-small + 1) and (max-width: $break-large - 1)
           .classInHTMLToAllowMediaQueries &
               @content

这在mixin调用嵌套时非常有效，但在未嵌套时不会解析“&”

=myresponsiveMixin($media)
  @if $media == small {
    @media only screen and (max-width: $break-small)
       @content
  @else if $media == medium
    @media only screen and (min-width: $break-small + 1) and (max-width: $break-large - 1)
       @content

 =myresponsiveMixin($media)
      @if $media == small {
        @media only screen and (max-width: $break-small)
           .classInHTMLToAllowMediaQueries &
               @content
      @else if $media == medium
        @media only screen and (min-width: $break-small + 1) and (max-width: $break-large - 1)
           .classInHTMLToAllowMediaQueries &
               @content

---

所以问题是，是否有一种方法可以检查父选择器“&”的值，这样我就可以在一个mixin中覆盖所有的基

您尝试了一个错误的解决方案来解决您的问题

看看这个问题是如何在强大的SASS框架中解决的。让我们举一个很好的例子

让我们假设您拥有以下HTML：

<div class="container">
  <div class="parent">
    <div class="child">
      Bla bla
    </div>
  </div>
</div>

但是，当您为子元素调用该函数时，比例将是扭曲的，因为父元素已成比例：

.child
  +span-columns(2) // This will fail. You want 2 of 8 columns,
                   // but due to nesting the math is crooked.
                   // It will be "2 of (4 of 8)".

为了解决这个问题，您提供了一个可选参数：用于计算的上下文：

.child
  +span-columns(2, 4) // Now the mixin will take 2 parts of 4
                      // instead of 2 parts of four

此mixin的源代码位于GitHub上

简而言之，它创建了如下可选参数（代码采用类似CSS的.scss语法）：

查看

$context

如何具有默认值？由于默认值，此参数可以省略。换句话说，

$context

是一个可选参数

调用此mixin时，如果未提供

$context

（例如

span columns（2）

），则将其设置为等于

$total columns

。在第一次调用mixin之前，应该设置

$total columns

变量（参见上面的示例）

然后使用这两个参数来计算宽度

UPD 2013-03-30

---

我不是想弄清楚关于专栏的事情。。。我已经修改了我的问题，让它更清楚

首先，我的建议不仅涉及网格列。这是一种你可以采用的通用技术

其次，现在我看到您正在尝试嵌套媒体查询

好的，一些不同类型的媒体查询可以组合在CSS3:e中。g<代码>打印和宽度。但是你不能把

最小宽度：601px

放在

最大宽度：600px

里面，这就是行不通

关于StackOverflow，这里有一个广泛的答案，描述了为什么不应嵌套相同类型的媒体查询：

第三，你在试图发明轮子。现在已经有了一个处理媒体查询的绝佳组合：by。它非常容易使用，非常有效

第四，这件事。与其问你的曲解混音，不如描述一下你试图用它来解决的问题！向我们展示实际的HTML，并解释您希望实现的行为

我们将向您展示，它可以通过一个简单、优雅、语义解决方案来解决，而不需要SASS黑客攻击

@mixin does-parent-exist {
  @if & {
    .exists & {
      color: red;
    }
  } @else {
    .doesnt-exist {
      color: red;
    }
  }
}

---

你能举个具体的例子吗？您可能有一个.I希望能够将mixin与父类一起使用。例如

=responsiveMixin.responsive&Do responsive stuff

只要在嵌套时调用mixin，上述mixin就可以工作。但我希望它即使不嵌套也能使用。例如，请编辑您的初始问题并提供代码。我不想找出与列有关的内容。。。为了让问题更清楚，我已经修改了我的问题。我上面的媒体混合和回复完全一样。它只是scss格式。但在这种情况下，两者都不能解决我的问题。如果读取上面的媒体查询，则输出相同，并且没有媒体查询嵌套。输出与respond to的输出完全相同，因为它在SASS语法中是相同的。现在，第二个媒体查询允许我在类

运行时忽略媒体查询。classInHTMLToAllowMediaQueries

无法启动。允许我在某些部分禁用响应。问题是它使用父选择器。哦，现在我明白你的意思了。请告诉我为什么要使用类来启用媒体查询？我想在这里说一下，因为我遇到了一个类似的问题：我相信

.classInHTMLToAllowMediaQueries

实际上是一个在不支持媒体查询时添加的类（通过JavaScript、UA嗅探（邪恶）或IE条件注释）。因此IE8可能会得到桌面版本，然后它将是一个支持无媒体查询设计的类。