Question

J'ai le mixin suivant dans un partiel 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

Maintenant, quand j'ai essayé de le paramétrer et que j'ai ajouté quelques vars, ils sont toujours ignorés:

=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

Je l'utilise comme ceci:

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

Le problème est que lorsque j'utilise la version paramétrée de mon mixin, la propriété width est ignorée, elle n'apparaît même pas dans le CSS. Pouvez-vous repérer des erreurs sur ce code?

Si j'utilise la version non paramétrée du mixin, tout fonctionne correctement.

Était-ce utile?

La solution

Si vous utilisez une variable dans une propriété, vous devez utiliser = , et non : .

=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
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top