Sass 变量嵌套样式

Question

I try to optimize my styling which does have repeated styles mostly

i have like this

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

what i tried to make variables but nested variables gives wrong result

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

do we have any easy and short syntax to fix this

at the end, expected css will look like this

.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 can use for this purpose. More information and examples: 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);
        }
    }
}

Answer 2

I make this function but result is bit different:

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

And result:

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