Sintaxis para la condición if / else en SCSS mixin

106

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

lo que me gustaría es que la mezcla se base en si paso la mezcla en un ancho.

pensamientos hasta ahora (pseudocódigo solo ya que incluiré otros mixins)

@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 funciona.

@include clearfix();

o

@include clearfix(100%)

o

@include clearfix(960px)

¡Agradecería cualquier ayuda sobre la mejor manera o la forma correcta de hacer esto!

Clairesuzy
fuente
3
Consulte la respuesta de Ryan James: es mucho mejor que la aceptada actualmente. =)
Quinn Strahl

Respuestas:

145

Puedes probar 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 del resultado deseado, pero establecer un valor predeterminado debería devolver falso.

temas simples
fuente
5
lo hace, gracias, lo tuve usando " "pero me gusta más el valor automático :) - no necesité establecer la variable, aunque la puse en la sintaxis mixin como valor predeterminado @mixin clearfix($width: auto) {... gracias :)
clairesuzy
¿Tiene algún propósito dar $ width: auto; como valor predeterminado?
Krish
222

Puede asignar valores de parámetros predeterminados en línea cuando crea el 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;

  }
}
Ryan James
fuente
23
¡Esta debería ser la respuesta aceptada! Es mejor / más limpio usar un parámetro predeterminado.
Think Graphical
@hellaFont: No agregue ediciones no válidas. Agregar código o cambiarlo cambiará el significado de una respuesta. Un comentario bastará.
Brian
9

Puede predeterminar el parámetro en nullo false.
De esta manera, sería más corto probar si se ha pasado un valor como parámetro.

@mixin clearfix($width: null) {

  @if not ($width) {

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

  } @else {

    display: inline-block;
    width: $width;

  }
}
Quentin Veron
fuente
La respuesta más lógica con la menor cantidad de votos a favor ... El mundo es ilógico.
CPHPython