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

Question

我有一个问题。因此，在混合中，我引用了父选择器“&”。只要 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

这在 mixin 调用嵌套时效果很好，但在不嵌套时不会解析 '&'

 =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 中覆盖所有基吗？

Answer 1

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

http://sass-lang.com/documentation/file.SASS_REFERENCE.html#parent-script

Answer 2

您正在尝试一个错误的解决方案来解决您的问题。

看看这个问题是如何在强大的 SASS 框架中解决的。让我们以Eric Meyer 的Susy 为例。

假设您有以下 HTML：

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

当你第一次调用 mixin 时，你只是在做它（代码是缩进的 .sass 语法）：

$total-columns: 8 // Declaring a varible that will be used by the mixin

.parent
  +span-columns(4) // Span four of eight columns

但是当你为一个子元素调用它时，比例会是歪的，因为父元素已经成比例了：

.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 上的available。

简而言之，它会创建一个像这样的可选参数（代码采用类似 CSS 的 .scss 语法）：

@mixin span-columns(
  $columns,
  $context: $total-columns
  //...
) {
  //...
  width: columns($cols, $context /*...*/);
  //...
}

看看$context 是如何有默认值的？由于默认值，可以省略此参数。换句话说，$context 是一个可选参数。

调用此 mixin 时，如果未提供 $context（例如 span-columns(2)），则将其设置为等于 $total-columns。 $total-columns 变量应该在第一次调用 mixin 之前设置（见我上面的例子）。

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

更新 2013-03-30

我不是想弄清楚关于列的事情...我修改了我的问题以使其更清楚。

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

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

嗯，一些不同类型的媒体查询可以在 CSS3 中组合：e。 G。 print 和宽度。但是你不能在max-width: 600px 里面放一个min-width: 601px，这是行不通的！

在 StackOverflow 上有一个广泛的答案，描述了为什么不应该嵌套相同类型的媒体查询：https://stackoverflow.com/a/11747166/901944

第三，您正在尝试发明轮子。已经有一个用于处理媒体查询的出色 mixin：Respond To by Snugug。它非常易于使用且非常有效。

第四，XY。与其问你歪曲的 mixin，不如描述你试图用它解决的问题！向我们展示实际的 HTML 并说明您想要实现的行为。

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