在 Sass SCSS 的嵌套选择器中将选择器列表与 & 结合使用答案

【问题标题】：Using a list of selectors in combination with & in a nested selector in Sass SCSS在 Sass SCSS 的嵌套选择器中将选择器列表与 & 结合使用
【发布时间】：2014-07-31 22:44:57
【问题描述】：

在我正在处理的 Sass 工作表中，我希望能够在变量中存储一些 body 类，并在嵌套在选择器内的选择器中使用它们以获取某些元素，如下所示：

$classes: ".bodyClass1, .bodyClass2";

.aClass, .anotherClass {
  /* some styles */
  #{$classes} & {
    /* Styles under $classes */
  }
  #{$classes} &:hover {
    /* Styles under $classes when hovering */
  }
}

我正在寻找的输出是：

.aClass, .anotherClass {
  /* some styles */
}
.bodyClass1 .aClass, .bodyClass2 .aClass, .bodyClass1 .anotherClass, .bodyClass2 .anotherClass {
  /* Styles under $classes */
}
.bodyClass1 .aClass:hover, .bodyClass2 .aClass:hover, .bodyClass1 .anotherClass:hover, .bodyClass2 .anotherClass:hover {
  /* Styles under $classes when hovering */
}

但它呈现为：

.aClass, .anotherClass {
  /* some styles */
}
.aClass .bodyClass1, .bodyClass2 .aClass, .anotherClass .bodyClass1, .bodyClass2 .anotherClass {
  /* Styles under $classes */
}
.aClass .bodyClass1, .bodyClass2 .aClass:hover, .anotherClass .bodyClass1, .bodyClass2 .anotherClass:hover {
  /* Styles under $classes when hovering */
}

我可以通过在 body 类之后创建单独的变量来解决此问题正在尝试使用它们。

编辑：

srekoble 使用循环的解决方案非常适合我！我将它改编成一个函数，如果其他人可能想要使用它：

$classes: ".bodyClass1", ".bodyClass2";

@function c($classes, $append: null){
  $processedClasses: "";

  $length: length($classes);

  @for $i from 1 through $length {
    @if $append {
      $processedClasses: #{$processedClasses}#{nth($classes, $i)} #{$append}#{", "};
    } @else {
      $processedClasses:  #{$processedClasses}#{nth($classes, $i)}#{", "};
    }
  }

  @return $processedClasses;
}

.aClass, .anotherClass {
  /* some styles */

  #{c($classes, "&")} {
    /* Styles under $classes */
  }
  #{c($classes, "&:hover")} {
    /* Styles under $classes when hovering */
  }
}

输出如下：

.aClass, .anotherClass {
  /* some styles */
}
.bodyClass1 .aClass, .bodyClass2 .aClass, .bodyClass1 .anotherClass, .bodyClass2 .anotherClass {
  /* Styles under $classes */
}
.bodyClass1 .aClass:hover, .bodyClass2 .aClass:hover, .bodyClass1 .anotherClass:hover, .bodyClass2 .anotherClass:hover {
  /* Styles under $classes when hovering */
}

【问题讨论】：

实际输出是……真的很奇怪。

标签： css sass css-selectors ampersand

【解决方案1】：

你可以试试这样的：

$classes: ".bodyClass1" , ".bodyClass2";

.aClass, .anotherClass {
  /* some styles */
  @for $i from 1 through 2 {
    #{nth($classes, $i)} & {
      /* Styles under $classes */
    }

    #{nth($classes, $i)} &:hover {
      /* Styles under $classes when hovering */
    }
  }
}

一个例子：http://sassmeister.com/gist/acb0096e9d35e1ae437d

【讨论】：

谢谢，for 循环完美地完成了这项工作！我还把它变成了一个函数，如果其他人觉得它很方便，就把它放在我的问题的正文中。

【解决方案2】：

这将是另一种在我看来更具可扩展性的方法。因为您不必在每次更新变量时都在 for 循环中编辑数字。

$classes: (bodyClass1, bodyClass2);

@each $class in $classes {
  .aClass, .anotherClass {
    // your styles
    .#{$class} & {
      // your styles
      &:hover { 
         // your styles
      }
    }
  }
}

在 SassMeister http://sassmeister.com/gist/6edf0319bd4d8462fa95

【讨论】：

清洁解决方案！ GJ，但是当我想在几个部分中添加几个类时，使用恕我直言有点困难。 @Coder 所做的函数解决方案可能更复杂，但对我来说更有用:)
我也喜欢@coder 使用的函数解决方案。只是想为可能会发现这个问题的每个人提供另一个 sn-p，因为 sass 是一个非常强大的预处理器。
我刚刚也尝试了您的建议 - 我真的很喜欢它，我也会以我的风格在某些地方使用它。