大佬教程收集整理的这篇文章主要介绍了SCSS扩展一个嵌套选择器并覆盖嵌套的规则集,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
%block { .title { font-size:12px; } }
我想扩展它并添加到.title类:
.superblock { @extend %block; .title { font-weight:bold; } }
我想的答案是这样的:
.superblock .title { font-size: 12px; font-weight: bold; }
但是,我得到的答案是:
.superblock .title { font-size: 12px; } .superblock .title { font-weight: bold; }
我做错了,这是怎么运作的?澄清我想要合并.如果我直接在.superblock内添加一些东西,并且像另一个扩展%块一样添加,它们可以合并而没有任何问题.
@extend指令不仅仅是一种使用类替代mixins(类似于LESS风格的mixin调用)的方式.为什么@extend的工作方式变得清晰,当你扩展正常的类而不是扩展类:
.block { font-size:12px; } .foo { @extend .block; font-weight: bold; }
输出:
.block,.foo { font-size: 12px; } .foo { font-weight: bold; }
使用扩展类只是抑制原始类名称的排放.
现在你已经看到为什么@extend的工作原理,你还想要@extend提供什么?如果答案为否,则需要使用mixin:
@mixin block { // styles .title { font-size: 12px; @content; } } .superblock { @include block { font-weight: bold; } }
输出:
.superblock .title { font-size: 12px; font-weight: bold; }
以上是大佬教程为你收集整理的SCSS扩展一个嵌套选择器并覆盖嵌套的规则集全部内容,希望文章能够帮你解决SCSS扩展一个嵌套选择器并覆盖嵌套的规则集所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。