Починаємо працювати з препроцесором Sass

14

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

Стривайте, препро-що?!

Думаю, якщо ви у всьому цьому новачок, то поєднання «препроцесор CSS» збиває вас з пантелику! Заспокойтеся, не потрібно сильно хвилюватися. Препроцесор CSS бере ваш написаний в спеціальному файлі CSS, компілює його і записує ваш CSS в окремий файл. Він допомагає вам писати CSS зручним для розробника способом, але, крім цього, здатний спростити і краще керувати вашим CSS.

Починаємо працювати з препроцесором Sass

У цьому підручнику ми будемо робити дуже просту кнопку з трьома станами, повну прекрасних властивостей CSS3 начебто градієнтів, тіней блоку і переходів, покладаючись у той же час на препроцесор, щоб той зробив за нас важку роботу. Існує кілька мов препроцесорів, але я дуже рекомендую використовувати Sass і побудований на ньому популярний фреймворк Compass. Sass можна застосовувати для структуризації свого CSS, тоді як Compass можна використовувати для зміцнення стилів і забезпечення альтернативними варіантами.

Що вам знадобиться і як почати

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

Починаємо працювати з препроцесором Sass

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

Починаємо працювати з препроцесором Sass

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

Починаємо працювати з препроцесором 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 не дуже-то і суворий з новачками. Починаємо працювати з препроцесором Sass

На початку свого файлу ми напишемо базовий скидання для 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.3 s 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.3 s ease;
-moz-transition: all 0.3 s ease;
-o-transition: all 0.3 s ease;
transition: all 0.3 s 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, доповнений альтернативами, для завершення нашої кнопки з трьома станами.

Починаємо працювати з препроцесором Sass

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

Починаємо працювати з препроцесором Sass

Ось і все, що є в нашому файлі style.scss, тому що він організований, написаний просто і містить абстрактні класи і змінні, які виконують частину роботи за нас, а потім компілюються в остаточний файл таблиці стилів style.css.

Починаємо працювати з препроцесором Sass

Дізнатися ще про препроцессорах

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