CODEWITHSUNDEEP
csshtmlsass
Naigel
Naigel

Reputation: 9644

SASS sum of dimensions

I have the following SCSS code:

#appMain {
    margin-right: 25em + 1em;
}

#appLeft {
    float: left;
    width: 100%;
    padding-left: 1em;
}

#appRight {
    float: right;
    width: 25em;
    margin-right: -25em - 1em;
}

Now I want to use parameters, so I created 2 variables

$rightDimension: "25em";
$marginBetween: "1em";

When I change the code this way

#appMain {
    margin-right: $rightDimension + $marginBetween;
}

Instead of getting 26em, I now get 25em1em resulting in invalid css and thus, the property doesn't apply.

What am I doing wrong? How can I do this simple math with SASS?

Upvotes: 0

Views: 2522

Answers (1)

Christoph
Christoph

Reputation: 51241

Since you quoted the values, Sass treats them as strings rather than values and does a concatenation instead of an addition (like Javascript would do it as well).

Simply omit the quotes to make it work.

$rightDimension: 25em;
$marginBetween: 1em;

working example

Upvotes: 3

Related Questions