Sass 变量嵌套样式

Question

我尝试优化我的样式，其中大部分样式都是重复的

我有这样的

.ds-input.ds--valid .ds-input__control:not(#specificity-issue),
.ds-select.ds--valid .ds-select__control:not(#specificity-issue) {
  border-color: var(--my-color);

  &:focus {
    border-color: var(--my-border-color);
  }
}

我尝试创建变量但嵌套变量给出了错误的结果

$dsSelectors: "ds-select, ds-input";

.#{$dsSelectors}.ds--valid.#{$dsSelectors}__control:not(#specificity-issue),
 {
        border-color: var(--my-color);
    
      &:focus {
        border-color: var(--my-border-color);
      }
}

我们有没有简单的语法来解决这个问题

最后，预计 css 会像这样

.ds-select.ds--valid .ds-select__control:not(#specificity-issue), .ds-input.ds--valid .ds-input__control:not(#specificity-issue) {
    border-color: var(--my-border-color);
}
.ds-select.ds--valid .ds-select__control:not(#specificity-issue):focus, .ds-input.ds--valid .ds-input__control:not(#specificity-issue):focus {
    border-color: var(--my-color);
}

Answer 1

@each 可用于此目的。更多信息和示例：https://sass-lang.com/documentation/at-rules/control/each

The @each rule makes it easy to emit styles or evaluate code for each element of a list or each pair in a map. It’s great for repetitive styles that only have a few variations between them. It’s usually written

$classes: ds-select, ds-input;
@each $class in $classes {
    .#{$class}.ds--valid .#{$class}__control:not(#specificity-issue)
    {
        border-color: var(--my-color);        
        &:focus {
            border-color: var(--my-border-color);
        }
    }
}

边缘样式编辑：

要合并内容相同的选择器，可以使用@function。

@function mixToList() {
    $list: ds-select, ds-input;
    $result: ();
    @each $a in $list {
        $result: append($result, ".#{$a}.ds--valid .#{$a}__control:not(#specificity-issue)", $separator: comma);
    }
    @return #{$result};
}

#{mixToList()} {
    border-color: var(--my-color);
    &:focus {
        border-color: var(--my-border-color);
    }
}

Answer 2

我做了这个函数，但结果有点不同：

$classes: select, input;

@each $class in $classes {
    .ds {
         &#{-$class}&--valid &#{-$class} {
            &__control {
                &:not(#specificity-issue) {
                    border-color: var(--my-color);
                    
                    &:focus {
                        border-color: var(--my-border-color);
                    }
                }
            }
        }
    }
}

结果：

.ds-select.ds--valid .ds-select__control:not(#specificity-issue) {
     border-color: var(--my-color);
}
.ds-select.ds--valid .ds-select__control:not(#specificity-issue):focus {
     border-color: var(--my-border-color);
}
.ds-input.ds--valid .ds-input__control:not(#specificity-issue) {
     border-color: var(--my-color);
}
.ds-input.ds--valid .ds-input__control:not(#specificity-issue):focus {
     border-color: var(--my-border-color);
}

Sass 变量嵌套样式

Sass variables nested styling

html

sass

scss-mixins