Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Sass

Следим и компилируем Sass, за пять быстрых шагов

by
Read Time:2 minsLanguages:

Russian (Pусский) translation by Lexie Bykova (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Sass — возможно самый популярный препроцессор CSS; годами он помогал нам писать чистый, многоразовый и модульный CSS. В этом кратком руководстве я расскажу о том, что важно, и объясните, как скомпилировать Sass в CSS, используя командную строку.

1. Установка Node.js

Чтобы скомпилировать Sass через командную строку, для начала нам нужно установить node.js. Загрузите его с официального сайта nodejs.org, распакуйте и следуйте помощнику.

2. Инициализация NPM

NPM - это менеджер пакетов для Node на языке JavaScript. NPM упрощает установку и удаление сторонних пакетов. Для инициализации проекта Sass с помощью NPM, откройте ваш терминал и  перейдите в каталог вашего проекта, используя команду CD (смените каталог).

Navigating to SASS-tutorial folderNavigating to SASS-tutorial folderNavigating to SASS-tutorial folder
Переход к папке проекта Sass

Как только вы добрались до нужной папки, выполните команду npm init. Вас попросят ответить на несколько вопросов о вашем проекте, после чего NPM сгенерирует файл package.json в вашей папке.

packagejsonpackagejsonpackagejson

3. Установка Node-Sass

Node-sass это пакет NPM, который компилирует Sass в CSS (и делает это очень быстро). Для установки node-sass выполните в терминале следующую команду: npm install node-sass

4. Пишем команду Node-sass

Всё готово для написания маленького скрипта для компилирования Sass. Откройте файл package.json в вашем редакторе кода. Вы увидите что-то вроде этого:

В разделе scripts добавьте scss команду, в свойстве test, как показано ниже:

Давайте рассмотрим эту строку по словам.

  1. node-sass: Ссылается на пакет node-sass.
  2. -watch: Дополнительный флаг, который означает “следить за всеми .scss файлами в папке scss/ и перекомпилировать их каждый раз когда они изменяются.”
  3. scss: Название папки, куда мы положим все наши .scss файлы.
  4. -o css: Папка куда выдаются скомпилированные CSS.

При запуске этого скрипта, он будет следить за каждым .scss файлом в папке scss/, затем сохранять скомпилированный css в папке css/, каждый раз, когда мы изменяем .scss файл.

5. Запускаем скрипт

Для выполнения нашего одностраничного скрипта, нам нужно запустить в терминале следующую команду: npm run scss

И вуаля! Мы следим и компилируем SASS.

Быстрый совет Sass

Оставайтесь на связи, чтобы получить больше быстрых советов Sass.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.