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

您可以在函数和mixins中使用与号访问父选择器，而不必将其作为参数传递。

我可能会做类似的事情(demo)：

puts $html

要使其正常工作，您还需要一个字符串替换功能（from Hugo Giraudel）：

@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;
    }
  }
}

工作方式：

SCSS

@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;
}

输出

.bg {
  color: red;

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

用例：

.foo
span.foo
span .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;
}

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

3 个答案:

工作方式：

用例：