Изучаем Sass. Основы. В этой статье мы продолжим разбираться с препроцессором Sass и поговорим об основах: как использовать переменные, задавать свойства и т.д. Создайте файл _variables.scss и поместите его в папку base в папке styles. Здесь мы будем хранить все нужные нам переменные. Давайте сразу и зададим несколько /* GLOBAL */ $body-bg-color: #edeff0; $body-text-color: #222; $body-font-family: "Open Sans", sans-serif; $body-font-size: 100%; $body-line-height: 150$; $link-color: #000; $link-weight: 600; Как задавать переменные, думаю, тут понятно, особенно тем, кто работает с php :) Теперь давайте создадим папку framework и файл _global.scss в ней. Здесь мы будем задавать глобальные стили. body { font-family: $body-font-family; font-size: $body-font-size; background-color: $body-bg-color; color: $body-text-color; line-height: $body-line-height; margin: 0; } a { color: $link-color; font-weight: $link-weight; } Итак, теперь у нас есть файл с переменными и файл с глобальными стилями. Нам нужно их подключить к нашему главному файлу - app.scss @import 'base/variables'; @import 'framework/global'; Теперь скомпилируем файлы sass --watch assets/styles/app.scss:public/css/app.css Если вы хотите, чтобы ваш файл также был сжат, то пропишите следующее: sass --watch --style compressed assets/styles/app.scss:public/css/app.css В конце создадим файл _layout.scss в папке framework, в котором будут содержаться базовые стили для нашей разметки страницы. .wrapper { width: 100%; max-width: 100%; padding: 0 20px; } Не забудьте добавить его в файле app.scss @import 'framework/layout'; И создайте div с классом wrapper в файле index.html <div class="wrapper">Content</div> Ну, что же, на этом все. Увидимся в следующей статье! Удачи!