scss mixin 中的选择器是不是有效?
Posted
技术标签:
【中文标题】scss mixin 中的选择器是不是有效?【英文标题】:Is selector inside a scss mixin valid?scss mixin 中的选择器是否有效? 【发布时间】:2019-10-26 00:52:50 【问题描述】:CSS 语法一般是
selector
declarations ...
我经常看到 mixin 处理 declaration
部分
例子
@mixin border-radius($rad)
border-radius: $rad;
// and used like
some-selector
@include border-radius(5px)
但是 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;
第二种情况是有效的语法吗?
我已经看到它可以工作,但不确定它是否记录在案并且我应该在生产中使用它。
作为对此的回答,我只是想确认它的有效语法以及对此类声明的任何引用。
或者我做错了,还有其他方法吗...除了使用extend
?
【问题讨论】:
没有引用,但如果它编译,那么它是有效的 SCSS。但是,我看不出这种做法有什么用处。 【参考方案1】:是的,你当然可以在 mixin 中包含选择器,在 Sass 文档中有 示例。 @mixin and @include 页面上的第一个代码示例实际上与您的示例非常相似,因为从类型选择器中调用了一个 mixin,这导致了一个后代选择器。这是该示例的相关部分:
@mixin horizontal-list
li
display: inline-block;
margin:
left: -2px;
right: 2em;
nav ul
@include horizontal-list;
编译为:
nav ul li
display: inline-block;
margin-left: -2px;
margin-right: 2em;
您的示例使用了类选择器,但原理相同。这是编译后的 CSS:
selector-for-dom-element .button
color: red;
【讨论】:
以上是关于scss mixin 中的选择器是不是有效?的主要内容,如果未能解决你的问题,请参考以下文章