Пишем свой css фреймворк на Sass

Если Вы давно работаете в сфере web-разработок, то рано или поздно встанет вопрос о создании своего фреймворка для быстрой вёрстки. Например, Вы получили в работу новый проект. Вы понимаете, что использовать новые крупные библиотеки (bootstrap и тому подобные) на данном проекте нельзя, т.к. сразу поедет разметка всего сайта. А работу нужно выполнить быстро, причём задачи полностью переделать сайт у Вас нет. Вам просто нужно быстро сверстать пару страниц или пару блоков. И писать кучу одинаковых стилей, которые Вы привыкли использовать стандартно в каждом своём проекте, у Вас просто нет времени. И тут приходит идея: а почему бы не сделать свой собственный фреймворк, который поможет быстро вставлять нужные классы в html и в процессе вёрстки не нужно будет каждые 5 секунд заходить в css файл и писать там новые правила. Это удобно, быстро и очень эффективно. Например, я использую для данных целей свойства, название классов которых берётся из Emmet. Кто ещё не в курсе (такие вообще есть..?), Emmet - это самый быстрый способ писать html и css, используя конструкции типа: .row>.col-md-6*2>(h3+p). В html после нажатия клавиши Tab получится вот такая разметка:

<div class="row">
    <div class="col-md-6">
        <h3></h3>
        <p></p>
    </div>
    <div class="col-md-6">
        <h3></h3>
        <p></p>
    </div>
</div>

Т.е. с помощью одной строчки Emmet мы можем за одну минуту создать разметку на всю нашу страницу, которую просто нужно будет заполнить контентом. В примере Emmet-кода выше, мы указываем, что нам нужен родительский элемент <div> с классом .row, внутри которого будет 2 элемента <div> с классом .col-md-6 и внутри него будут 2 элемента (<h3> и <p>), находящиеся на одном уровне.

Также с Emmet мы пишем правила css. Например, вот так: пишем mt10 и нажимаем Tab. Получаем: margin-top: 10px; Стили таким образом можно писать очень быстро, причём без каких-либо опечаток.

И у меня возник вопрос: почему бы не сделать классы css, в которых можно будет указывать основные правила Emmet. Например, написать:

<div class="p20"></div>

и получить элемент <div>, с отступами по 20 пикселей.

Или использовать другие правила Emmet для аналогичной быстрой и понятной разметки. Чтобы автоматизировать работу, я написал фреймворк, и ниже рассказываю, как сделать аналогичный под Ваши нужды.

Итак, как написать свой фреймворк для быстрой и эффективной работы

Нам понадобится:

1. Sass (Scss)
2. Программа Koala

Чтобы написание стилей не было утомительным занятием, будем использовать препроцессор Sass. А точнее, Scss — "диалект" языка Sass. Он позволяет писать стили, используя переменные, функции и математические правила. Например, мы можем написать:

@for $i from 0 through 10 {
    .mt#{$i*5} {margin-top: 5 * $i +px !important;}
}

и после работы интерпретатора получим следующий набор правил:

.mt0{margin-top:0px !important}
.mt5{margin-top:5px !important}
.mt10{margin-top:10px !important}
.mt15{margin-top:15px !important}
.mt20{margin-top:20px !important}
.mt25{margin-top:25px !important}
.mt30{margin-top:30px !important}
.mt35{margin-top:35px !important}
.mt40{margin-top:40px !important}
.mt45{margin-top:45px !important}
.mt50{margin-top:50px !important}

Т.е. мы создаём в цикле переменную $i и, начиная с нулевого значения, проходим цикл 10 раз. При каждой итерации цикла мы создаём класс, начинающийся на .mt и со значением переменной $i, умноженной на 5. Данному классу мы присваиваем правило margin-top, в значении которого мы указываем количество пикселов, равное значению переменной $i, умноженной на 5. И добавляем !important, чтобы наш стиль точно перебивал все остальные стили сайта. Вообще, все мы знаем, что !important лучше не использовать, но в нашем случае это позволительно, т.к. мы делаем фреймворк и нам нужно, чтобы данное правило сработало наверняка, иначе попросту наша разметка не будет выглядеть как нужно.

Мощь Scss именно в этом. В правиле выше мы могли бы написать скажем сделать цикл не 10, а 100 раз. И мы получили бы сто разных стилей за долю секунды, не используя копипаст и кучу правок. Изучите Scss и Вы увидите, насколько вырастет Ваша производительность и Ваша ценность как специалиста.

Следовательно, наша задача сводится к тому, чтобы с помощью шаблона выше создать разные правила для margin, padding и других правил css. В качестве примера, я сделал основные правила, плюс добавил несколько своих собственных стилей.

Итог css-файла получился следующий: https://bitbucket.org/lisogorsky/dev/raw/1f43e26a2ff513970e97b143cda576e6cb2afbb4/cssFramework/my.css

Если Вам понравилась идея моего фреймворка, Вы можете использовать его на своём проекте. Для этого, вставьте в область <head> Вашего сайта следующую строку:

<link rel="stylesheet" href="https://bitbucket.org/lisogorsky/dev/raw/1f43e26a2ff513970e97b143cda576e6cb2afbb4/cssFramework/my.css">

Или перейдите по ссылке, скопируйте стили и вставьте в файл стилей своего сайта.

Оригинал файла Scss: https://bitbucket.org/lisogorsky/dev/raw/1f43e26a2ff513970e97b143cda576e6cb2afbb4/cssFramework/my.scss

Скачайте и редактируйте файл Scss на своё усмотрение, добавляйте свои правила по аналогии.

Далее нам понадобится программа-компилятор. Мы будем использовать Koala. Это очень мощная, гибкая и абсолютно бесплатная программа. Она будет переводить Ваши файлы Scss в вид обычного css. Разумеется, мы можем настроить всё это на сервере, но об этом расскажу как-нибудь позже, в других постах. Сейчас наша задача - научиться быстро создавать собственные фреймворки и использовать их в своих проектах. Скачиваем программу на официальном сайте: koala-app.com

После установки, создаём папку, в которую помещаем наш отредактированный Scss файл. Далее эту папку перетаскиваем в окно программы. Программа сразу увидит Ваш файл. Кликните на него. Справа появится меню. Ставим галочки: "Автокомпиляция", "Autoprefix" и стиль вывода "compact" или "compressed". При варианте "compact" все стили будут отдельно на каждой строчке, а при "compressed" все стили будут минимизированы в одну строку. Нажмите единственную кнопку "compile". Ваш файл стилей появится в той же папке, что и файл Scss.

Используйте и наслаждайтесь результатом!