Начинаем работать с препроцессором Sass

Начинаем работать с препроцессором Sass

От автора: Препроцессоры – популярный способ упрощения и написания более управляемого CSS, а также применения фреймворков для написания лучшего CSS. Давайте рассмотрим основные принципы и узнаем, как создать полностью насыщенную CSS3 кнопку с градиентами, тенями и переходами, предоставив при этом препроцессору Sass и фреймворку Compass возможность проделать за нас всю сложную работу.

Погодите, препро-что?!

Думаю, если вы во всем этом новичок, то сочетание «препроцессор CSS» сбивает вас с толку! Успокойтесь, не нужно сильно волноваться. Препроцессор CSS берет ваш написанный в специальном файле CSS, компилирует его и записывает ваш CSS в отдельный файл. Он помогает вам писать CSS удобным для разработчика способом, но, помимо этого, способен упростить и лучше управлять вашим CSS.

В этом учебнике мы будем делать очень простую кнопку с тремя состояниями, полную великолепных свойств CSS3 вроде градиентов, теней блока и переходов, полагаясь в то же время на препроцессор, чтобы тот сделал за нас тяжелую работу. Существует несколько языков препроцессоров, но я очень рекомендую использовать Sass и построенный на нем популярный фреймворк Compass. Sass можно применять для структуризации своего CSS, тогда как Compass можно использовать для укрепления стилей и обеспечения альтернативными вариантами.

Что вам понадобится и как начать

Первое, что следует сделать – взять программу для компиляции вашего кода, и хотя вы могли бы установить все с помощью командной строки, легче сохранять контроль с помощью приложения. Я очень рекомендую попробовать для этого учебника CodeKit, так что берите пробную копию и можно начинать.

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

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

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

Заведите для нашего проекта папку, укомплектованную файлом index.html, готовым к принятию кода. Далее войдите в CodeKit, перейдите в меню Файл/File и выберите Новый проект Compass (New Compass Project). Далее перед вами предстанет диалог, запрашивающий, где находится папка вашего проекта и куда нужно компилировать, и убедитесь, что установки соответствуют следующим:

Мы определили, где находятся наши файлы Sass, куда они компилируются, и каким образом Compass будет записывать CSS. Здесь я установил расширенное (expanded ) отображение для того, чтобы можно было посмотреть, как выглядит мой CSS, тогда как установка на сжатое (compressed) отображение уменьшит CSS. Как вы захотите организовать свой проект – решать вам. Затем Compass создаст проект, а также местоположение наших папок CSS и Sass.

Начинаем работать с кодом Sass

В своем файле HTML нам нужен лишь очень простой код и ссылка на файл CSS в папке CSS нашего проекта.

Вот и весь нужный нам HTML! Теперь перейдем к Sass. Войдите в любимый текстовый редактор и создайте новый файл, сохраните его в папку sass и назовите style.scss. Чтобы было проще, мы будем писать все в SCSS, который Sass тоже умеет обрабатывать, да и SCSS не очень-то строг с новичками. :-)

В начале своего файла мы напишем базовый сброс для HTML, импорт для Compass и пропишем переменные цвета для кнопки.

Вверху файла мы вызываем Compass, чтобы включить его в файл и попозже воспользоваться абстрактными классами. Кроме того, мы написали простой сброс и уже употребили одно свойство: переменные. Это дает нам возможность хранить значения, которые мы будем постоянно использовать в своем CSS, включая цвета, значения шрифтов и многие другие! Здесь я применяю их для хранения использованных в кнопке цветов и для упрощения из записи, а также для повторного использования в таблице стилей.

Назначение стилей кнопке

Давайте назначим стили этой кнопке! Мы начнем с применения основных стилей к тэгу с классом button. Я установил здесь базовые стили кнопки, и обратите внимание на то, как я употребляю переменные.

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

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

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

А теперь перейдем к интересной части! Помните импорт Compass, помещенный в начале таблицы стилей? Здесь мы воспользуемся им, потому что у Compass есть большая библиотека встроенных классов, которые включают префиксы CSS3 для тех браузеров, которым все еще нужна префиксная поддержка.

После первоначального определения стилей мы можем включить несколько абстрактных классов для фоновых цветов, линейных градиентов, радиусов рамки и переходов. Лучше всего то, что все будет компилироваться только с нужными префиксами, и сэкономит нам на их написании время! Класс пока будет компилироваться в файле style.css в следующее:

Написание стилей с вложенными элементами

Еще одной отличной чертой такого препроцессора, как Sass, является способность вкладывать элементы и прикреплять классы с родительским элементом, которому вы назначаете стили. Затем для работы это компилируется в необходимый CSS.

После стилей основной кнопки можно вложить селекторы псевдоклассов для состояний элемента :hover и :active, с помощью амперсанда, который будет говорить Sass, что это – вложенный класс, прикрепленный к родительскому элементу. В состоянии проведения мышью :hover можно добавить выразительности градиенту и внутренней тени, использовав абстрактные классы Compass, тогда как активное состояние :active переворачивает градиент и меняет тень блока так, что создается впечатление нажатия кнопки.

Выше показано, что получается после того, как состояния :active и :hover компилируются в Sass’е; они написаны, как селекторы псевдоклассов к родительскому элементу в действенном CSS, а также нужный нам CSS, дополненный альтернативами, для завершения нашей кнопки с тремя состояниями.

Файл style.scss и скомпилированная таблица стилей

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

Узнать еще о препроцессорах

Надеюсь, вам не было слишком сложно, и у вас появилось стремление написать что-нибудь еще в Sass и Compass, а также попробовать поработать с препроцессорами CSS. На CSS-Tricks, NetTuts, The Sass Way и многих других сайтах есть много информации по этой теме, которая поможет вам писать собственный более эффективный, простой и легкий CSS.

Автор: Iain MacDonald

Источник: http://line25.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