SCSS逗号选择器重构优化:如何减少重复定义?
CSS转SCSS的优化重构方案
我正在将现有CSS重构为SCSS,原CSS代码如下:
.section .recipient_group_toggle i.fa-plus, .section.toggled .recipient_group_toggle i.fa-minus { display:inline-block; } .section .recipient_group_toggle i.fa-minus, .section.toggled .recipient_group_toggle i.fa-plus { display:none; }
我目前写出的SCSS代码如下:
.section { .recipient_group_toggle { i.fa-plus { display:inline-block; } i.fa-minus { display:none; } } &.toggled { .recipient_group_toggle { i.fa-plus { display:none; } i.fa-minus { display:inline-block; } } } }
这个写法包含四个独立定义,不够理想。想请教有没有更具SCSS风格的写法,能够仅定义一次不同的display值?
优化方案一:变量+父选择器复用
通过变量统一存储display值,再用@at-root跳出嵌套复用选择器结构,减少重复代码:
$display-show: inline-block; $display-hide: none; .section { .recipient_group_toggle { // 默认状态:显示加号,隐藏减号 i.fa-plus { display: $display-show; } i.fa-minus { display: $display-hide; } // 切换状态:反向显示 @at-root .section.toggled & { i.fa-plus { display: $display-hide; } i.fa-minus { display: $display-show; } } } }
优化方案二:混合宏封装逻辑
把图标显示逻辑封装成混合宏,在不同状态下调用,实现代码复用:
@mixin icon-toggle($show, $hide) { #{$show} { display: inline-block; } #{$hide} { display: none; } } .section { .recipient_group_toggle { @include icon-toggle('i.fa-plus', 'i.fa-minus'); } &.toggled { .recipient_group_toggle { @include icon-toggle('i.fa-minus', 'i.fa-plus'); } } }
优化方案三:还原原选择器结构嵌套
保留原CSS的选择器分组逻辑,用SCSS嵌套简化写法,同时仅定义一次display值:
.section { // 显示规则组 & .recipient_group_toggle i.fa-plus, &.toggled .recipient_group_toggle i.fa-minus { display: inline-block; } // 隐藏规则组 & .recipient_group_toggle i.fa-minus, &.toggled .recipient_group_toggle i.fa-plus { display: none; } }
以上三种方案都实现了仅定义一次inline-block和none,既发挥了SCSS的嵌套优势,又减少了代码冗余,更符合SCSS的模块化风格。
内容的提问来源于stack exchange,提问作者BattleMetalChris
相关产品推荐
相关产品推荐

