gpt4 book ai didi

html - SCSS 动态选择器

转载 作者:行者123 更新时间:2023-12-04 13:24:43 25 4
gpt4 key购买 nike

我有这个 SCSS 代码:

$box-length: 12 !default;
@for $i from 1 through $box-length {
.box-#{$i} {
flex: 0 0 (100% / $box-length * $i);
}
}
下面,我需要添加生成的 .box-{num}与其他选择器的类。
要获得这样的 CSS 结果:
@media screen and (max-width: 768px) {
.row,
.column,
.box,
.box-1,
.box-2,
.box-3,
.box-4,
.box-5 {
/* ... */
}
}
如何追加动态 .box-{num}类到 .row, .column, .box ?
谢谢!

最佳答案

1. 使用 placeholder selector @extend :

@media screen and (max-width: 768px) {
%mq-768 {
/* ... */
}
}

.row,
.column,
.box {
@extend %mq-768;
}

$box-length: 12 !default;
@for $i from 1 through $box-length {
.box-#{$i} {
@extend %mq-768;
flex: 0 0 (100% / $box-length * $i);
}
}
编译为:
@media screen and (max-width: 768px) {
.box-12,
.box-11,
[...],
.box-2,
.box-1,
.row,
.column,
.box {
/* ... */
}
}

.box-1 {
flex: 0 0 8.3333333333%;
}

.box-2 {
flex: 0 0 16.6666666667%;
}

[...]

.box-12 {
flex: 0 0 100%;
}
2. 使用变量来存储选择器和 append :
$selectors: ".row, .column, .box";

$box-length: 12 !default;
@for $i from 1 through $box-length {
$boxSelector: ".box-#{$i}" ;
$selectors: append($selectors, $boxSelector, $separator: comma);

#{$boxSelector} {
flex: 0 0 (100% / $box-length * $i);
}
}

@media screen and (max-width: 768px) {
#{$selectors} {
color: blue;
}
}
编译为:
.box-1 {
flex: 0 0 8.3333333333%;
}

.box-2 {
flex: 0 0 16.6666666667%;
}

[...]

.box-12 {
flex: 0 0 100%;
}

@media screen and (max-width: 768px) {
.row,
.column,
.box,
.box-1,
.box-2,
[...],
.box-11,
.box-12 {
/* ... */
}
}

关于html - SCSS 动态选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69276700/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com