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

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

От автора: Препроцессоры – популярный способ упрощения и написания более управляемого 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 нашего проекта.

<!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 и пропишем переменные цвета для кнопки.

@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, включая цвета, значения шрифтов и многие другие! Здесь я применяю их для хранения использованных в кнопке цветов и для упрощения из записи, а также для повторного использования в таблице стилей.

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

.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 для тех браузеров, которым все еще нужна префиксная поддержка.

.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 в следующее:

.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.

.button {
	...
	
	&: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));
	}
	
	&: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 переворачивает градиент и меняет тень блока так, что создается впечатление нажатия кнопки.

.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

Источник: http://line25.com/

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

Хотите узнать, что необходимо для создания сайта?

Посмотрите 3-х минутное видео и у Вас будет четкий пошаговый план по созданию сайта с нуля!

Смотреть видео

Метки:

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree