comment créer des tailles d'ombre portée différentes dans SASS?

Question

Je sais que cela ne va pas être utilisé de façon pratique, mais comment créer une ombre portée différente?

.item-title a { 
    display: inline-block; 
    color: $some_lovely_button; 
    box-shadow: $some_boxshadow_love px; 
} 

Puis-je réellement faire un espace après la variable? Sera-t-il capable de lire maintenant si j'analyse par ex. 5 à la variable, alors il mettra 5 px; Évidemment, si je mets $ some_boxshadow_lovepx, c'est une variable complètement différente. J'espère que ce que je veux accomplir est clair: D Merci!

Answer 1

Vous pouvez utiliser des méthodes de concaténation ou d'interpolation.

.item-title a { 
    display: inline-block; 
    color: $some_lovely_button; 
    box-shadow: #{$some_boxshadow_love} px; 
    box-shadow: {$some_boxshadow_love} + px; 
    } 

Answer 2

Il suffit d'utiliser un mixin

=shadow($pixel, $pixel2, $pixel3, $color) 
    box-shadow: $pixel, $pixel2, $pixel3, $color 

Lorsque vous l'utilisez

+shadow(2px, 2px, 0, green) 

Ou

+shadow(5px, 3px, 5px, red) 

De cette façon, vous pouvez créer tout ce que la taille ou le type que vous voulez partout. BTW J'utilise sass, pas scss