Урок #7 - Условия, циклы и оператор @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; }
}