Pages Menu Stijit.com
Twitter
Categories Menu
Как установить Sass (SCSS) на Mac и скомпилировать в CSS

Как установить Sass (SCSS) на Mac и скомпилировать в CSS

Прежде всего уточним что такое Sass. Абревиатура SASS расшифровывается как Syntactically Awesome Style Sheets дословно переводится как синтетически потрясающие таблицы стилей. Установка sass или scss довольно проста — давайте разберем ее по шагам.

Как установить Sass (SCSS) на Mac

Для того чтобы установить Sass (он же будет обрабатывать и все scss файлы) на Mac, сначала установим джем для sass. Вводим в терминал команду:

sudo gem install sass

Затем вводим sudo пароль и смотрим как ставится джем.

Как установить Sass (SCSS) в Sublime Text

    Для того, чтобы синтаксис Sass и scss правильно распознавался у вас в Sublime Text, нужно установить пакет Sass:

  1. Заходим в Sublime Text и идем в Tools — Command Palette
  2. В появившуюся строку вводим Package Control и в выпадающем меню выбираем Package Control: Install Package
  3. В появившейся строке вводим Sass и выбираем его
  4. Немного ждем пока установится пакет и вуаля — теперь в правом нижнем углу, помимо всех остальных форматов, мы можем выбирать Sass. Но это еще не все.
  5. Чтобы и в дальнейшем у вас все scss файлы сразу открывались с форматированием и синтаксисом sass — открываем новый scss файл, идем в View — Syntax — Open all with current extension as … — Sass.

Как перекомпилириовать Sass (SCSS) в CSS. Преобразование SCSS в CSS

    Как препроцессить Sass (scss) в CSS в терминале:

  1. Для того, чтобы препроцесить (скомпилировать) наш .scss файл в обычный .css запустим в терминале команду:
    sass input.scss:output.css
    
  2. Чтобы не повторять ее постоянно, а включить автоматический препрцессинг (преобразование) как только что-то меняется в .scss файле применим следующую команду:
    sass --watch input.scss:output.css
    

12 Коммент.

  1. Здравствуйте!
    Помогите, пожалуйста, сделал все по Вашей инструкции: Терминал «говорит», что следит за файлами в директории, но при сохранении документа scss, изменений в css не происходит. Как быть?

    • Нормально ли все компилируется если вы запускаете преобразование из sass в css вручную при помощи sass input.scss:output.css?

      • Ради интереса сохранил в «пользовательскую» папку, вбил команду sass input.scss:output.css в Терминал, изменения он сохранил, а вот при попытке заставить Терминал постоянно отслеживать файлы — ничего не получается — приходится постоянно прибегать к команде sass —watch /путь до папки с файлами scss/:/путь до папки с css/. В фоновом режиме в css ничего не сохраняется. У вас же тоже Mac, правильно?

        • Да, а что пишется в терминале после того, как вы вводите

          sass --watch input.scss:output.css

          ? Установлен ли у вас Ruby и джем Sass? Если у вас все правильно настроено, то в терминале должно выводиться: >>> Sass is watching for changes. Press Ctrl-C to stop.

        • Ruby установлен на Mac по-умолчанию. Джем устанавливал. Да, все верно. Именно так в Терминале и выводится. Вечером скину скрин.
          Такой вопрос: допустим, я закончил работать с scss, проект готов, далее как быть? Выгружать скомпилированный css на хостинг, либо scss, который сервер, либо браузер перекомпилирует в css? Вот этот момент мне непонятен. Разъясните, пожалуйста. Покупка Compass.app обеспечит оптимальную работу с scss без Терминала. Вот хочу купить.

        • Зависит от того, на чем у вас проект написан — если на Ruby, то можете загружать scss файлы — они будут автоматически компилироваться в css. Если нет, то нужно загружать уже скомпилированные css файлы на хостинг.

          Проверьте какая у вас версия Ruby и Sass — и если нужно, то обновите. По умолчанию в Mac идет Ruby 1.9.* — стоит обновить как минимум до 2.1.1.

  2. Ок, сегодня проверю и отпишусь. Использую только scss, а более на Ruby ничего нет. Хостинг для этих целей должен чем-то отличаться от обычного средней ценовой категории?

    • Если сайт написан на Ruby, то для него нужен специальный хостинг (там должно быть указано, что он поддерживает Ruby).

      • Проверил следующие данные в Терминале:
        1. Версия SCSS — 3.4.10;
        2. Вот такую команду приходится все время выполнять, чтобы сохранить изменившийся SCSS в CSS;
        3. Пытался установить RVM — выдает следующую ошибку;
        4. Версия Ruby — 2.0.0p481;
        Пока ничего сделать не могу, так как не устанавливается RVM.
        Вот скрины: yadi.sk/d/lfiS4mrReQyjZ.

        • Попробуйте обновить Ruby до 2.1.1. Также установите Sass без sudo — gem install sass. Также обратите внимание, что вам нужно четко указывать имена и расширения scss и css файлов:

          sass --watch myfile.scss:myfile.css
  3. Так я прописал путь до папки sass, там лежат сам файл, миксины, ресет и т. д., и путь до файла css. Разве неправильно?

    • Нет — нужно в терминале перейти в папку с обоими файлами, а затем запустить команду отслеживания, указав в ней точное название scss файла:css файла

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *