SASS / SCSS @extend 规则选择器答案

【问题标题】：SASS / SCSS @extend rule selectorsSASS / SCSS @extend 规则选择器
【发布时间】：2012-06-27 05:53:16
【问题描述】：

@extend 规则有点问题，这就是我得到的（关注 h1）：

.content-header {
    // CSS properties
    h1 {
        // CSS properties
    }
}

.box-header {
    // CSS properties
    h1 {
        @extend .content-header h1; // My selector problem!
        // And his own CSS properties
    }
}

原来是这样：

.content-header h1, .box-header h1 {
    /* Happily sharing the same CSS properties */
}

但似乎@extend 不喜欢那样，有没有其他方法可以写这个而不给h1 一个类？？

【问题讨论】：

标签： css sass

【解决方案1】：

嵌套选择器无法扩展——事实上，这是解析器报告的语法错误。除了结构性 cmets（我想不出有理由保证上述 @extend 关系的场景），这不是目前 SASS 可以完成的事情。

注意：不过，如果您愿意，Stylus 会支持它。

【讨论】：

【解决方案2】：

一个明显的解决方案是为您的.content-header h1 定义和@include your-name 在.box-header h1 中定义一个新的@mixin your-name。

但是，有一个更好的解决方案Referencing Parent Selectors: &：

h1 {
    .content-header &,
    .box-header & {
        // CSS properties
    }
    .box-header & {
        // And his own CSS properties
    }
}

这并不明显，因为逻辑相反，但最好保持。您正在更改特定选择器的 h1 的定义。

【讨论】：

【解决方案3】：

不允许嵌套@extend。试试这个解决方法

.foo {
  background-color: lime;    
}
.b{
  margin:0px;
}
.baz {
  @extend .foo;
  @extend .b;
}

我为个人使用构建的一些东西在下面与大家分享，这会动态构建选择器，由于命名约定中不允许使用特殊字符，因此我使用“--”来分隔类

$ih-classes: ( "module--cardContainer--header",
                "a"
              );
  %module--cardContainer--header {
    color: #1e1d1c;
    background-color: #fff;
    border-bottom: 0.0714rem solid #e0dddc;
    padding: 0;
    line-height: 3.1429rem;
    font-size: 1.2857rem;
    font-family: ProximaNovaSemiBold;
}
%a{
  color:red;
}

@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;
}
@mixin generate-framework-code() {

              @each  $icon in $ih-classes {
               $val : str-replace($icon, '--', ' .');
                  .#{$val} {
                            @extend %#{$icon};
                         }
                  }
}

@include generate-framework-code();

祝你好运！！

【讨论】：

【解决方案4】：

如前所述，您只能扩展一个类。通常，应跳过带有扩展的嵌套。 this text 中有更多关于扩展及其选项的信息。

【讨论】：