[英]Is selector inside a scss mixin valid?
CSS syntax in general is CSS 语法一般是
selector {
declarations ...
}
I have mostly seen mixin taking care of declaration
part我主要看到 mixin 处理declaration
部分
example例子
@mixin border-radius($rad) {
border-radius: $rad;
}
// and used like
some-selector {
@include border-radius(5px)
}
but can a mixin return a complete selector itself但是 mixin 可以返回一个完整的选择器本身吗
@mixin button {
.button {
color: red
}
}
// now if I have button nested in any of my dom element I can say
selector-for-dom-element {
@include button;
}
is the second case valid syntax?第二种情况是有效的语法吗?
I have seen that it works but not sure if its documented and should I use it in production.我已经看到它有效,但不确定它是否记录在案,我是否应该在生产中使用它。
as an answer to this, I am only looking to confirm that its valid syntax and any reference to such a claim.作为对此的回答,我只想确认其有效语法以及对此类声明的任何引用。
Or I am doing it the wrong way, any other way to do it... except using extend
?或者我以错误的方式做它,任何其他方式做它......除了使用extend
?
Yes, you can certainly include selectors within a mixin, and there are examples of this in the Sass documentation.是的,你当然可以在 mixin 中包含选择器,Sass 文档中有这样的例子。 The very first code example on the @mixin and @include page is actually quite similar to your example in that a mixin is called from a type selector, which results in a descendant selector. @mixin 和 @include页面上的第一个代码示例实际上与您的示例非常相似,因为从类型选择器调用了一个 mixin,这会产生一个后代选择器。 Here's the relevant part of that example:这是该示例的相关部分:
@mixin horizontal-list {
li {
display: inline-block;
margin: {
left: -2px;
right: 2em;
}
}
}
nav ul {
@include horizontal-list;
}
That compiles to:编译为:
nav ul li {
display: inline-block;
margin-left: -2px;
margin-right: 2em;
}
Your example uses a class selector, but the principle is the same.您的示例使用了类选择器,但原理是相同的。 Here's the compiled CSS:这是编译好的CSS:
selector-for-dom-element .button {
color: red;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.