Sintaxe para condição if / else no mixin SCSS


106

Olá, estou tentando aprender SASS / SCSS e estou tentando refatorar meu próprio mixin para clearfix

o que eu gostaria é que o mixin fosse baseado em se eu passo o mixin em uma largura.

pensamentos até agora (pseudocódigo apenas porque irei incluir outros mixins)

@mixin clearfix($width) {

   @if !$width {

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

   } @else {

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

aqui está como eu pensei que poderia chamá-lo, mas não está funcionando.

@include clearfix();

ou

@include clearfix(100%)

ou

@include clearfix(960px)

Agradeço qualquer ajuda sobre a melhor maneira ou a maneira certa de fazer isso!


3
Por favor, veja a resposta de Ryan James - é muito melhor do que a aceita atualmente. =)
Quinn Strahl

Respostas:


145

Você pode tentar isto:

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

   @if $width == 'auto' {

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

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

Não tenho certeza do resultado pretendido, mas definir um valor padrão deve retornar falso.


5
sim, obrigado, eu usei, " "mas eu gosto mais do valor auto :) - não @mixin clearfix($width: auto) {...
precisei

Há alguma finalidade em fornecer $ width: auto; como valor padrão?
Krish

222

Você pode atribuir valores de parâmetro padrão inline ao criar o mixin pela primeira 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 deve ser a resposta aceita! É melhor / mais limpo usar um parâmetro padrão.
Think Graphical

@hellaFont: Por favor, não adicione edições inválidas. Adicionar código ou alterá-lo mudará o significado de uma resposta. Um comentário será suficiente.
Brian

9

Você pode definir o parâmetro como nullou false.
Dessa forma, seria mais curto testar se um valor foi passado 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;

  }
}

A resposta mais lógica com o menor número de votos positivos ... O mundo é ilógico.
CPHPython
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.