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

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

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

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


CSS3HTML5

В ходе урока вы познакомитесь с условными конструкциями, с циклами, а также с оператором @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; }
}

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

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

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

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

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

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

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


CSS3HTML5

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