Операции со строками

Операция конкатенации строк осуществляется при помощи символа +. Например:

p {
  cursor: e + -resize;
}

p
  cursor: e + -resize

p {
  cursor: e-resize;
}

Обратите внимание, что, если мы к строке без кавычек добавляем строку в кавычках (строка без кавычек слева от знака + ), то результатом будет строка без кавычек. И, наоборот, если мы к строке в кавычках прибавляем строку без кавычек, результатом будет строка в кавычках. Например:

p:before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
}

p:before
  content: "Foo " + Bar
  font-family: sans- + "serif"

p:before {
  content: "Foo Bar";
  font-family: sans-serif;
}

По-умолчанию, если два значения находятся рядом друг с другом, они объединяются через пробел:

p {
  margin: 3px + 4px auto;
}

p
  margin: 3px + 4px auto

p {
  margin: 7px auto;
}

Возможно использование интерполяции #{} для размещения динамических значений в строке:

p:before {
  content: "Я съел #{5 + 10} пирогов!";
}

p:before
  content: "Я съел #{5 + 10} пирогов!"

p:before {
  content: "Я съел 15 пирогов!";
}

Значение null обрабатывается как пустая строка в интерполяции:

$value: null;
p:before {
  content: "Я съел #{$value} пирогов!";
}

$value: null
p:before
  content: "Я съел #{$value} пирогов!"

p:before {
  content: "Я съел   пирогов!";
}