Domanda

Ho il seguente mixin in un sass parziale:

=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

Ora, quando ho provato a renderlo parametrizzato e ho aggiunto alcuni parametri, continuano a essere ignorati:

=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 sto usando in questo modo:

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

Il problema è che quando uso la versione parametrizzata del mio mixin, la proprietà width viene ignorata, non appare nemmeno nel CSS. Riesci a individuare eventuali errori su questo codice?

Se uso la versione NON parametrizzata del mixin, tutto funziona bene.

È stato utile?

Soluzione

Se si utilizza una variabile in una proprietà, è necessario utilizzare = , 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
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top