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規則選擇

回答

相關問題