CODEWITHSUNDEEP
sass
Schlaus
Schlaus

Reputation: 19212

Changing one property in a Sass variable with multiple properties

I have a Sass variable $box-shadow containing the value 10px 10px 1px 0 rgba(0,0,0,.3);

I would like to define another variable $box-shadow-alt in which the h-shadow property (the first 10px in this case) should be an inverse of that in the original variable. Is there a Sassy way of changing just one property of a multi-property definition, without redeclaring the whole variable?

To demonstrate, this should be the end result:

$box-shadow:      10px 10px 1px 0 rgba(0,0,0,.3);
$box-shadow-alt: -10px 10px 1px 0 rgba(0,0,0,.3);

Upvotes: 1

Views: 233

Answers (1)

cimmanon
cimmanon

Reputation: 68339

Your variable contains a list. That means you can use any of the list manipulation functions to do operations on it. The functions you're needing here are set-nth and nth.

$box-shadow:     10px 10px 1px 0 rgba(0,0,0,.3);
$box-shadow-alt: set-nth($box-shadow, 1, nth($box-shadow, 1) * -1);

Upvotes: 2

Related Questions