Sass 变量嵌套样式答案

【问题标题】：Sass variables nested stylingSass 变量嵌套样式
【发布时间】：2022-01-06 20:19:13
【问题描述】：

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

我有这样的

.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);
}

【问题讨论】：

标签： html sass scss-mixins

【解决方案1】：

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

@each 规则可以很容易地为每个样式生成样式或评估代码列表的元素或地图中的每一对。非常适合重复它们之间只有一些变化的样式。通常是写的

$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);
        }
    }
}

编辑边缘样式：

要对内容相同的选择器进行marge，可以使用@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);
    }
}

【讨论】：

这很好，但这种方法的问题是，它与选择器重复相同的样式，不知何故将选择器用分隔，然后是我们的样式，我认为为此我们需要使用合并构建后的同一组选择器.ds-select.ds--valid .ds- .ds-select.ds--valid .ds-select__control:not(#specificity-issue):focus { border-color: var(--gco-color-accent); } .ds-input.ds--valid .ds-input__control:not(#specificity-issue):focus { border-color: var(--gco-color-accent); }
您能否在问题中包含您想要的输出（编译后的 CSS）？
刚刚做到了，谢谢
我的答案现在已编辑。

【解决方案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);
}

【讨论】：