Организуйте ваши Sass файлы

Организуйте ваши Sass файлы

От автора: организация – большой шаг в любом проекте, особенно если вы подняли проект через 6 месяцев. В Sass есть два синтаксиса. Первый – SCSS (Sassy CSS) является расширенным синтаксисом CSS. То есть любой валидный CSS файл можно считать валидным SCSS файлом. Кроме того, SCSS понимает большую часть CSS хаков и вендорные префиксы, а также старый синтаксис фильтров для IE. Этот синтаксис усиливается возможностями Sass, о которых я расскажу ниже. Файлы с этим синтаксисом имеют расширение .scss.

Создаем несколько файлов

Для лучшей организации мы разделим наш код на несколько папок/файлов. Обычно я создаю папку css, а в ней папку asset. В папке asset я создаю дополнительные папки css, icons, images и js.

Создадим первый и главный файл app.scss. В этом файле будет храниться импорт всех компонентов и других файлов .scss. Пока что оставим его пустым. Готово? Перейдем к созданию папок.

Helpers

Components

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами Less и Sass с полного нуля менее чем за 2 недели

Узнать подробнее

Layouts

Pages

Помощники

В папке helpers будут храниться наши функции, миксины и переменные. Пример:

Компоненты

В папке components будут храниться все модули, которыми мы будем пользоваться в коде. Пример:

Страницы

В папке pages будут храниться все стили определенной страницы. Пример:

Макеты

В папке layouts хранятся разные макеты и правила по адаптивности. Пример:

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами Less и Sass с полного нуля менее чем за 2 недели

Узнать подробнее

Один файл, чтоб править всеми

Теперь можно перейти к созданию файла app.scss в корневой папке. В этом файле хранится импорт всех других файлов.

Компилируем наши .scss файлы

Для компиляции Scss кода в понятный язык CSS необходим специальный инструмент. Можно использовать Gulp, Grunt или обычные NPM скрипты.

Gulp

Сперва необходимо установить кое-что: gulp и gulp-sass.

Grunt

Для этого таск раннера используем grunt-sass.

NPM скрипты

И Gulp и Grunt задачи используют модуль node-sass. Мы можем использовать его напрямую в файле package.json.

Спасибо, что прочитали мою статью. Если вы знаете, как лучше организовать код, пишите об этом в комментариях.

Автор: Osternaud Clement

Источник: https://medium.com/

Редакция: Команда webformyself.

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами Less и Sass с полного нуля менее чем за 2 недели

Узнать подробнее

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами с полного нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree