使用SASS父选择器的更好方法

Question

只想知道是否有更好的方法使用父选择器在scss中编写以下CSS

.tabs--boxs .blue-color-box .box-title:after {
    border-bottom-color: #1a4b84;
}

.tabs--boxs .green-color-box .box-title:after {
    border-bottom-color: #1e8334
}

.tabs--boxs .orange-color-box .box-title:after {
    border-bottom-color: #fe5722
}

.tabs--boxs .purple-color-box .box-title:after {
    border-bottom-color: #5926a6
}

Answer 1

制作一个 colors 变量列表，然后使用With param as ( Select to_date(extract(year from add_months(sysdate,-12)) || lpad((floor(extract(month from add_months(sysdate,-12))/3)*3)+1,2, '0') || '01', 'yyyymmdd') first_date from dual ) Select level quartal, Add_months(first_date, ((level-1)*3)) from_dat, Last_day(add_months(first_date, ((level-1)*3)+3)-1) to_dat From param connect by level <= 4; （Demo）对其进行迭代：

@each

Answer 2

我相信确实没有更好的方法。

您可以略微改变其结构：

    .tabs--boxs {
        .blue-color-box .box-title:after {
            border-bottom-color: #1a4b84;
        }

        .green-color-box .box-title:after {
            border-bottom-color: #1e8334
        }

        .orange-color-box .box-title:after {
            border-bottom-color: #fe5722
        }

        .purple-color-box .box-title:after {
            border-bottom-color: #5926a6
        }
    }

但实际上，还不错。可能会觉得很重复，但是这些都是需要唯一CSS规则的唯一选择器。现在，如果您想添加适用于所有这些的CSS，我只需要在它们之前添加另一个.box-title:after选择器，而没有彩色框类，而是在tabs--boxs选择器内部。