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

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

by
Difficulty:IntermediateLength:ShortLanguages:

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

Final 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 folder
Переход к папке проекта Sass

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

packagejson

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
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.