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

Sass — возможно самый популярный препроцессор CSS; годами он помогал нам писать чистый, многоразовый и модульный CSS. В этом кратком руководстве я расскажу о том, что важно, и объясните, как скомпилировать Sass в CSS, используя командную строку.
1. Установка Node.js
Чтобы скомпилировать Sass через командную строку, для начала нам нужно установить node.js. Загрузите его с официального сайта nodejs.org, распакуйте и следуйте помощнику.
2. Инициализация NPM
NPM - это менеджер пакетов для Node на языке JavaScript. NPM упрощает установку и удаление сторонних пакетов. Для инициализации проекта Sass с помощью NPM, откройте ваш терминал и перейдите в каталог вашего проекта, используя команду CD (смените каталог).

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

3. Установка Node-Sass
Node-sass это пакет NPM, который компилирует Sass в CSS (и делает это очень быстро). Для установки node-sass выполните в терминале следующую команду: npm install node-sass
4. Пишем команду Node-sass
Всё готово для написания маленького скрипта для компилирования Sass. Откройте файл package.json в вашем редакторе кода. Вы увидите что-то вроде этого:
{ "name": "sass-tutorial", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" }
В разделе scripts добавьте scss команду, в свойстве test, как показано ниже:
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "scss": "node-sass -watch scss -o css" }
Давайте рассмотрим эту строку по словам.
-
node-sass
: Ссылается на пакет node-sass. -
-watch:
Дополнительный флаг, который означает “следить за всеми .scss файлами в папке scss/ и перекомпилировать их каждый раз когда они изменяются.” -
scss
: Название папки, куда мы положим все наши .scss файлы. -
-o css
: Папка куда выдаются скомпилированные CSS.
При запуске этого скрипта, он будет следить за каждым .scss
файлом в папке scss/
, затем сохранять скомпилированный css в папке css/
, каждый раз, когда мы изменяем .scss
файл.
5. Запускаем скрипт
Для выполнения нашего одностраничного скрипта, нам нужно запустить в терминале следующую команду: npm run scss
И вуаля! Мы следим и компилируем SASS.

Быстрый совет Sass
Оставайтесь на связи, чтобы получить больше быстрых советов Sass.
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post