Sass bedingte Eingabe mixin

Question

Also, ich möchte eine bedingte Sass-Klasse erstellen, die ein Argument übernimmt und eine Klasse basierend auf diesem Argument erstellt. Ich bin mir nicht einmal sicher, wie das heißen würde. Beispiel:

<img class="width-200" .../> 

wo ich eine Art von Sass mixin schaffen würde, die in dem Wert nach dem nehmen würden ‚-‘ und dann eine Breite ausspucken: [Eingabe] + ‚px;‘.

Gibt es so etwas in SASS? Was würde ich das überhaupt so nennen, um die richtige Frage zu stellen?

Answer 1

Wenn ich Sie richtig verstehe, dann denke ich, das ist, was Sie suchen. Sie können einen einfachen Mix erstellen, um basierend auf einer Variablen eine Klasse oder ein Attribut zu erstellen, und wie in den Kommentaren erwähnt, können Sie eine Schleife über eine Map ziehen, um eine Reihe von Klassen zu erstellen.

// mixin that outputs a class 
@mixin width-class($width) { 
    .width-#{$width} { 
    width: #{$width}px; 
    } 
}; 

@include width-class(234); 
// .width-234 { 
// width: 234px; 
// } 


// mixin that outputs an attribute 
@mixin width-attr($width) { 
    width: #{$width}px; 
}; 

div { 
    @include width-attr(567); 
} 
// div { 
// width: 567px; 
// } 


// Loop using a mixin with a map to create classes 
$width-map: (
    100, 
    200, 
    300, 
    400 
); 

@each $width in $width-map { 
    @include width-class($width); 
} 
// .width-100 { 
// width: 100px; 
// } 
// .width-200 { 
// width: 200px; 
// } 
// .width-300 { 
// width: 300px; 
// } 
// .width-400 { 
// width: 400px; 
// }