我已经使用 display:inline-block 为按钮设置了 mixin。我正在尝试访问最终将使用 mixim 的任何类的父级,因此我可以在其中添加 font-size: 0px 行,以确保我不需要对 HTML 进行调整以避免不需要的内容每个按钮之间的空间。
这是一个例子...我想要。父类接收 font-size: 0px 行。
@mixin button() {
display:inline-block;
font-size: 1em;
//other stuff to make a pretty button
&& { font-size: 0px; }
}
.parent{
.child {
@include button();
}
}
从 Sass 3.4 开始,这是可能的。
@mixin parent {
@each $selector in & {
$l: length($selector);
@if ($l == 1) {
@error "Used parent mixin on a top-level selector";
} @else {
$parent: nth($selector,1);
@for $i from 2 to $l {
$parent: append($parent,nth($selector,$i));
}
@at-root #{$parent} {
@content;
}
}
}
}
// Use
.grandparent {
.parent{
.child {
font-size: 1em;
@include parent {
font-size: 0px;
}
}
}
}
// Result
.grandparent .parent .child {
font-size: 1em;
}
.grandparent .parent {
font-size: 0px;
}
// Errors:
.root {
@include parent {
content: "Won't work";
}
}
.grandparent .parent, .root {
@include parent {
content: "Also won't work";
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)