Задать вопрос
@Fly3110
web developer

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

Всем привет.

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

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


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

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


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

Если же подсунуть этот файл стилей webpack'у, то он абсолютно нормально генерит
@media (min-width: 769px) {
            ...
  	}


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

Спасибо
  • Вопрос задан
  • 135 просмотров
Подписаться 2 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 1
jj_killer
@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
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы