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!


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.


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;

  }
}

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;

  }
}

La respuesta más lógica con la menor cantidad de votos a favor ... El mundo es ilógico.
CPHPython
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.