Sass Is Concatenating Instead of Adding

Sass is concatenating instead of adding?

Assuming $currentWidth is an integer.

SASS:

$currentWidth: 30;

#example {
  width: unquote( ($currentWidth + 349) + 'px ' + !important );
}

CSS OUTPUT:

#example {
  width: 379px !important;
}

You can test it here:

http://sass-lang.com/try.html

How to concatenate Sass variables

Multiple issues here, the correct syntax is

$url: 'siteurl.com';

#some-div{
  background-image: url($url + '/images/img.jpg');
}

• When you assign a value to the variable, you need to use : and not =
• You should quote the image path as it's a string.
• Remove the stray + symbol before $url

You can see the above code in action at SassMeister

Concatenating nested classes using SASS

&

You can achieve this with the ampersand operator. Try:

.a .c
  display: inline-block

  &.date
    width: 50px

The ampersand is a placeholder for parent selectors. And if you don't place a space after it in a nested selector it will output a concatenated selector (just what you want).

DEMO

---

^{Note: in deeper nested selectors & stands for the whole path of nested selectors not just for the immediate parent.}

concatenate strings using sass

$fractions:'';
@for $i from 1 through 4 {
    $fractions : $fractions + 1fr + ' ';
    .grid-#{$i} {
        grid-template-columns: #{$fractions};
        display: block;
    }
}

SCSS mixin, how to concatenate units? (px,%,em)

Try this solution. It works.

@for $i from 1 through 100 {    
   .bg-#{$i} {
     $percentage: unquote("%");
     width: #{$i}$percentage;
   }
}

Or this:

 @for $i from 1 through 100 {    
  .bg-#{$i} {
    width: #{$i}unquote("%");
  }
}

Colors are not concatenating correctly in Sass

This is because Sass treats all colors as their hex value, regardless if they're named like pink. They're all hex values under the hood. Per the Sass Documentation:

Colors

Any CSS color expression returns a SassScript Color value. This includes a large number of named colors which are indistinguishable from unquoted strings.

The emphasis is mine. The documentation states that the color value is returned, which is the hex value. The included link also shows that named colors such as pink are just hex values under the hood. To address the adding issue, refer to the documentation again:

Color Operations

All arithmetic operations are supported for color values, where they work piecewise. This means that the operation is performed on the red, green, and blue components in turn. For example:

p {
  color: #010203 + #040506;
}

computes 01 + 04 = 05, 02 + 05 = 07, and 03 + 06 = 09, and is compiled to:

p {
  color: #050709; }

The same principle applies here. When you use addition on colors, you aren't concatenating them like strings, so pink + red is not pinkred. Instead, the hex values are added piecewise. Here's an example:

$blue: blue;
$red: red;

p {
    color: $blue + $red
}

This yields:

p {
    color: magenta
}

From the example above, you can see that this does not perform string concatenation, but it's adding blue (#0000FF) and red (#FF0000) to create magenta (#FF00FF). In your case, pink (#FFC0CB) and red (#FF0000) are added piecewise to produce #FFC0CB, which is just pink. That's why you get pink instead of pinkred.

If you want to concatenate them like strings, do not use+. Instead, you can try string interpolation so the colors are treated as strings, not colors:

p {
    color: $helloWorld#{$secondString}
}

That will yield:

p {
    color: pinkred
}

You can also use a more verbose method so that it's forced to act like a string (unquote just gets rid of the quotes):

p {
    color: unquote($helloWorld+ "" + $secondString);
}

Try it at SassMeister. Note that pinkred isn't a named colors in Sass.

SCSS interpolation error, trying to concatenate a percentage sign after a variable in a loop

So I don't know why I would get that error on my Ubuntu machine and not my OSX machine, maybe its the node version. But I was able to fix it by changing the interpolation of #{$distance} to #{$distance+'%'}

---

Related Topics