html - scss mixin 中的选择器是否有效?
问题描述
CSS语法一般是
selector {
declarations ...
}
我大部分时间都看到 mixindeclaration
负责
例子
@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
?
解决方案
是的,你当然可以在 mixin 中包含选择器,在 Sass 文档中有这样的例子。@mixin 和 @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;
}
推荐阅读
- node.js - 长请求 uri 在调用响应对象的 redirect() 函数时被截断
- sql - SQL Server 2008 - 从子查询连接组
- cobol - 在运行时显示 loadlib
- sql - 如何使用表中的触发器更新特定的列和行
- mysql - 更新内部连接中的两个表会产生奇怪的匹配行数
- javascript - 我想通过使用单选按钮/下拉菜单/列表/等来更改值
- c# - 使单元测试的方法可测试c#
- api - 有没有办法在没有基于登录的身份验证的情况下保护 API?
- asp.net-core-mvc - UserPrincipal.Current 返回应用程序池服务帐户
- c# - 使用aspnetcore web api中图像的EXIF数据旋转/翻转图像