1 of 9

Препроцесори SASS (SCSS)�частина 1

2 of 9

Сьогодні розглянемо такі можливості препроцесора SASS (SCSS)

  • Змінні: створення, використання, приєднання (конкатенація) до рядків, інтерполяція рядків
  • Математичні оператори
  • Циклічний оператор @for
  • Список

​

3 of 9

Створення та використання змінних в SCSS

Імена змінних починаються зі знаку $. Після імені ставимо двокрапку і задаємо значення. Далі ці змінні можна використовувати в коді:

Результат:

4 of 9

Приєднання змінних до рядків

Результат:

Приклади:

5 of 9

Інтерполяція рядків

В рядки можна вбудовувати змінні або вирази:

Результат

6 of 9

Інтерполяція селекторів

В селектори правил також можна вбудовувати змінні або вирази:

Результат:

7 of 9

Математичні оператори

Результат:

8 of 9

Циклічний оператор @for

Результат:

9 of 9

Списки

Результат: