[英]SASS / SCSS @extend rule selectors
I'm having a little problem with the @extend rule, this is what I got (focus on the h1): 我对@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
}
}
So it will be: 所以它将是:
.content-header h1, .box-header h1 {
/* Happily sharing the same CSS properties */
}
But it seems like @extend
don't like that, is any other way to write this without giving the h1
a class?? 但似乎
@extend
不喜欢这样,有没有其他方式来写这个而不给h1
一个类?
Nested selectors cannot be extended - in fact, that's the syntax error that is reported by the parser. 嵌套选择器无法扩展 - 实际上,这是解析器报告的语法错误。 Structural comments aside (I can't think of a scenario where the above
@extend
relationship is warranted), this is not something that can be currently accomplished with SASS. 抛开结构性评论(我无法想到上述
@extend
关系得到保证的情况),这不是目前SASS可以完成的事情。
NB: this is, however supported by Stylus if you're open to it. 注意:如果您对它开放,可以使用Stylus支持。
An obvious solution whould be to define a new @mixin your-name
for your .content-header h1
definitions and @include your-name
within .box-header h1
. 一个明显的解决方案是为你的
.content-header h1
定义定义一个新的@mixin your-name
,并在.box-header h1
定义@include your-name
。
But, there is a much better solution Referencing Parent Selectors: & : 但是,有一个更好的解决方案引用父选择器:& :
h1 {
.content-header &,
.box-header & {
// CSS properties
}
.box-header & {
// And his own CSS properties
}
}
It's not obvious because the logic reverse but it's better to maintain. 这并不明显,因为逻辑反转但维护更好。 You are changing the definitions of
h1
for a specific selector. 您正在更改特定选择器的
h1
定义。
Nested @extend is not allowed. 不允许嵌套的@extend。 Try this for a work around
试试这个来解决问题
.foo {
background-color: lime;
}
.b{
margin:0px;
}
.baz {
@extend .foo;
@extend .b;
}
Some thing I constructed for my personel use below sharing with you all, This dynamically constructs the selector, Since special characters are not allowed in naming conventions I used '--' to seperate 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();
Good Luck!! 祝好运!!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.