От автора: Препроцессоры – популярный способ упрощения и написания более управляемого CSS, а также применения фреймворков для написания лучшего CSS. Давайте рассмотрим основные принципы и узнаем, как создать полностью насыщенную CSS3 кнопку с градиентами, тенями и переходами, предоставив при этом препроцессору Sass и фреймворку Compass возможность проделать за нас всю сложную работу.
Погодите, препро-что?!
Думаю, если вы во всем этом новичок, то сочетание «препроцессор CSS» сбивает вас с толку! Успокойтесь, не нужно сильно волноваться. Препроцессор CSS берет ваш написанный в специальном файле CSS, компилирует его и записывает ваш CSS в отдельный файл. Он помогает вам писать CSS удобным для разработчика способом, но, помимо этого, способен упростить и лучше управлять вашим CSS.
В этом учебнике мы будем делать очень простую кнопку с тремя состояниями, полную великолепных свойств CSS3 вроде градиентов, теней блока и переходов, полагаясь в то же время на препроцессор, чтобы тот сделал за нас тяжелую работу. Существует несколько языков препроцессоров, но я очень рекомендую использовать Sass и построенный на нем популярный фреймворк Compass. Sass можно применять для структуризации своего CSS, тогда как Compass можно использовать для укрепления стилей и обеспечения альтернативными вариантами.
Что вам понадобится и как начать
Первое, что следует сделать – взять программу для компиляции вашего кода, и хотя вы могли бы установить все с помощью командной строки, легче сохранять контроль с помощью приложения. Я очень рекомендую попробовать для этого учебника CodeKit, так что берите пробную копию и можно начинать.
Заведите для нашего проекта папку, укомплектованную файлом index.html, готовым к принятию кода. Далее войдите в CodeKit, перейдите в меню Файл/File и выберите Новый проект Compass (New Compass Project). Далее перед вами предстанет диалог, запрашивающий, где находится папка вашего проекта и куда нужно компилировать, и убедитесь, что установки соответствуют следующим:
Мы определили, где находятся наши файлы Sass, куда они компилируются, и каким образом Compass будет записывать CSS. Здесь я установил расширенное (expanded ) отображение для того, чтобы можно было посмотреть, как выглядит мой CSS, тогда как установка на сжатое (compressed) отображение уменьшит CSS. Как вы захотите организовать свой проект – решать вам. Затем Compass создаст проект, а также местоположение наших папок CSS и Sass.
Начинаем работать с кодом Sass
В своем файле HTML нам нужен лишь очень простой код и ссылка на файл CSS в папке CSS нашего проекта.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Simple CSS3 Button</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="container"> <a class="button">Click Me!</a> </div> </body> </html> |
Вот и весь нужный нам HTML! Теперь перейдем к Sass. Войдите в любимый текстовый редактор и создайте новый файл, сохраните его в папку sass и назовите style.scss. Чтобы было проще, мы будем писать все в SCSS, который Sass тоже умеет обрабатывать, да и SCSS не очень-то строг с новичками. 🙂
В начале своего файла мы напишем базовый сброс для HTML, импорт для Compass и пропишем переменные цвета для кнопки.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
@import "compass"; //Простой сброс body, div, a { margin: 0; padding: 0; border: 0; } a {text-decoration: none;} a:focus {outline: 0;} //Переменные цвета $button-colour: #2e6bc6; $button-start: #37a0dc; $button-stop: #2068a6; $border: #163861; $text-shadow: #06304b; //Цвета при проведении мышью $button-hover-colour: #2e7dc6; $button-hover-start: #3f9ff0; $button-hover-stop: #2874a9; $focus-shadow: #0b3c5f; //Основные стили body { font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; } |
Вверху файла мы вызываем Compass, чтобы включить его в файл и попозже воспользоваться абстрактными классами. Кроме того, мы написали простой сброс и уже употребили одно свойство: переменные. Это дает нам возможность хранить значения, которые мы будем постоянно использовать в своем CSS, включая цвета, значения шрифтов и многие другие! Здесь я применяю их для хранения использованных в кнопке цветов и для упрощения из записи, а также для повторного использования в таблице стилей.
Назначение стилей кнопке
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.button { width: 158px; height: 30px; margin: 120px auto; font-size: 16px; font-weight: bold; text-align: center; display: block; color: #fff; padding: 7px 0 0; border: 1px solid $border; text-shadow: 0 -1px 0 $text-shadow; position: relative; } |
Давайте назначим стили этой кнопке! Мы начнем с применения основных стилей к тэгу с классом button. Я установил здесь базовые стили кнопки, и обратите внимание на то, как я употребляю переменные.
А теперь перейдем к интересной части! Помните импорт Compass, помещенный в начале таблицы стилей? Здесь мы воспользуемся им, потому что у Compass есть большая библиотека встроенных классов, которые включают префиксы CSS3 для тех браузеров, которым все еще нужна префиксная поддержка.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.button { width: 158px; height: 30px; margin: 120px auto; font-size: 16px; font-weight: bold; text-align: center; display: block; color: #fff; padding: 7px 0 0; border: 1px solid $border; text-shadow: 0 -1px 0 $text-shadow; position: relative; //Классы Compass @include background( $button-colour linear-gradient(top, $button-start 20%, $button-stop) ); @include border-radius(3px); @include box-shadow(inset 0 1px 0 rgba(#fff, 0.8)); @include transition(all 0.3s ease); } |
После первоначального определения стилей мы можем включить несколько абстрактных классов для фоновых цветов, линейных градиентов, радиусов рамки и переходов. Лучше всего то, что все будет компилироваться только с нужными префиксами, и сэкономит нам на их написании время! Класс пока будет компилироваться в файле style.css в следующее:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
.button { width: 158px; height: 30px; margin: 120px auto; font-size: 16px; font-weight: bold; text-align: center; display: block; color: #fff; padding: 7px 0 0; border: 1px solid #163861; text-shadow: 0 -1px 0 #06304b; position: relative; background: #2e6bc6 -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #37a0dc), color-stop(100%, #2068a6)); background: #2e6bc6 -webkit-linear-gradient(top, #37a0dc 20%, #2068a6); background: #2e6bc6 -moz-linear-gradient(top, #37a0dc 20%, #2068a6); background: #2e6bc6 -o-linear-gradient(top, #37a0dc 20%, #2068a6); background: #2e6bc6 linear-gradient(top, #37a0dc 20%, #2068a6); -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } |
Написание стилей с вложенными элементами
Еще одной отличной чертой такого препроцессора, как Sass, является способность вкладывать элементы и прикреплять классы с родительским элементом, которому вы назначаете стили. Затем для работы это компилируется в необходимый CSS.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.button { ... &amp;:hover { @include background( $button-hover-colour linear-gradient(top, $button-hover-start 20%, $button-hover-stop) ); @include box-shadow(inset 0 1px 1px rgba(#fff, 0.95)); } &amp;:active { @include background( linear-gradient(bottom, $button-start 20%, $button-stop) ); text-shadow: 0 1px 0px $text-shadow; @include box-shadow(inset 0 2px 8px $focus-shadow); } } |
После стилей основной кнопки можно вложить селекторы псевдоклассов для состояний элемента :hover и :active, с помощью амперсанда, который будет говорить Sass, что это – вложенный класс, прикрепленный к родительскому элементу. В состоянии проведения мышью :hover можно добавить выразительности градиенту и внутренней тени, использовав абстрактные классы Compass, тогда как активное состояние :active переворачивает градиент и меняет тень блока так, что создается впечатление нажатия кнопки.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.button:hover { background: #2e7dc6 -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #3f9ff0), color-stop(100%, #2874a9)); background: #2e7dc6 -webkit-linear-gradient(top, #3f9ff0 20%, #2874a9); background: #2e7dc6 -moz-linear-gradient(top, #3f9ff0 20%, #2874a9); background: #2e7dc6 -o-linear-gradient(top, #3f9ff0 20%, #2874a9); background: #2e7dc6 linear-gradient(top, #3f9ff0 20%, #2874a9); -webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95); -moz-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95); } .button:active { background: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(20%, #37a0dc), color-stop(100%, #2068a6)); background: -webkit-linear-gradient(bottom, #37a0dc 20%, #2068a6); background: -moz-linear-gradient(bottom, #37a0dc 20%, #2068a6); background: -o-linear-gradient(bottom, #37a0dc 20%, #2068a6); background: linear-gradient(bottom, #37a0dc 20%, #2068a6); text-shadow: 0 1px 0px #06304b; -webkit-box-shadow: inset 0 2px 8px #0b3c5f; -moz-box-shadow: inset 0 2px 8px #0b3c5f; box-shadow: inset 0 2px 8px #0b3c5f; } |
Выше показано, что получается после того, как состояния :active и :hover компилируются в Sass’е; они написаны, как селекторы псевдоклассов к родительскому элементу в действенном CSS, а также нужный нам CSS, дополненный альтернативами, для завершения нашей кнопки с тремя состояниями.
Файл style.scss и скомпилированная таблица стилей
Вот и все, что имеется во всем нашем файле style.scss, потому что он организован, написан просто и содержит абстрактные классы и переменные, которые проделывают часть работы за нас, а потом компилируются в окончательный файл таблицы стилей style.css.
Узнать еще о препроцессорах
Надеюсь, вам не было слишком сложно, и у вас появилось стремление написать что-нибудь еще в Sass и Compass, а также попробовать поработать с препроцессорами CSS. На CSS-Tricks, NetTuts, The Sass Way и многих других сайтах есть много информации по этой теме, которая поможет вам писать собственный более эффективный, простой и легкий CSS.
Автор: Iain MacDonald
Источник: //line25.com/
Редакция: Команда webformyself.
