Excepciones y variantes con @mixins

Las excepciones en los estilos fomentan la pérdida de control de las hojas de estilo (css).

Una forma de mantener el control de estas excepciones es mediante @mixins.

En sass podemos definir fácilmente "mixins", que nos permiten crear variantes de un estilo evitando las excepciones.

La excepción

Tenemos un @mixin para los titulares.

@mixin title(){
	color: blue;
	font-size: 3em;
}

Sería muy fácil crear la excepción en la misma declaración donde se usa el @include pero perdemos el control del estilo "title" y generamos más código del necesario ya que sobrescribimos el valor de la propiedad color .

	.title__bg-dark{
		@include title();
		color: white;
	}

Css resultante:

.title__bg-dark {
  color: blue;
  font-size: 3em;
  color: white;
}

Pasar valores con variables no es la solución

También podríamos pasar un valor con una variable al @mixin, pero estaríamos en un caso muy similar ya que el valor lo definimos en cada declaración y sigue siendo difícil de controlar.

	@mixin title($color: blue){
		color: $color;
		font-size: 3em;
	}

	.title__bg-dark{
		@include title($color: white);
	}

Variantes para las excepciones

La solución pasa por crear variantes para cada excepción.

	@mixin title($has-background: default) {
		font-size: 3em;
		
		@if $has-background == default{
		    color: blue;
		} @else if $has-background == dark {
			color: white;
		}
	}

Entonces aplicamos la variante donde nos convenga. Si definimos en el @mixin que el comportamiento por defecto sea "default" @mixin title($background: default){...} no necesitaremos declararlo en el @include para usarlo

	.title__default{
		@include title();
	}
	
	.title__bg-dark{
		@include title($has-background: dark);
	}

El escenario ideal

Para mi, el escenario ideal sería cuando a una declaración le asignamos un @include y este incluye todas las opciones de estilo necesarias y solo necesitamos declarar las propiedades de posicionamiento fuera del @include.

No es conveniente añadir excepciones de posicionamiento a los @mixins de estilo, ya que el posicionamiento viene determinado por los elementos que lo rodean y las variantes podrían ser infinitas.

	.title{
		@include title();
		grid-column: 2;
		margin-block-start: 2em;
		padding-inline: 1em;
	} 

Todo esto nos facilita ver todas las versiones de un estilo, los titulares en este caso, solo mirando el código del @mixin title(); ahora el trabajo es mantener ese @mixin, solo declarando las variantes necesarias y dividiéndolo en otros "@mixins" más pequeños si se hace difícil de entender o mantener.