Prevent Sass from making quotes arround value

Question

I am quiet new to Sass... I want to create some css with percentage values like:

width : 13%;

The value is the result of a sass number operation. Writing this

width : $main-width + "%"

scss code generates this:

width : "13%";

css, what is actually not working because it should be:

width : 13%;

writing

width : $main-width %;

results in

width : 13 "%"

what also leads to a non working css-rule. Is there a way to make Sass print 13% plain, with no quotes?

score 15 · Accepted Answer · answered Mar 25 '12 at 17:27

Think of units in Sass like variables in algebra instead of just concatenating strings.

In algebra: 2x * 3 = 6x

In Sass: 13 * 1% = 13%

Use this approach to do more advanced math. 10px * 3px = 30px*px

But px*px isn't a valid CSS unit so you have to cancel one out by dividing by 1px

30px*px / 1px = 30px

Hope this helps beyond your original question.

score 14 · Answer 2 · answered Mar 24 '12 at 18:10

14

unquote("%") does the trick.

answered Mar 24 '12 at 18:10

philipp

15,947
15
61
106

1

Yes, unquote is the right answer! Read more at: http://sass-lang.com/documentation/Sass/Script/Functions.html#unquote-instance_method. Also imortant to know since 9 december 2015 Sass changed certain ways of using #{} and quotes: http://sass.logdown.com/posts/308328-cleaning-up-interpolation – Ben Besuijen Dec 14 '15 at 09:58

score -2 · Answer 3 · answered Sep 05 '14 at 14:27

You could try #. I had a similar problem with a mixin and lists

@mixin p($value, $position: a, $unit: $rhythm-unit){
  $vallist: ();
  @if length($value) > 1 {
    @each $sval in $value {
      $sval: 0 !default;
      $vallist: append($vallist, #{$sval}#{$unit});
    }
    padding: $vallist;
  } @else{
    @if $position == t {
      padding-top: $value+$unit;
    } @else if $position == r {
      padding-right: $value+$unit;
    } @else if $position == b {
      padding-bottom: $value+$unit;
    } @else if $position == l {
      padding-left: $value+$unit;
    } @else {
      padding: $value+$unit;
    }
  }
}

The problem was

append($vallist, $sval+$unit);

It always added quotes around these values e.g. "1rem" "1.25rem" which is not a correct css syntax.

I replaced it with:

append($vallist, #{$sval}#{$unit});

As you can see i use #-sign with {} and + it not necessary any more. The very interesting here is that this only appear with lists/append as you can see in my outer else. You could find it at the sass reference page Division and slash If you want to use variables along with a plain CSS /, you can use #{} to insert them. For example: p { $font-size: 12px; $line-height: 30px; font: #{$font-size}/#{$line-height}; }

Hope it helps

How does this add anything over the other answers? This is a pretty terrible solution because using interpolation always gives you a string, while using arithmetic (as suggested by the highest voted answer) gives you another length that you can use for further calculations. — cimmanon, Sep 05 '14 at 14:38
Sorry but i didn´t understand your comment in total because my english is not the best and also im new in sass. My answer is only another way. Anyway it works very well. Can you give me a better solution than my one for my specific problem? — ntiedt, Sep 05 '14 at 15:39

Prevent Sass from making quotes arround value

3 Answers3