Pergunta

Eu tenho o seguinte mixin em um sass parcial:

=card-list
  width: 180px
  min-height: 150px
  display: -moz-inline-stack
  display: inline-block
  vertical-align: top
  margin: 5px
  zoom: 1
  *display: inline
  _height: 250px
  -moz-border-radius: 10px
  -webkit-border-radius: 10px

Agora, quando eu tentei fazê-lo parametrizado e acrescentou alguns vars, eles continuam sendo ignorados:

=card-list(!width=180px)
  width: !width
  min-height: 150px
  display: -moz-inline-stack
  display: inline-block
  vertical-align: top
  margin: 5px
  zoom: 1
  *display: inline
  _height: 250px
  -moz-border-radius: 10px
  -webkit-border-radius: 10px

Eu estou usando-o assim:

#content
  ul.characters > li
    +card-list(180px)
    background-color: black
    border: 1px solid black

O problema é que quando eu uso a versão parametrizada do meu mixin, a propriedade largura é ignorado, nem sequer aparecem no CSS. você pode detectar quaisquer erros neste código?

Se eu usar a versão NÃO parametrizada do mixin, tudo funciona bem.

Foi útil?

Solução

Se você estiver usando uma variável em uma propriedade, você precisa usar =, não :.

=card-list($width: 180px)
  width = $width
  min-height: 150px
  display: -moz-inline-stack
  display: inline-block
  vertical-align: top
  margin: 5px
  zoom: 1
  *display: inline
  _height: 250px
  -moz-border-radius: 10px
  -webkit-border-radius: 10px
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top