3

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

4

2 回答 2

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

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

于 2015-03-12T23:09:56.617 回答
0

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

看看如何在强大的 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 上找到。

简而言之，它创建了一个像这样的可选参数（代码采用类似 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 中组合：例如print和宽度。但是你不能把一个min-width: 601pxinside max-width: 600px，这行不通！

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

第三，你试图发明轮子。已经有一个用于处理媒体查询的出色 mixin：由Snugug响应。它非常易于使用且非常有效。

第四，XY的事情。不要询问您的歪曲混入，请描述您试图用它解决的问题！向我们展示实际的 HTML 并解释您想要实现的行为。

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

于 2013-03-28T17:06:42.530 回答