SASS @if-Anweisung mit Variablenname

Ich habe ein Problem bei der Generierung des korrekten Codes mit der @if-Anweisung basierend auf einer Variablen.SASS @if-Anweisung mit Variablenname

SASS

=band($name, $color) 
     .band-#{$name} 
     background-color: #{$color} 
     @if $name == white 
      font-size: 100px 
     @else 
      font-size: 20px 

    +band('white', $white) 
    +band('black', $black)

.band-white{background-color:white; font-size:100px;} 
    .band-black{background-color:black; font-size:50px;}

Quelle

2017-05-22 brad

-1

zu erzeugen, ich vermute, dass es Ausgabe ein weißer Raum ist. Erhalten Sie etwas Nützliches in den Protokollen?

konnte ich eine Version des Codes zum Laufen bringen:

@mixin band($name) 
    background-color: $name 
    @if $name == white 
    font-size: 50px 
    @else 
    font-size: 20px 

.band-white 
    @include band($name: white) 

.band-black 
    @include band($name: black)

Und Sie können es hier https://codepen.io/sitrobotsit/pen/aWQxNE

Quelle

2017-05-22 04:25:24 LWilson

Das ist ganz ein anderes Ergebnis zu erzielen, was @brad ist versucht, . –

@PatrikAffentranger ja, vielleicht hätte ich nach den Gründen für die redundanten Argumente fragen sollen. Das Ergebnis (das kompilierte CSS) ist jedoch genau das, wonach das OP gesucht und in einem weniger ausführlichen Manuskript erreicht wurde. Ich glaube also nicht, dass eine Abstimmung nach unten gerechtfertigt ist. – LWilson

IMO, das Ergebnis ist anders, weil @brad in der Lage sein sollte, die Klassennamen basierend auf dem ersten Argument automatisch zu generieren. Was ist anders als sie zu schreiben und dann ein Mixen nur für die "Hintergrundfarbe" zu verwenden. –

Das Problem arbeiten sehen ist, dass Ihr mixin die Variable vergleicht, die mit kommt in eine Farbe.

Sie übergeben die Zeichenfolge 'white', die nicht mit der HTML-Farbe white identisch ist.

Werfen Sie einen Blick auf die SassScript DataTypes. geben Sie

Also, Ihr Sass zu beheben, Sie müssen entweder Ihren Code

=band($name, $color) 
    .band-#{$name} 
    background-color: #{$color} 
    @if $name == 'white' 
     font-size: 100px 
    @else 
     font-size: 20px 

+band('white', $white) 
+band('black', $black)

oder

=band($name, $color) 
    .band-#{$name} 
    background-color: #{$color} 
    @if $name == white 
     font-size: 100px 
    @else 
     font-size: 20px 

+band(white, $white) 
+band(black, $black)

Letzteres wird nichts Brauchbares ändern, wenn Sie in irgendetwas anderes passieren als eine Farbe als erstes Argument.

By the way, können Sie auch den Zustand vereinfachen, indem eine einzeilige wenn im Fall verwenden Sie 3.3 verwenden Sass oder höher: font-size: if($name == white, 100px, 20px)

Quelle

2017-05-23 03:32:56

SASS @if-Anweisung mit Variablenname

Antwort

Verwandte Themen