SASS largeur dynamique

Question

J'utilise

.w400 { 
    width: 400px; 
} 

.w110 { 
    width: 110px; 
} 

.w600 { 
    width: 600px; 
} 

est-il possible de rendre la classe dynamique avec SASS?

quelque chose comme

.w(size) { 
    width: size+px 
} 

Answer 1

Si vous voulez être en mesure d'utiliser les classes .w(something) arbitraires, je crois (voir ci-dessous) qui est impossible avec Sass. Cependant, si vous connaissez au préalable les tailles dont vous avez besoin, vous pouvez utiliser mixins avec des arguments pour générer les classes. Quelque chose comme ceci:

@mixin width-class($size) { 
    .w#{$size} { 
    width: $size * 1px; 
    } 
} 

On peut l'utiliser comme ceci:

@include width-class(400); 
@include width-class(110); 

Cela génère le CSS suivant:

.w400 { 
    width: 400px; } 

.w110 { 
    width: 110px; } 

Maintenant, si vous voulez éviter d'écrire une nouvelle ligne @include pour chacune des classes, vous pouvez créer un autre mixins (ou combiner les deux mixins en un seul):

@mixin dynwidths($size-list) { 
    @each $size in $size-list { 
    @include width-class($size) 
    } 
} 

Vous pouvez maintenant lui transmettre une liste de largeurs. Cela génère le même CSS comme ci-dessus:

@include width-classes(400 110); 

---

Note: Ceci est juste une supposition, mais les noms de classes génériques pourrait être possible par l'extension Sass avec Ruby. Cependant, je ne suis pas sûr si c'est une caractéristique souhaitable.