Pregunta

Tengo el siguiente mixin en un parcial de Sass:

=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

Ahora, cuando intenté configurarlo y agregué algunos vars, se siguen ignorando:

=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

Lo estoy utilizando así:

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

El problema es que cuando uso la versión parametrizada de mi mezcla, la propiedad de ancho se ignora, ni siquiera aparece en el CSS. ¿Puedes detectar algún error en este código?

Si utilizo la versión NO parametrizada de la mezcla, todo funciona bien.

¿Fue útil?

Solución

Si está usando una variable en una propiedad, debe usar = , no : .

=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 bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top