() 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: Старт > Командная строка
После того как терминал будет открыт, введите следующую команду, чтобы убедиться, что 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 свойств, для соответствующих классов.
Надеюсь вам понравился данный туториал, спасибо что прочитали его!
