Question

我有一个问题。所以在混音中我正在引用父选择器“＆amp;”。只要mixin没有嵌套，这就可以工作。有没有办法检测混合是否在非嵌套场景中使用，或检查是否“＆amp;”是空的吗？

当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调用嵌套时，这很有用，但无法解析'＆amp;'什么时候没有嵌套

 =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

所以问题是，如果有办法能够检查父选择器“＆amp;”的值，那么我可以覆盖单个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框架中如何解决此问题。我们以Susy为Eric Meyer作为一个很好的例子。

让我们假设你有以下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之前设置（参见上面的示例）。

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

UPD 2013-03-30

我并不想弄清楚有关栏目的事情......我有一个修饰语我的问题，以使其更清晰。

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

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

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

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

第三，你正试图发明轮子。已经有一个非常棒的混合用于处理媒体查询：Respond To Snugug。它非常易于使用且非常有效。

第四次，XY。而不是询问你的弯曲混合，请描述你试图用它来解决的问题！向我们展示实际的HTML并解释您希望实现的行为。

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

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

2 个答案:

UPD 2013-03-30