Geek Answers Handbook

SASS and simple math (complement) of two EM blocks

For some reason, I can never get simple math functions right in SASS. I have a situation where I want to add twice the width of the gutter to the width that I already defined elsewhere. Both are widths in EMS, but it seems that the addition I am doing treats them like strings. Here are some things I've tried:

$width: 18.75em; /* 300px */
$grid-spacing: 2em; 

.column { margin-right: $width + $grid-spacing*2; }

Results in .column { margin-right: 18.75em2em; }

.column { margin-right: $width + ($grid-spacing*2); }

Results in .column { margin-right: 18.75em2em; }

.column { margin-right: $width + #{$grid-spacing*2}; }

Results in .column { margin-right: 18.75em + 2em; }

.column { margin-right: #{$width + #{$grid-spacing*2} };

Results in .column { margin-right: 18.75em + 2em; }

.column { margin-right: #{$width} + #{$grid-spacing*2}; }

Results in .column { margin-right: 18.75em + 2em; }

? SASS Github , . , , , + , , , , , , .

?

+4
1

Re Sass ChangeLog, v3.2.8 , . Sass:

gem install sass

3.2.12, sass -v, Sass:

sudo gem uninstall -Iax sass
sudo gem install sass --pre

:

.column {
  margin-right: 22.75em;
}

: http://sassmeister.com/gist/7780591

-1

More articles:


All Articles