Как сделать анимированную кнопку меню на SCSS.
Всем привет! В этой статье мы рассмотрим, как сделать анимированную иконку меню на SCSS.
Помнится, недавно я писал статью, рассказывающую, зачем нужны миксины в Sass. В этой же статье мы рассмотрим конкретный пример их использования, чтобы вы лучше смогли понять, как сильно они могут облегчать жизнь, впрочем, как и сам препроцессор css кода.
Вот вы решили установить себе на сайт красивую иконку меню. Что вы будете делать? Конечно, можно написать свою, а можно использовать уже готовое решение с помощью миксинов для Sass. Давайте рассмотрим конкретный пример.
Мы будем использовать кнопочку Sass Burger. Перейдите на сайт, чтобы посмотреть демо.
Тут же, прямо на сайте под кнопкой, вы можете видеть, как ее использовать:
.burger-icon {
@include burger(25px, 3px, 5px, #222);
}
.circle.is-active .burger-icon {
@include burger-to-cross;
}
Просто, не правда ли? А теперь посмотрите, как она была написана. Для этого нажмите Download on Github внизу страницы и откройте файл burger.scss. Думаю, разница понятна.
Чтобы установить кнопку, просто скачайте все необходимые файлы или установите их через Bower:
bower install sass-burger
Как использовать ее, думаю, уже понятно, а если нет, то вы можете открыть папку Demo(там же на Github) и посмотреть исходный код.
А у меня на этом все. Надеюсь, вы стали лучше понимать, для чего нужны миксины в Sass.
Спасибо за внимание!
-
Создано 04.04.2016 21:11:22
-
Михаил Русаков
Комментарии (1):
Интересно
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.