Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Sass

Готовим вкусные Sass миксины

by
Read Time:12 minsLanguages:

Russian (Pусский) translation by Anton L (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 установлен. Не нужно писать знак доллара - это ваш плейсхолдер.

Вам должна отобразится информация о пути /usr/local/bin или сообщение об ошибке, если Ruby не установлен. Вот вывод моего OS X терминала:

Terminal output for which ruby commandTerminal output for which ruby commandTerminal output for which ruby command

Если вы видите ошибку или знаете, что Ruby у вас не установлен, ознакомьтесь со следующими ресурсами, чтобы начать работу без лишних проблем, во время установки. Процесс установки Ruby не будет освящён в данном туториале, но отлично документирован на сайтах в списке ниже.


Шаг 2: Установите гем Sass

После того, как вы проверили или установили язык Ruby, установка Sass не вызовет сложностей. В терминале введите команду: $ gem install sass. Если у вас нет подходящих прав, необходимо запустить команду с sudo (Super User Do), вот так: $ sudo gem install sass. Через несколько секунд, вы должны увидеть вывод подобно скриншоту ниже.

Terminal output for Sass gem installationTerminal output for Sass gem installationTerminal output for Sass gem installation


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

Так как я выбрал LiveReload, мы настроим его, чтобы он следил за изменениями и компилировал scss в CSS. Кода будет запущен LiveRealod, вы должны увидеть окно с приветствием, показанное ниже. Переместите рабочую директорию в сайдбар с отслеживаемыми директориями (Monitored Folders) в окне LiveReload.

Drag your working folder into LiveReload to start watching for changesDrag your working folder into LiveReload to start watching for changesDrag your working folder into LiveReload to start watching for changes

Далее, взгляните на скомпилировать Sass, LESS, Stylus, Coffescript и другие секции. Нажмите на опции (Options) для выбора пути, куда будет помещён конечный, скомпилированный файл.

Check the Compile SASS, LESS, Stylus, CoffeeScript and Others boxCheck the Compile SASS, LESS, Stylus, CoffeeScript and Others boxCheck the Compile SASS, LESS, Stylus, CoffeeScript and Others box

Вы должны увидеть пустую таблицу с подсвеченными путями и scss/main.scss с галочкой, на первой строке. Нажмите настроить конечную папку (Set Output Folder) По умолчанию будет выбран каталог CSS. Нажмите на настроить конечную папку, далее подтвердить.

Selecting your output folder for compiled SassSelecting your output folder for compiled SassSelecting your output folder for compiled Sass
Selecting your output folder for compiled SassSelecting your output folder for compiled SassSelecting your output folder for compiled Sass
Selecting your output folder for compiled SassSelecting your output folder for compiled SassSelecting your output folder for compiled Sass

Обновите ваш index.html добавив данный код, после чего обновите браузер. Ваш index должен выглядеть, как на изображении ниже.

A basic index.html fileA basic index.html fileA basic index.html file

Для LiveRealod есть дополнение для браузеров FireFox и Chrome, в том случае, если вы хотите поскорее начать работу, быстрее всего будет скопировать Javascript код (из окна LiveReload) в ваш index.html, вставьте его сразу перед закрывающим body тегом. После того как данный кусочек кода будет добавлен, LiveReload будет отслеживать изменения HTML и Sass файлов и автоматически обновлять страницу в браузере, никаких больше Command + R каждые несколько минут.

Теперь, всё необходимое готово и мы можем приступить к созданию миксинов, компилятор сделает остальную работу за нас.


Шаг 4: Border Radius - ваш первый миксин

Как я упомянул раньше, я использую множество особенностей и функций CSS3 для создания структуры веб-страниц. Проблема заключается в том, что данные свойства требует указания вендорных префиксов, на что у меня не хватает терпения, делать это вручную. Мне не придётся дублировать пять похожих CSS строк каждый раз, когда я захочу задать закруглённые углы элементу, вместо этого я лучше напишу один миксин.

Миксины указываются в Sass файлах, посредством объявления @mixin() {}. Каждый раз когда обработчик, к примеру такой как LiveReload, встречает подобный синтаксис, он смотрит есть-ли аргументы в скобках, затем проверяет CSS инструкции внутри угловых скобок. Далее, компилятор обрабатывает данные инструкции и на выходе мы получаем обычную CSS таблицу стилей, main.css в нашем случае.

Откройте файл main.scss и скопируйте код миксина. Когда вы нажмёте сохранить, браузер с открытым index.html будет автоматически обновлён и мы увидим серый div с закруглёнными углами, размером 6 пикселей.

Index.html with a proper border-radius mixinIndex.html with a proper border-radius mixinIndex.html with a proper border-radius mixin


Шаг 5: Расширяем функционал Border Radius миксина

Неплохое начало с нашим первым миксином. Но в миксине border-radius есть недостаток: если наша граница будет иметь свойство opacity (непрозрачность) меньше 100%, по углам будет виден фон блока. Не самый лучший дизайн.

К счастью мы можем запросто это исправить с помощью свойства background-clip. Если вы не знакомы с этим свойством, у Chris Coyier с CSS-Tricks есть отличная статья на эту тему.

Функционал Sass миксинов может быть расширен другими миксинами. Это позволяет написать background-clip отдельно, тем самым данный миксин может быть вызван в border-radius, который мы создали ранее. Добавьте следующий код в main.scss и сохраните файл. После обновления страницы в браузере, вы должны увидеть голубой фон и полу прозрачный светло - голубой радиус границы.

Несмотря на то что изначально мы дублируем строки кода, в нашем распоряжении будет миксин, который можно вызывать повторно, каждый раз когда нам необходимо задать элементу border-radius. Что в свою очередь позволит отобразить элемент, так как мы задумали.


Шаг 6: Text Shadow

Тени для текста - хороший способ сделать типографику и кнопки более выразительными. Я часто использую данный приём для отображения изменения состояния навигации вкладок или лейблов. В то же время работа с тенями текста, довольно раздражающее занятие, так как IE9 не поддерживает их, и в чистом CSS нет обходных путей для этого.

Несмотря на этот факт, я создам миксин с кодом для современных браузеров и бета версии IE 10. Также я реализовал небольшой jQuery скрипт для лучшего отображения text-shadow в IE9 и ниже.

Для современных браузеров, свойство text-shadow выглядит примерно также, как и box-shadow, с горизонтальным и вертикальным смещением, блюром и параметрами цвета. Добавьте следующий код в main.scss и index.html файлы и в результате вы получите трёх пиксельную, размытую, голубоватую тень позади текста.

index.html, добавьте сразу после закрывающего тега div#wrapper


Шаг 7: Дополнительные миксины - утлиты

В качестве последнего шага, я создал миксины для box shadows, фоновых градиентов, объявления @font-face и улучшил отображение шрифтов. Миксины были проверены в современных браузерах (Firefox, Chrome, Safari, Opera, IE9) и включают все необходимые вендорные префиксы.

Я не буду углубляться в детали каждого из них; комментарии со всеми деталями находятся в файле main.scss. Миксины следуют такому же формату и могут быть улучшены в зависимости от ваших потребностей. Если вам понадобится дополнительный функционал в CSS, миксин может быть переписан для этого.

Обновите ваш index.html и main.scss файлы добавив следующий код. После обновления страницы, вы должны увидеть в окне браузера несколько блоков, каждый обладает различными тенями, за которые отвечают созданные миксины.


Заключение

Sass миксины хороший способ познакомиться с CSS3. Не важно работаете вы уже с существующим кодом, либо создаёте сайт с нуля, миксины улучшат рабочий процесс, уменьшат количество строк кода и времени, которое вам придётся затратить.

Так как данные миксины созданы для реализации свойств CSS3, вы должны позаботиться о запасном плане при работе со старыми браузерами. Некоторым сайтам не так важны тени и закруглённые углы у блоков, и волне можно обойтись без них, если речь идёт о устаревших браузерах. В других случаях всегда можно воспользоваться полифилом, таким как Modernizr, для создания фаллбэк CSS свойств, для соответствующих классов.

Надеюсь вам понравился данный туториал, спасибо что прочитали его!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.