Sass 變量嵌套樣式

Question

我嘗試優化我的樣式，它確實重復了 styles

我有這樣的

.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

@each 規則可以很容易地發出 styles 或評估列表的每個元素或 map 中的每一對的代碼。 它非常適合重復的 styles，它們之間只有一些變化。 通常是這樣寫的

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

Answer 2

我做了這個 function 但結果有點不同：

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