conditional - for - Sintaxis para condición if/else en SCSS mixin

sass override class

Question

Hola, estoy tratando de aprender SASS / SCSS y estoy tratando de refactorizar mi propia mixin para clearfix

lo que me gustaría es que la mezcla esté basada en si paso el ancho de la mezcla.

pensamientos hasta ahora (pseudo código solo porque incluiré otras mixinas)

@mixin clearfix($width) {

   @if !$width {

    // if width is not passed, or empty do this

   } @else {

        display: inline-block;
        width: $width;
   }
}

así es como pensé que podría llamarlo, pero no está funcionando.

@include clearfix();

o

@include clearfix(100%)

o

@include clearfix(960px)

Agradecería cualquier ayuda sobre la mejor o la forma correcta de hacerlo.

Answer 1

Puede asignar valores de parámetros predeterminados en línea cuando crea la mixin por primera vez:

@mixin clearfix($width: ''auto'') {

  @if $width == ''auto'' {

    // if width is not passed, or empty do this

  } @else {

    display: inline-block;
    width: $width;

  }
}

Answer 2

Puedes intentar esto:

$width:auto;
@mixin clearfix($width) {

   @if $width == ''auto'' {

    // if width is not passed, or empty do this

   } @else {
        display: inline-block;
        width: $width;
   }
}

No estoy seguro de su resultado previsto, pero establecer un valor predeterminado debería devolver falso.