css - selectors - Elementos del grupo SASS para su reutilización

selectors sass

Question

Quiero crear un "grupo" de elementos que obtengan ciertos colores / estilos agregados a ellos en función de la clase de cuerpo.

Estoy usando SASS y no quiero tener que escribir los mismos elementos cada vez.

Sé que el código siguiente es incorrecto pero entiendes la idea.

Es algo como esto posible?

@mixin coloured-elements {
    a:hover,
    a.site-title,
    .another-element
}
body.blue {
    @include coloured-elements {
        color: $blue;
    }
}
body.green {
    @include coloured-elements {
        color: $green;
    }
}
body.red {
    @include coloured-elements {
        color: $red;
    }
}
body.purple {
    @include coloured-elements {
        color: $purple;
    }
}
body.orange {
    @include coloured-elements {
        color: $orange;
    }
}

Answer 1

Echa un vistazo usando & después de un elemento para seleccionar ''es un hijo de''.

.element1,
.element2 {
  body.orange & {
    color: orange;
  }
  body.blue & {
    color: blue;
  }
}

Answer 2

Haga que los elementos de color acepten argumentos y luego definan una lista de colores, iteren y creen todo dinámicamente. Algo como:

@mixin coloured-elements($color) {
  a:hover, a.site-title, .another-element {
    color: $color
  }
}

$colors: blue, red, purple, orange;

@each $color in $colors {
  body.#{$color} {
    @include coloured-elements($color);
  }
}

Tenga en cuenta que no transpuse esto, es posible que deba ajustarlo. Verifique la documentación para hacerlo correctamente.

Si proporciona un códec, puedo editar la respuesta.

Editar:

1. listas sass
2. sass hashmaps si quieres usar esta estructura de datos
3. Directivas de control
4. Interpolación

Answer 3

Puedes usar @each y #{} interpolación para eso. Cree los $valiable con los $valiable selectorName , colorValue y luego colóquelos en @each directive después de in palabra clave como en el ejemplo a continuación. Los pares resuelven el problema de usar diferentes nombres de selector y valores de color, por ej. .red {color: #f00}; en .red{color:red} lugar .red{color:red}

$blue: blue, #42a5f5;
$green: green, #66bb6a;
$red: red, #f44336;
$purple: purple, #ba68c8;
$orange: orange, #f57c00;

a:hover, a.site-title, .another-element {
   @each $selector, $color in $blue, $green, $red, $purple, $orange {
      body.#{$selector} {
          color: $color;
      }
   }
}

El resultado de CSS será:

a:hover body.blue, a.site-title body.blue, .another-element body.blue {
  color: #42a5f5; 
}

a:hover body.green, a.site-title body.green, .another-element body.green {
  color: #66bb6a;
}

... etc.

Answer 4

Si pasa contenido a un mixin, debe usar @content:

@mixin coloured-elements {
    a:hover,
    a.site-title,
   .another-element { @content; }
}

En su ejemplo (usando el mixin anterior) obtendrá el siguiente resultado:

body.blue a:hover,
body.blue a.site-title,
body.blue .another-element {
  color: blue;
}

body.green a:hover,
body.green a.site-title,
body.green .another-element {
  color: green;
}

body.red a:hover,
body.red a.site-title,
body.red .another-element {
  color: red;
}

body.purple a:hover,
body.purple a.site-title,
body.purple .another-element {
  color: purple;
}

body.orange a:hover,
body.orange a.site-title,
body.orange .another-element {
  color: orange;
}