() translation by (you can also view the original English article)
Sass розроблявся для того, щоб дозволити писати CSS швидше; міксини одна з функцій Sass, які дозволять добитися цього. Кілька важких бібліотек існує, що включають в себе різні складні формули, для вирішення більшості завдань, але сьогодні я покажу як приготувати власні міксини, які підійдуть вашому робочому процесу.
Картинка превью іконки: hand mix egg з PhotoDune.
Зверніть увагу: ви можете відразу завантажити файли з кодами, тим самим ви зрозумієте що ми будемо створювати і як виглядають Sass файли.
Я використовую Sass під час фронтенд розробки вже більше року і міксини я став використовувати з самого початку. Відразу помітивши, що час, який я витрачаю на написання таблиць стилів, значно зменшилася, неважливо з наскільки великим проектом я працюю. Але що ж таке міксини? Інформація з Sass веб-сайту:
Міксини одна з найпотужніших функцій Sass. Вони дозволяють повторно використовувати властивості стилів або навіть селектори, без необхідності копіювати, вставляти або переміщати їх в НЕ семантичного класи.
Погляньте на це з іншого кута, міксини - генератори коду. Ви створюєте миксин в Sass таблиці стилів, використовуючи директиву @mixin, вказуєте правила CSS, які даний миксин повинен додавати, потім викликаєте їх в оголошенні, кожен раз коли ви хочете використовувати дані правила. В основному, я використовую міксини для додавання функціоналу CSS3, наприклад box-shadows, text-shadows і border-radius. Більшість з цих властивостей в повному обсязі підтримуються і для роботи у всіх браузерах вимагають Вендорний префіксів, таких як -webkit-, -moz-, -ms-, -o-. Замість того, щоб писати п'ять правил кожен раз, коли мені потрібно скористатися функціоналом CSS3, я можу викликати миксин, який займає один рядок, після чого буде створено необхідний CSS.
Крок 1: Переконайтеся, що на вашому комп'ютері встановлено Ruby
Для початку відкрийте термінал (командний рядок на Windows) і переконайтеся, що у вас встановлений Ruby, далі поставте гем Sass. Термінал можна знайти наступним чином:
- Mac OS X: Програми > Утліти > Термінал
- Linux: Програми > Стандартні > Термінал
- Windows: Стартc> Командний рядок
Після того як термінал буде відкритий, введіть наступну команду, щоб переконатися, що Ruby встановлений. Не потрібно писати знак долара - це ваш плейсхолдер.
1 |
$ which ruby |
Вам повинна відобразиться інформація про шляхи /usr/local/bin або повідомлення про помилку, якщо Ruby не встановлено. Ось висновок мого OS X терміналу:
Якщо ви бачите помилку або знаєте, що Ruby у вас не встановлений, ознайомтеся з наступними ресурсами, щоб почати роботу без зайвих проблем, під час установки. Процес установки Ruby НЕ буде освячений в даному туторіали, але відмінно документований на сайтах в списку нижче.
Крок 2: Встановіть гем Sass
Після того, як ви перевірили чи встановили мову Ruby, установка Sass не викличе складнощів. У терміналі введіть команду: $ gem install sass. Якщо у вас немає відповідних прав, необхідно запустити команду з sudo ( Super User Do ), ось так: $ sudo gem install sass. Через кілька секунд, ви повинні побачити висновок подібно скриншоту нижче.
Крок 3: Скачайте і встановіть LiveRealod
Вам не потрібно додаток для компіляції на подобі, LiveRealod, Compass або CodeKit, щоб скомпілювати Sass в звичайний CSS, проте з ними знайомство з препроцесором буде набагато простіше. CodeKit тільки для OS X, LiveRealod в основному для OS X, є бета версія для Windows; Compass працює на OS X, Windows і Linux. Ліцензія коштує від $10 до $25 на момент написання статті, але це варто того, в тому випадку якщо ви часто використовуєте Sass під час розробки.
Варто згадати, що Sass буває двох типів .sass і .scss. Не буду вдаватися в подробиці, я використовую .scss синтаксис, так як він більше нагадує звичайний CSS і компілюється без проблем.
Після того, як ви налаштували компілятор, вам слід налаштувати робочі директорії з HTML і CSS файлами. Для цього туторіал, я створив простий приклад під назвою Write Your Own Sass Mixins. Нижче ви можете побачити файлову структуру, про яку йтиметься в цій статті. Якщо ви до цих пір не завантажили файли з кодами, будь-ласка зареєструйтеся і додайте Museo Sans і Droid Serif файли в директорію / fonts. Дані шрифти необхідні для деяких Міксини, які будуть створені пізніше в даному туторіали.
1 |
Write Your Own Sass Mixins |
2 |
index.html |
3 |
/css (directory) |
4 |
/fonts (directory) |
5 |
/scss (directory) |
6 |
|-- main.scss |
Так як я вибрав LiveReload, ми налаштуємо його, щоб він стежив за змінами і компілював scss в CSS. Коду буде запущений LiveRealod, ви повинні побачити вікно з привітанням, показане нижче. Перемістіть робочу директорію в сайдбар з відслідковувати директоріями (Monitored Folders) у вікні LiveReload.
Далі, погляньте на скомпілювати Sass, LESS, Stylus, Coffescript і інші секції. Натисніть на опції (Options) для вибору шляху, куди буде поміщений кінцевий, скомпільований файл.
Ви повинні побачити порожню таблицю з підсвіченими шляхами і scss / main.scss з галочкою, на першому рядку. Натисніть налаштувати кінцеву папку (Set Output Folder). За замовчуванням буде обраний каталог CSS. Натисніть на налаштувати кінцеву папку, далі підтвердити.
Оновлення ваш index.html додавши даний код, після чого поновіть браузер. Ваш index повинен виглядати, як на зображенні нижче.
1 |
<!DOCTYPE> |
2 |
<html>
|
3 |
<head>
|
4 |
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> |
5 |
|
6 |
<title>Write Your Own Sass Mixins</title> |
7 |
|
8 |
<link rel="stylesheet" href="css/main.css" type="text/css" media="screen" title="main" charset="utf-8"> |
9 |
</head>
|
10 |
|
11 |
<body>
|
12 |
<div id="wrapper"> |
13 |
Some text goes here. |
14 |
</div>
|
15 |
</body>
|
16 |
</html>
|
Для LiveRealod є доповнення для браузерів FireFox і Chrome, в тому випадку, якщо ви хочете скоріше почати роботу, швидше за все буде скопіювати Javascript код (з вікна LiveReload) в ваш index.html, вставте його відразу перед закриває body тегом. Після того як даний шматочок коду буде додано, LiveReload буде відстежувати зміни HTML і Sass файлів і автоматично оновлювати сторінку в браузері, ніяких більше Command + R кожні кілька хвилин.
1 |
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script> |
Тепер, все необхідне готове і ми можемо приступити до створення Міксини, компілятор зробить решту роботи за нас.
Крок 4: Border Radius - ваш перший миксин
Як я згадав раніше, я використовую безліч особливостей і функцій CSS3 для створення структури веб-сторінок. Проблема полягає в тому, що дані властивості вимагає вказівки Вендорний префіксів, на що у мене не вистачає терпіння, робити це вручну. Мені не доведеться дублювати п'ять схожих CSS рядків кожен раз, коли я захочу поставити закруглені кути елементу, замість цього я краще напишу один миксин.
Міксини вказуються в Sass файлах, за допомогою оголошення @mixin() {}. Кожен раз коли обробник, наприклад такий як LiveReload, зустрічає подібний синтаксис, він дивиться є-ли аргументи в дужках, потім перевіряє CSS інструкції всередині кутових дужок. Далі, компілятор обробляє дані інструкції і на виході ми отримуємо звичайну CSS таблицю стилів, main.css в нашому випадку.
Відкрийте файл main.scss і скопіюйте код міксина. Коли ви натиснете зберегти, браузер з відкритим index.html буде автоматично оновлено і ми побачимо сірий div із закругленими кутами, розміром 6 пікселів.
1 |
/* Main.scss */
|
2 |
@mixin border-radius($topLeft, $topRight, $bottomRight, $bottomLeft) { |
3 |
-webkit-border-radius: $topLeft $topRight $bottomRight $bottomLeft; |
4 |
-moz-border-radius: $topLeft $topRight $bottomRight $bottomLeft; |
5 |
-ms-border-radius: $topLeft $topRight $bottomRight $bottomLeft; |
6 |
-o-border-radius: $topLeft $topRight $bottomRight $bottomLeft; |
7 |
border-radius: $topLeft $topRight $bottomRight $bottomLeft; |
8 |
}
|
9 |
|
10 |
#wrapper { |
11 |
@include border-radius(6px, 6px, 6px, 6px); |
12 |
width: 750px; |
13 |
height: 250px; |
14 |
background: #eee; |
15 |
margin: 0 auto; |
16 |
}
|
Крок 5: Розширюємо функціонал Border Radius міксина
Непоганий початок з нашим першим Міксини. Але в Міксини border-radius є недолік: якщо наш кордон матиме властивість opacity (непрозорість) менше 100%, по кутах буде видно фон блоку. Не найкращий дизайн.
На щастя ми можемо запросто це виправити за допомогою властивості background-clip. Якщо ви не знайомі з цією властивістю, у Chris Coyier з CSS-Tricks є відмінна стаття на цю тему.
Функціонал Sass Міксини може бути розширено іншими Міксини. Це дозволяє написати background-clip окремо, тим самим даний миксин може бути викликаний в border-radius, який ми створили раніше. Додайте наступний код в main.scss і збережіть файл. Після оновлення сторінки в браузері, ви повинні побачити блакитний фон і підлозі прозорий світло - блакитний радіус кордону.
1 |
/* Main.scss */
|
2 |
@mixin border-radius($topLeft, $topRight, $bottomRight, $bottomLeft) { |
3 |
-webkit-border-radius: $topLeft $topRight $bottomRight $bottomLeft; |
4 |
-moz-border-radius: $topLeft $topRight $bottomRight $bottomLeft; |
5 |
-ms-border-radius: $topLeft $topRight $bottomRight $bottomLeft; |
6 |
-o-border-radius: $topLeft $topRight $bottomRight $bottomLeft; |
7 |
border-radius: $topLeft $topRight $bottomRight $bottomLeft; |
8 |
}
|
9 |
|
10 |
@mixin background-clip { |
11 |
background-clip: padding-box; |
12 |
}
|
13 |
|
14 |
@mixin combined-radius($topLeft, $topRight, $bottomRight, $bottomLeft) { |
15 |
@include background-clip; |
16 |
@include border-radius($topLeft, $topRight, $bottomRight, $bottomLeft); |
17 |
}
|
18 |
|
19 |
body { |
20 |
background: lightblue; |
21 |
}
|
22 |
|
23 |
#wrapper { |
24 |
width: 750px; |
25 |
height: 250px; |
26 |
background: #eee; |
27 |
margin: 0 auto; |
28 |
border: 15px solid rgba(255, 255, 255, 0.3); |
29 |
@include combined-radius(6px, 6px, 6px, 6px); |
30 |
}
|
Незважаючи на те що спочатку ми дублюємо рядки коду, в нашому розпорядженні буде миксин, який можна викликати повторно, кожен раз коли нам необхідно задати елементу border-radius. Що в свою чергу дозволить відобразити елемент, так як ми задумали.
Крок 6: Text Shadow
Тіні для тексту - хороший спосіб зробити типографіку і кнопки більш виразними. Я часто використовую даний прийом для відображення зміни стану навігації вкладок або лейблів. У той же час робота з тінями тексту, досить дражливе заняття, так як IE9 не підтримує їх, і в чистому CSS немає обхідних шляхів для цього.
Незважаючи на цей факт, я створю миксин з кодом для сучасних браузерів і бета версії IE 10. Також я реалізував невеликий jQuery скрипт для кращого відображення text-shadow в IE9 і нижче.
Для сучасних браузерів, властивість text-shadow виглядає приблизно так само, як і box-shadow, з горизонтальним і вертикальним зміщенням, блюр і параметрами кольору. Додайте наступний код в main.scss і index.html файли і в результаті ви отримаєте трьох піксельну, розмиту, блакитнувату тінь позаду тексту.
1 |
/* Main.scss */
|
2 |
|
3 |
@mixin text-shadow($horizOffset, $vertOffset, $blur, $color) { |
4 |
-webkit-text-shadow: $horizOffset $vertOffset $blur $color; |
5 |
-moz-text-shadow: $horizOffset $vertOffset $blur $color; |
6 |
-ms-text-shadow: $horizOffset $vertOffset $blur $color; /* IE 10+ */ |
7 |
-o-text-shadow: $horizOffset $vertOffset $blur $color; |
8 |
text-shadow: $horizOffset $vertOffset $blur $color; |
9 |
|
10 |
#wrapper,
|
11 |
#wrapper-text-shadow { |
12 |
width: 750px; |
13 |
height: 250px; |
14 |
background: #eee; |
15 |
margin: 0 auto 20px; |
16 |
padding: 15px 0 0 15px; |
17 |
border: 15px solid rgba(255, 255, 255, 0.3); |
18 |
@include combined-radius(6px, 6px, 6px, 6px); |
19 |
}
|
20 |
|
21 |
#wrapper-text-shadow > p { |
22 |
font-size: 36px; |
23 |
color: blue; |
24 |
@include text-shadow(0, 3px, 3px, #333); |
25 |
}
|
26 |
}
|
index.html, додайте відразу після закриває тега div#wrapper
1 |
|
2 |
<div id="wrapper-text-shadow"> |
3 |
<p>Text shadow test.</p> |
4 |
</div>
|
Крок 7: Додаткові міксини - утліти
В якості останнього кроку, я створив міксини для box shadows, фонових градієнтів, оголошення @font-face і поліпшив відображення шрифтів. Міксини були перевірені в сучасних браузерах (Firefox, Chrome, Safari, Opera, IE9) і включають всі необхідні Вендорний префікси.
Я не буду заглиблюватися в деталі кожного з них; коментарі з усіма деталями знаходяться в файлі main.scss. Міксини слідують такому ж формату і можуть бути поліпшені в залежності від ваших потреб. Якщо вам знадобиться додатковий функціонал в CSS, миксин може бути переписаний для цього.
Оновлення ваш index.html і main.scss файли додавши наступний код. Після оновлення сторінки, ви повинні побачити у вікні браузера кілька блоків, кожен має різні тінями, за які відповідають створені міксини.
1 |
<!DOCTYPE> |
2 |
<html>
|
3 |
<head>
|
4 |
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> |
5 |
|
6 |
<title>Just another Textmate snippet</title> |
7 |
|
8 |
<link rel="stylesheet" href="css/main.css" type="text/css" media="screen" title="main" charset="utf-8"> |
9 |
</head>
|
10 |
|
11 |
<body>
|
12 |
<div id="wrapper"> |
13 |
Box shadow test. |
14 |
</div>
|
15 |
|
16 |
<div id="wrapper-inset-shadow"> |
17 |
Inset box shadow test. |
18 |
</div>
|
19 |
|
20 |
<div id="wrapper-text-shadow"> |
21 |
Text shadow test. |
22 |
</div>
|
23 |
|
24 |
<div id="wrapper-background-gradient"> |
25 |
Background gradient test. |
26 |
</div>
|
27 |
|
28 |
<div id="wrapper-font-family"> |
29 |
@font-face test in Museo 700 sans. |
30 |
</div>
|
31 |
|
32 |
<div id="wrapper-improve-legibility"> |
33 |
<h1>Improve text legibility and kerning test.</h1> |
34 |
</div>
|
35 |
|
36 |
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script> |
37 |
</body>
|
38 |
</html>
|
1 |
|
2 |
@mixin border-radius($topLeft, $topRight, $bottomRight, $bottomLeft) { |
3 |
-webkit-border-radius: $topLeft $topRight $bottomRight $bottomLeft; |
4 |
-moz-border-radius: $topLeft $topRight $bottomRight $bottomLeft; |
5 |
-ms-border-radius: $topLeft $topRight $bottomRight $bottomLeft; |
6 |
-o-border-radius: $topLeft $topRight $bottomRight $bottomLeft; |
7 |
border-radius: $topLeft $topRight $bottomRight $bottomLeft; |
8 |
}
|
9 |
|
10 |
@mixin background-clip { |
11 |
background-clip: padding-box; |
12 |
}
|
13 |
|
14 |
@mixin combined-radius($topLeft, $topRight, $bottomRight, $bottomLeft) { |
15 |
@include background-clip; |
16 |
@include border-radius($topLeft, $topRight, $bottomRight, $bottomLeft); |
17 |
}
|
18 |
|
19 |
@mixin box-shadow($horizOffset, $vertOffset, $blur, $color) { |
20 |
/*
|
21 |
Blur is an optional parameter, but helps soften the shadow.
|
22 |
Call the mixin by applying pixel values for $horizOffset,
|
23 |
$vertOffset, and $blur, and a hex value for $color. The
|
24 |
border-collapse rule is included to render shadows properly
|
25 |
in IE9.
|
26 |
*/
|
27 |
-webkit-box-shadow: $horizOffset $vertOffset $blur $color; |
28 |
-moz-box-shadow: $horizOffset $vertOffset $blur $color; |
29 |
-ms-box-shadow: $horizOffset $vertOffset $blur $color; |
30 |
-o-box-shadow: $horizOffset $vertOffset $blur $color; |
31 |
box-shadow: $horizOffset $vertOffset $blur $color; |
32 |
border-collapse: separate; |
33 |
}
|
34 |
|
35 |
@mixin box-shadow-inset($horizOffset, $vertOffset, $blur, $color) { |
36 |
/*
|
37 |
Same parameters as @mixin box-shadow, but creates an inner shadow
|
38 |
for pressed or recessed effects.
|
39 |
*/
|
40 |
-webkit-box-shadow: $horizOffset $vertOffset $blur $color inset; |
41 |
-moz-box-shadow: $horizOffset $vertOffset $blur $color inset; |
42 |
-ms-box-shadow: $horizOffset $vertOffset $blur $color inset; |
43 |
-o-box-shadow: $horizOffset $vertOffset $blur $color inset; |
44 |
box-shadow: $horizOffset $vertOffset $blur $color inset; |
45 |
}
|
46 |
|
47 |
@mixin background-gradient($direction, $first-color, $second-color) { |
48 |
background: $first-color; |
49 |
background-image: -webkit-linear-gradient($direction, $first-color, $second-color); |
50 |
background-image: -moz-linear-gradient($direction, $first-color, $second-color); |
51 |
background-image: -ms-linear-gradient($direction, $first-color, $second-color); |
52 |
background-image: -o-linear-gradient($direction, $first-color, $second-color); |
53 |
background-image: linear-gradient($direction, $first-color, $second-color); |
54 |
@include background-clip; |
55 |
}
|
56 |
|
57 |
@mixin typography($font-name, $font-longname) { |
58 |
/*
|
59 |
Make sure to create a /fonts directory at the same level as your /css directory
|
60 |
to ensure the url strings below work properly. Webfonts will include the short
|
61 |
name to reference in font-family declarations, and the long name needed for
|
62 |
url references. The mixin will need to be invoked with the @include declaration
|
63 |
immediately below to load fonts properly.
|
64 |
*/
|
65 |
@font-face { |
66 |
font-family: $font-name; |
67 |
src: url("../fonts/" + $font-longname + ".eot"); |
68 |
src: local('☺'), url("../fonts/" + $font-longname + ".woff") format('woff'), |
69 |
url("../fonts/" + $font-longname + ".ttf") format('truetype'), |
70 |
url("../fonts/" + $font-longname + ".svg#webfontjVVPrHqE") format('svg'); |
71 |
font-weight: normal; |
72 |
font-style: normal; |
73 |
}
|
74 |
}
|
75 |
|
76 |
@include typography("Museo700", "Museo700-Regular-webfont"); |
77 |
|
78 |
@include typography("DroidSerifRegular", "DroidSerif-Regular-webfont"); |
79 |
|
80 |
@mixin improve-legibility { |
81 |
/*
|
82 |
The improve-legibility mixin is recommended for headers and smaller amounts of text
|
83 |
due to the more resource-intensive font-rendering. It is not recommended for mobile
|
84 |
devices. For more information, refer to the MDN article ( https://developer.mozilla.org/en-US/docs/CSS/text-rendering ),
|
85 |
or Gigaom ( http://gigaom.com/2010/08/12/optimizelegibility-for-clearer-text-in-your-browser/ ).
|
86 |
Inspect in Chrome or Safari and toggle the text-rendering: optimizeLegibility rule on and off to
|
87 |
see the effect on kerning. It will also activate ligatures on fonts that support extended sets.
|
88 |
*/
|
89 |
text-rendering: optimizeLegibility; |
90 |
@include text-shadow(0, 0, 1px, transparent); |
91 |
}
|
92 |
|
93 |
|
94 |
|
95 |
body { |
96 |
background: lightblue; |
97 |
font-family: Helvetica, Arial, sans-serif; |
98 |
font-weight: normal; |
99 |
}
|
100 |
|
101 |
#wrapper, |
102 |
#wrapper-inset-shadow, |
103 |
#wrapper-text-shadow, |
104 |
#wrapper-background-gradient, |
105 |
#wrapper-font-family, |
106 |
#wrapper-improve-legibility { |
107 |
width: 750px; |
108 |
height: 250px; |
109 |
background: #eee; |
110 |
margin: 0 auto 20px; |
111 |
padding: 15px 0 0 15px; |
112 |
border: 15px solid rgba(255, 255, 255, 0.3); |
113 |
@include combined-radius(6px, 6px, 6px, 6px); |
114 |
}
|
115 |
|
116 |
#wrapper { |
117 |
@include box-shadow(0, 3px, 3px, #333); |
118 |
}
|
119 |
|
120 |
#wrapper-inset-shadow { |
121 |
@include box-shadow-inset(0, 3px, 3px, #333); |
122 |
}
|
123 |
|
124 |
#wrapper-text-shadow { |
125 |
@include text-shadow(0, 3px, 3px, #333); |
126 |
font-size: 36px; |
127 |
color: blue; |
128 |
}
|
129 |
|
130 |
#wrapper-background-gradient { |
131 |
@include background-gradient(top, #999, #fff); |
132 |
}
|
133 |
|
134 |
#wrapper-font-family { |
135 |
font-family: "Museo700", Helvetica, Arial; |
136 |
}
|
137 |
|
138 |
#wrapper-improve-legibility > h1 { |
139 |
font-family: "DroidSerifRegular", Georgia, "Times New Roman", serif; |
140 |
font-weight: normal; |
141 |
font-size: 48px; |
142 |
@include improve-legibility; |
143 |
}
|
Висновок
Sass міксини хороший спосіб познайомитися з CSS3. Не важливо працюєте ви вже з існуючим кодом, або створюєте сайт з нуля, міксини поліпшать робочий процес, зменшать кількість рядків коду і часу, яке вам доведеться затратити.
Так як дані міксини створені для реалізації властивостей CSS3, ви повинні подбати про запасний план при роботі зі старими браузерами. Деяким сайтам не так важливі тіні і закруглені кути у блоків, і хвилі можна обійтися без них, якщо мова йде про застарілих браузерах. В інших випадках завжди можна скористатися поліфілії, таким як Modernizr, для створення фаллбек CSS властивостей, для відповідних класів.
Сподіваюся вам сподобався даний туторіал, спасибі що прочитали його!
