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