Изучение препроцессора SASS / SCSS

6 уроков Консультации

Урок #4 - Использование миксинов

Урок #4 - Использование миксинов


CSS3HTML5

Для сокращения кода в SASS используются специальные шаблоны со свойствами - миксины. В ходе урока вы научитесь создавать миксины, передавать в них параметры, а также использовать их для различных объектов.

Видео урок:

Миксины в SASS выполняют роль шаблона данных, который можно подключить к блоку, тем самым добавив в него множество стилей из шаблона.


Для создания миксина используйте ключевое слово @mixin:

@mixin someName {
	// Здесь код и различные стили
}

Без подключения, миксин не сработает и в CSS файле ничего не измениться. Для подключения миксина используйте ключевое слово @include.

#block {
	@include someName;
}

Также в миксины можно передавать параметры. Для его после имени миксина пропишите круглые скобки ( ), после чего в них пропишите переменные, которые вам необходимо передать.

Материалы для курса

sass-lesson-4.zip Необходима подписка!

Чтобы скачивать материалы к видеокурсам необходимо оформить подписку на сайт

Исходный код

Весь код будет доступен после подписки на проект!

Задание к уроку

Необходимо оформить подписку на проект, чтобы получить доступ ко всем домашним заданиям!

Большое задание по курсу

Вам необходимо оформить подписку на сайте, чтобы получить большое задание. Такие задания есть к каждому курсу. В них входит задание, методика решения, а также "Готовое решение".
PS: подобные задания доступны при подписке от 1 месяца!


CSS3HTML5

Также стоит посмотреть