如何使用父选择器作为 Sass 的后缀

Question

我知道

.bg {
    &-orange { background-color: $orange; }
    &-yellow { background-color: $yellow; }
    &-blue { background-color: $blue; }
    &-green { background-color: $green; }
}

会变成

.bg-orange { background-color: $orange; }
.bg-yellow { background-color: $yellow; }
.bg-blue { background-color: $blue; }
.bg-green { background-color: $green; }

但是如果我想要最后的“bg”呢？

.orange-bg { background-color: $orange; }
.yellow-bg { background-color: $yellow; }
.blue-bg { background-color: $blue; }
.green-bg { background-color: $green; }

如何使用 SASS 完成此任务？有什么想法吗？

Answer 1

这就是 mixin 成为你朋友的地方：CodePen

@mixin sassyExample($color, $attrib) {
  #{'.' + $color + '-' + $attrib} {
   background-color: unquote($color); 
  }
}

@include sassyExample('orange', 'bg');
@include sassyExample('red', 'bg');
@include sassyExample('yellow', 'bg');

你可以更酷，映射和循环你的颜色来分配任何东西，或者添加一个参数来交换颜色/属性位置等，但这只是一个概念的快速证明。干杯:)

Answer 2

您可以在函数和 mixin 中使用 & 符号访问父选择器，而无需将其作为参数传递。

我可能会这样做(demo)：

@mixin pre($modifier) {
  $ampersand: & + '';

  $parents-list: simple-selectors(str-replace($ampersand, ' ', ''));

  $suffix: nth($parents-list, -1) + '';
  $suffix-type: str-slice($suffix, 1, 1);
  $suffix-name: str-slice($suffix, 2, -1);

  $ascendant-selectors: str-replace($ampersand, $suffix, '');
  $current-selector: '#{$suffix-type}#{$modifier}-#{$suffix-name}';

  @at-root {
     #{$ascendant-selectors}#{$current-selector} {
      @content;
    }
  }
}

要使其工作，您还需要一个字符串替换功能 (from Hugo Giraudel)：

@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);
  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }
  @return $string;
}

工作原理：

SCSS

.bg {
  color: red;

  @include pre(blue) {
    color: blue;
  }
}

输出

.bg {
  color: red;
}

.blue-bg {
  color: blue;
}

用例：

• .foo
• span.foo
• 跨度.foo
• .foo .bar
• .foo.bar

您也可以使用 ID。

Answer 3

更简单的解决方案

-bg {

    @at-root #{selector-append(".orange", &)} {
        color:orange;
    }// Here's the solution:
    @at-root #{selector-append(".yellow", &)} {
        color:yellow;
    }// Here's the solution:
    @at-root #{selector-append(".blue", &)} {
        color:blue;
    }
    @at-root #{selector-append(".green", &)} {
        color:green;
    }
}

将编译为

.orange-bg {
  color: orange;
}
.yellow-bg {
  color: yellow;
}
.blue-bg {
  color: blue;
}
.green-bg {
  color: green;
}