SASS / SCSS

Урок #7 - Условия, циклы и оператор @content

Урок #7 - Условия, циклы и оператор @content

В ходе урока вы познакомитесь с условными конструкциями, с циклами, а также с оператором @content. Вы научитесь записывать различные стили в зависимости от условия или же от цикла.

Видеоурок

Препроцессор SASS позволяет добавить в код различные конструкции и ветвления для создания условий, циклов и перебора данных. Среди таких конструкций существуют: @if, @for, @while, @each. Первые две конструкции были описаны в уроке. Информацию про while, а также each можно почитать здесь и здесь соответсвенно.

Условие if

Для описания условий используется оператор if. Синтаксис оператора следующий:

p { // Объект
	// Различные условия. Если условие верно, то будет добавлен стиль
	@if 1 + 1 == 2 { border: 1px solid; }
	@if 5 < 3 { border: 2px dotted; }
	@if null { border: 3px double; }
}

Помимо if, можно дописывать дополнительные условия, например:

$type: monster;
p {
	@if $type == ocean {
		color: blue;
		// Дополнительное условие. Проверяется, если предыдущее условие было неверным
	} @else if $type == matador {
		color: red;
	} @else if $type == monster {
		color: green;
	} @else { // Выполниться, если предыдущие условия были неверными
		color: black;
	}
}

Цикл for

Для перебора элементов или создания множества классов можно использовать цикл for. Пример работы ниже:

@for $i from 1 through 3 {
	.item-#{$i} { width: 2em * $i; }
}

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

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

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

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

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

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

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

Вёрстка адаптивного сайта на Bootstrap 4
6 уроков
Изучение CSS/CSS3 от нуля до гуру!
15 уроков
Видеокурс по PHP, MySQL / Создание динамического сайта
Создание адаптивного сайта
4 урока
Верстка сайта на HTML5 и CSS3
13 уроков
Создание сайта с нуля | Полноценная верстка сайта
11 уроков