Подключаем SASS к проекту

Нужен САЙТ? Заказуй у меня - Жми сюда! Нужен хостинг или домен? Жми сюда! Хочешь создать интернет-магазин? Жми сюда! (Shopify)

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

Создаем проект

Если у вас уже есть текущий проект, то вам в папке где хранятся файлы стилей необходимо создать файл с расширением scss, например style.scss.

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

Создайте папку css внутри вашего проекта и в ней два пустых файла: style.scss и style.css.
После того как мы создали пустой проект со всеми необходимыми для работы файлами, мы можем подключать SASS.

Как подключить SASS к проекту?

1. Запускаем командную строку, зажав комбинацию клавиш Win+R, появится такое окошко:

в нем вводим команду cmd и жмем ОК.

Откроется командная строка:

Теперь нам необходимо перейти в папку вашего проекта в которой находятся файлы style.scss и style.css.
Вводим букву диска на котором находится ваш проект, моем случае - это Х и после буквы диска ставим двоеточие, жмем Enter.

Пишем команду cd и путь к к папке с файлами стилей, жмем Enter.

Команда cd - изменяет текущую папку (change directory)

Теперь мы можем сказать SASS отслеживать все изменения в файле style.scss и вносить их в файл style.css.
Для этого нужно написать следующую команду:
sass --watch style.scss:style.css

После того как вы ввели эту команду, на экране появится уведомление, что SASS отслеживает изменения. (как на картинки выше)

Теперь вы можете внести правки в файл style.scss, сохранить их и посмотреть что файл в style.css все скомпилировалось

Как видим из примера на картинке выше, в SASS есть принцип наследование и не только он, а много другого о чем мы поговорим в следующих статьях ;)

Нужен САЙТ? Заказуй у меня - Жми сюда! Нужен хостинг или домен? Жми сюда! Хочешь создать интернет-магазин? Жми сюда! (Shopify)

Делясь ссылкой на пост в социальных сетях - Вы помогаете развитию блога! Спасибо ;)

(3 голосов. Рейтинг: 5,00 из 5)
Loading...Loading...

Рубрика: SASS

Комментарии (7)

| RSS комментария

  1. Александр:

    Поставил я джем. Один раз в Терминале забил команду, чтобы файлы компилировались — «sass —watch input.scss:output.css».
    Сохраняешь SCSS, результаты не видны в CSS — приходится по-новой давать команду Терминалу, хотя это неправильно, так как —watch говорит программе о постоянном мониторинге. Геморрой какой-то с этим SASS!:-(

    • Дмитрий Британ:

      Вы работает с SASS через терминал, вводите команду watch один раз и не закрывая терминал, вносите правки в ваш SCSS файл.
      т.е. ваш scss файл будет мониториться при открытом терминале, как только терминал закроете все правки в scss файле не будут отображаться в исходном css.

      По поводу самого SCSS, то им в любом случае придется пользоваться, если вы хотите развиваться в области верстки :)

      • Александр:

        Дим, в «Coda» открыты две вкладки: одна css, другая — scss. При сохранении документа .scss (Cmd + S), никаких изменений в .css не происходит. Приходится в терминале вводить «sass —watch input.scss:output.css», тогда все сохраняется. Да, терминал всегда открыт. Сложности возникли с определением директорий, пытался прописать путь до папки с сайтом — ничего. Закинул два файла в пользовательскую папку — пока норм. Привык уже, переписал практически весь css-документ — сократился на 50%. Нравится.
        В основном, все мануалы написаны для Windows. Для Mac’a очень мало информации.
        Забегая наперед, хочется узнать, как быть далее с этими документами — сервер будет компилировать scss в css?

  2. Александр:

    Все рекомендуют еще установить Compass. Жду Вашего мнения касаемо моей проблемы, скажем так. Вроде все хорошо, но для обновления css, приходится по-новой вбивать в Терминал.

    • Дмитрий Британ:

      Тут нужно гуглить, может у кого есть подобная проблема.
      Могу лишь посоветовать использовать GULP http://gulpjs.com/ тогда у вас полностью автоматизируется процесс сборки SCSS файлов, поддержка последних версий браузеров (псевдо префиксы), выгрузки конечного css в нескольких вариантах (например минимизированный и полный) и многое что позволяют делать вам gulp плагины станет доступным.

  3. Евгений:

    С одним файлом scss понятно, спасибо. А как компелировать несколько scss файлов в один css?

  4. Александр:

    Здравствуйте, где вы нашли такую замечательную красную кнопку? И откуда её можно скачать себе?

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