scss Sass mixins - 用法

Posted 2021-05-18

// nuestro mixin
@mixin section-number(
	$sn-width: 5rem,
	$sn-border-color: $optmz-cyan,
	$sn-color: $optmz-navy
	) {
	
	//...
	border: 1px solid $sn-border-color;
	width: $sn-width;
	height: $sn-width;
}


// si queremos usar los valores por defecto
@include section-number;

// si queremos modificar solo un valor
@include section-number($sn-border-color: $optmz-red);

// si queremos modificar varios valores, hay que pasarlos en el orden correcto
@include section-number(15rem, $optmz-red);
@include section-number(6rem, $optmz-red, $optmz-darkgray);