Почему ошибка при компиляции SCSS?

Question

[dhat]

При компиляции Галп выбивает ошибку:

events.js:160
      throw er; // Unhandled 'error' event
      ^
Error: source/scss/base/_mixins.scss
Error: Invalid CSS after "...180px !default;": expected 1 selector or at-rule, was "=from($device)"
        on line 5 of source/scss/base/_mixins.scss
>> $widescreen: 1180px !default;
   -----------------------------^

    at options.error (/home/jd/flexboxgrid/node_modules/node-sass/lib/index.js:283:26)

Вот кусочек кода где указывает ошибку:

// Responsiveness

$tablet: 769px !default
$desktop: 980px !default
$widescreen: 1180px !default

=from($device)
  @media screen and (min-width: $device)
    @content

=until($device)
  @media screen and (max-width: $device - 1px)
    @content

Что значит expected 1 selector or at-rule, was "=from($device)" - где ошибка?

Answer 1

[Евгений]

Код который вы показали это SASS код - у вас расширение scss, соот-но нужно расставить скобки и точку с запятой

Comments

[dhat]

Так и знал, что не надо было курить траву сегодня вечером))

[Sergei Nazarenko]

dhat: и миксины отличаются там = против @mixin, + против @include Лучше использовать scss синтаксис ибо он обратно совместим с css и любой сss файлы будет валидным в sass sass-lang.com/guide

[zooks]

Sergei Nazarenko: что за бред насчет "обратно совместим". Это валидный CSS совместим с scss, а не наоборот.

[Sergei Nazarenko]

zooks: тем что css это стандарт а sass это язык так вот стандарт не может быть совместим с языком а вот наоборот- очень даже

[Sergei Nazarenko]

Sergei Nazarenko: а обратно это то что sass компилируется в css а потом кушается браузером а не наоборот

[Sergei Nazarenko]

zooks: CSS COMPATIBLE
Sass is completely compatible with all versions of CSS. We take this compatibility seriously, so that you can seamlessly use any available CSS libraries. это с офф сайта как то

[zooks]

Sergei Nazarenko: да, по терминологии согласен. Но все-равно эта совместимость нафиг не нужна. Только для новичков, что хреначат копипастой. Лично мне больше нравится синтаксис SASS. Да и в принципе второй синтаксис можно заменить и Less.js и плагином PostCSS, так что я бы не назвал это киллер-фичей, которую нужно рекомендовать всем без разбора.

[Sergei Nazarenko]

zooks: А по мне так синтаксис sass больше для перфекционистов подходит нежели для профессионалов ибо один неправильный отступ может сломать всю логику и потом попробуй отыскать тот самый отступ среди тысяч строк кода, например вот такой код будет скомпилирован непонятно во что

.text
  color: red
    font-family: Arial
  font-size: 20px

и профессионалы чаще выбирают scss ибо он более читаем. Но тут на вкус и цвет фломастеры разные.

[zooks]

Sergei Nazarenko: кроме SASS есть еще Jade. Оба делаем на индентации в два пробела и получается красота.
Ваш пример просто выбьет ошибку, т.к. отступ идет раньше объявления селектора. Как сказал выше, я бы не стал навязывать под таким соусом: что синтаксис scss для всех, а особенно для профессионалов. Иначе это обычная манипуляция общественным мнением. Вот чуть подробнее почему стоит попробовать синтаксис SASS: https://youtu.be/-Z3qznaE9vc (англ.)

[Sergei Nazarenko]

zooks: не не вызовет я проверял оно компилирует среднее свойство как color-font-family: и опять же это субьективное мнение чувака на видео. Опять же из-за того что синтаксис scss появился позже sass(который так же был изменен) возникает вопрос, а нафига если он такой весь чистый и идеальный было его усложнять и делать дополнительный синтаксис? PS: У того же less он один. И пора заканчивать этот холивар как я уже сказал на вкус и цвет фломастеры разные.

[Sergei Nazarenko]

Sergei Nazarenko: тут все дело в том что спецы делятся на два типа которые ненавидят кавычки скобочки и вторая категория те которым пофиг.

[zooks]

Sergei Nazarenko: отвечу на вопрос. Scss ввели для захвата аудитории Less. И шаг этот был правильным.

[Sergei Nazarenko]

zooks: SCSS как раз таки появился для совместимости с CSS и не о каком захвате аудитории LESS речи там не шло не выдумывайте.

[dhat]

Кстати, мне не понадобилось "расставлять запятые" (я бы АХРЕНЕЛ их расставлять, и там ДАЛЕКО не одни запятые нужны, разница в синтаксисе ОГРОМНАЯ между Сасс и СЦСС, и нету ниодного рабочего конвертера). Я просто поменял расширение файла на Sass и gulp-sass все прочитал.

[Виолетта Морозова]

dhat: молодец! а-то насоветуют тут всякую чушь)