SASS/SCSS @extend规则选择

我在与@extend规则有点问题

，这是我得到了什么（重点H1）：SASS/SCSS @extend规则选择

.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一个类？

来源

2012-06-25 asterk-7g

嵌套选择器无法扩展 - 事实上，这是解析器报告的语法错误。撇开结构性评论（我无法想象上述@extend关系是合理的情况），但这不是SASS目前可以完成的。

注意：这是，但是，如果你打开它，支持Stylus。

来源

2012-06-25 22:49:35

我很开放，让我们试试吧！非常感谢！ ;） –

一个显而易见的解决方案是对子级定义为您的.content-header h1定义中.box-header h1新@mixin your-name和@include your-name。

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

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

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

来源

2013-05-26 14:21:32

不允许嵌套@extend。试试这个对周围的工作

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

我为我的企业人事构建一些东西下面分享使用与你的一切，这动态地构造的选择，因为特殊字符不会在命名我使用的惯例允许“ - ”以独立class

$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();

祝您好运！

来源

2016-03-23 04:49:19

SASS/SCSS @extend规则选择

回答

相关问题