Меню

Базовая структура sass для вёрстки

08.05.2018 - Вёрстка, Препроцессоры
Базовая структура sass для вёрстки

Самый простой способ закомпилить из scss в css это установить через npm
node-sass, затем в файле package.json в разделе scripts прописать примерно следующую команду

"scripts": {
    "compile:sass": "node-sass sass/main.scss css/style.css -w"
  },

А затем в терминале пишем

$ npm run compile:sass

Но лучше поставить в «compile:sass» флаг -w для того чтобы компилятор был в режиме — watch и отслеживал изменения

Установим аналог browser-sync — live-server

$ npm install live-server -g

И затем из категории где лежит index.html, запустить команду live-server.

7-in-1

Мы можем создавать сразу несколько файлов через touch

$ touch _functions.scss _mixins.scss _variables.scss

Создаем структуру для sass файлов.
Эта структура включает в себя основные директории:
* abstracts
* _functions.scss
* _mixins.scss
* _variables.scss
* base
* _animations.scss
* _base.scss
* _typography.scss
* _utilities.scss
* components — содержит элементы которые можно перемещать по и между проектами
* layouts — шаблон в котором размещаются компоненты
* pages
* _home.scss

Метки: ,

Добавить комментарий

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