Разная обработка SASS интерполяции в Webpack и sass-rails. Кто прав и как уговорить sass-rails работать так же, как Webpack?

Question

[Антон Иванов]

Всем привет.

Есть у меня в купленном шаблоне вот такая конструкция:

@media (min-width: #{$some_var} + 1px) {
            ...
  	}

sass-rails (согласно документации SASS, насколько я понимаю) генерит вот такой код:

@media (min-width: 768px (+ 1px)) {
            ...
  	}

Который, естественно, не работает.

Если же подсунуть этот файл стилей webpack'у, то он абсолютно нормально генерит

@media (min-width: 769px) {
            ...
  	}

Вопрос, можно ли достичь такого же с sass-rails?

Спасибо

Answer 1

[jj_killer]

В этом плане SASS очень нестабильная штука и многое зависит от версии, даже если просто взять рубишный джем, выходит так:

sass 3.2:

@media (min-width: 768px +1px) {
  ... }

sass 3.3, 3,4:

@media (min-width: 768px (+1px)) {
  ... }

sass 3.4.25:

DEPRECATION WARNING on line 4:
#{} interpolation near operators will be simplified in a future version of Sass.
To preserve the current behavior, use quotes:

  unquote("#{$some_var} + 1px")

You can use the sass-convert command to automatically fix most cases.

@media (min-width: 768px (+1px)) {
  ... }

А в 4.0.0.alpha.1 вообще все вот так выглядит:

@media (min-width: 768px1px) {
  ... }

Так что советую пройтись по стилям и убрать эту ненужную строковую интерполяцию, в таком виде она уже сейчас отмечена как устаревшая. И я бы на вашем месте подумал бы о чем-то попроще для будущего, вроде PostCSS.

UPD: я тут посмотрел, что webpack использует биндинги для libsass и там как раз такое поведение и реализовано:

@media (min-width: 769px) {
  ... }

Так что есть смысл посмотреть в сторону https://github.com/sass/sassc-rails