CODEWITHSUNDEEP
csssass
Jacob Birkett
Jacob Birkett

Reputation: 2135

Split variables in SASS / SCSS

I have a SASS variable like the following:

$surrounding-margin: 0 40px;

And I'm using it like this (the irrelevant properties have been removed):

#content {
  margin: $surrounding-margin;

  & #close {
    margin-right: -$surrounding-margin[1]; // If this was JS.
  }
}

Obviously, -$surrounding-margin[1] won't work. What will? I need the second value of the variable, in the negative. How can I do this?

Upvotes: 2

Views: 877

Answers (1)

cyr_x
cyr_x

Reputation: 14267

Just use for example nth because it's just a list:

$surrounding-margin: 0 40px;

#content {
  margin: $surrounding-margin;

  & #close {
    margin-right: -(nth($surrounding-margin, 2));
  }
}

Upvotes: 5

Related Questions