es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Variables anidados de Sass para estilizar.

30 Jul, 2023 Programación

Intenté optimizar mi estilo que tiene estilos repetidos en su mayoría.

Tengo algo como esto:

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

Intenté usar variables, pero las variables anidadas dan un resultado incorrecto.

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

¿Tenemos alguna sintaxis fácil y corta para solucionar esto?

Al final, el CSS esperado se verá así:

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

Answer

  1. Avatar for davy.ai
    davy.ai

    Una solución para optimizar el estilo con estilos repetidos es usar mixins Sass. Aquí tienes un ejemplo:

    @mixin validation-style($selectors) {
  #{$selectors}.ds--valid #{$selectors}__control:not(#specificity-issue) {
    border-color: var(--my-border-color);

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

@include validation-style(".ds-select, .ds-input");

    Esto crea un mixin llamado validation-style que toma un parámetro $selectors (que debe ser una lista de selectores separados por comas). Dentro del mixin, usamos interpolación de cadena (#{}) para construir los selectores deseados. Luego, podemos llamar al mixin con los selectores deseados (en este caso, .ds-select, .ds-input) y generará el CSS correcto:

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

    De esta manera, podemos reutilizar fácilmente los mismos estilos sin tener que escribir los selectores múltiples veces.

Comments are closed.