how to make this sass work

Question

I have non-sass:

.rounded-corners {
  -moz-border-radius-topleft: 4px;

and want to do something like:

$radius_size: 4;

.rounded-corners {
  -moz-border-radius-topleft: #{$radius_size}px;

or

.rounded-corners {
  -moz-border-radius-topleft: $radius_sizepx;

but these won't work. What is the syntax for this call?

thx

score 0 · Accepted Answer · answered May 19 '12 at 01:47

0

What version of sass are you using? Your first example (-moz-border-radius-topleft: #{$radius_size}px;) should work. It does for me on 3.1.16.

answered May 19 '12 at 01:47

x1a4

19,417
5
40
40

`sass (3.1.15, 3.1.10, 3.1.8, 3.1.7) sass-rails (3.1.5, 3.1.4, 3.1.2, 3.1.0)` – timpone May 19 '12 at 02:04
wierd seems - to be working now; maybe an unrelated error – timpone May 19 '12 at 02:05
Cool. If you ever need to know the exact version of a gem you're using in your app, and are using bundler, you can do a `bundle show `, e.g. `bundle show sass` and it will show the exact gem you're using. – x1a4 May 19 '12 at 02:06

score 0 · Answer 2 · answered May 19 '12 at 02:06

Your first option (using interpolations) does look like it should work:

$radius_size: 4;
.rounded-corners {
  -moz-border-radius-topleft: #{$radius_size}px;
}

Generally, though, I think it's best to store the units in the variable itself, since SASS will automatically convert between units (if it can) when you use the variable in arithmetic expressions:

$radius_size: 4px;
.rounded-corners {
  -moz-border-radius-topleft: $radius_size;
}

score -1 · Answer 3 · answered May 19 '12 at 03:15

Also consider using Compass. With it you can write:

$radius_size: 4px;
.rounded-corners {
  +border-top-left-radius($radius_size);
}

And this automatically produces:

.rounded-corners {
  -moz-border-radius-topleft: 4px;
  -webkit-border-top-left-radius: 4px;
  -o-border-top-left-radius: 4px;
  -ms-border-top-left-radius: 4px;
  -khtml-border-top-left-radius: 4px;
  border-top-left-radius: 4px;
}

how to make this sass work

3 Answers3