Nested @extend non è consentito. Prova questo per un lavoro in giro
.foo {
background-color: lime;
}
.b{
margin:0px;
}
.baz {
@extend .foo;
@extend .b;
}
Qualche cosa ho costruito per i miei personel utilizzare sotto la condivisione con tutti voi, questo costruisce in modo dinamico il selettore, Dal momento che i caratteri speciali non sono ammessi nelle convenzioni di denominazione che ho usato '-' per separare classe
$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();
Buona fortuna !!
fonte
2016-03-23 04:49:19
Sono aperto, proviamo! grazie mille! ;) –