百科狗占位符选择器 - scss 样式
占位符选择器
Sass 有一种特殊的选择器，称为“占位符”。它看起来和行为很像一个类选择器，但它以%开头，并且不包含在 CSS 输出中。事实上，任何甚至包含占位符选择器的复杂选择器（逗号之间的选择器）都不会被编辑进 CSS 中，任何包含占位符选择器的样式规则也不被编译到 CSS 文件中。
| scss 语法 | css 语法 |
|---|---|
.alert:hover, %strong-alert {
font-weight: bold;
}
%strong-alert:hover {
color: red;
}
| .alert:hover {
font-weight: bold;
}
|
占位符选择器有什么用？它仍然能被继承的！与类选择器不同，在占位符没有被@extend，没有被库用户为 HTML 使用特定的类名，他们就不会把CSS弄得杂乱无章。
| scss 语法 | css 语法 |
|---|---|
%toolbelt {
box-sizing: border-box;
border-top: 1px rgba(#000, .12) solid;
padding: 16px 0;
width: 100%;
&:hover { border: 2px rgba(#000, .5) solid; }
}
.action-buttons {
@extend %toolbelt;
color: #4285f4;
}
.reset-buttons {
@extend %toolbelt;
color: #cddc39;
}
| .action-buttons, .reset-buttons {
box-sizing: border-box;
border-top: 1px rgba(0, 0, 0, 0.12) solid;
padding: 16px 0;
width: 100%;
}
.action-buttons:hover, .reset-buttons:hover {
border: 2px rgba(0, 0, 0, 0.5) solid;
}
.action-buttons {
color: #4285f4;
}
.reset-buttons {
color: #cddc39;
}
|
占位符选择器在编写每个样式规则都可能使用或不使用的 Sass 库时很有用。根据经验，如果您只是为自己的应用程序编写样式表，通常最好只扩展一个可用的类选择器。
鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com
免责声明：我们致力于保护作者版权，注重分享，当前被刊用文章因无法核实真实出处，未能及时与作者取得联系，或有版权异议的，请联系管理员，我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理!邮箱：344225443@qq.com)
图片声明：本站部分配图来自网络。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!
内容声明：本文中引用的各种信息及资料（包括但不限于文字、数据、图表及超链接等）均来源于该信息及资料的相关主体（包括但不限于公司、媒体、协会等机构）的官方网站或公开发表的信息。部分内容参考包括:(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供参考使用,不准确地方联系删除处理！本站为非盈利性质站点,本着为中国教育事业出一份力,发布内容不收取任何费用也不接任何广告!)
相关文章
