2017-04-25 3 views
1

Ich habe eine SCSS-Zeichnung, die ich arbeite mit einer großen Anzahl von Box Schatten auf ein Element. Als ich jedoch mit der Zeichnung fertig war, erkannte ich, dass ich die Zeichnung viel kleiner brauchte. Gibt es eine Möglichkeit, alle Zahlenwerte mit einer Sass-Funktion zu halbieren oder zu mischen? Hier ist ein Link zu meinem codepen. Hier ist mein Code:Halbieren aller Zahlen in SCSS-Blatt

HTML

<div class="bowser"></div> 

SCSS

.bowser { 
    height: 0.98em; 
    width: 0.98em; 
    box-shadow: 
    /* row 1 */ 
    12em 0 $w, 
    13em 0 $w, 
    14em 0 $w, 
    /* row 2 */ 
    8em 1em $g, 
    9em 1em $g, 
    10em 1em $w, 
    11em 1em $w, 
    12em 1em $w, 
    13em 1em $t, 
    /* etc. etc. */ 
} 

Wenn dies nicht möglich ist Sass verwendet wird, ist es eine Möglichkeit, es mit einem Compiler-ähnlichen Dienst zu tun? Danke für die Hilfe!

Antwort

2

Ja. Hier ist die aktualisierte CodePen http://codepen.io/anon/pen/xdEQXV?editors=1100

@mixin box-shadow-mixin($divide) { 
    box-shadow: 12em/$divide 0 $w, 
    13em/$divide 0 $w, 
    14em/$divide 0 $w, 
    8em/$divide 1em/$divide $g, 
    etc... 
} 

Und dann sind auf diese Weise:

.bowser { 
    height: 0.95em; 
    width: 0.95em; 
    @include box-shadow-mixin(4); 
} 
+1

Wow! Vielen Dank. Wie hast du das so schnell geschrieben? –

+0

geschrieben an dieser Stelle eine Menge Mixins :) – mcranston18

+0

Haha, ich bin immer noch schockiert ... –

Verwandte Themen