1 of 13

Препроцесори SASS

Частина 2

2 of 13

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

  • Підключення файлів
  • Домішки (міксини)
  • Вбудовані правила для селекторів-нащадків
  • ​

3 of 13

Підключення файлів

_init.scss

demo_file.scss

Результат: demo_file.css

4 of 13

Вбудовані правила

5 of 13

Завдання. Створіть стилі в SASS для таблиці, її комірок та посилань в комірках td з використанням вкладеності

Стилі повинні примінятись лише до таблиць із класом .table

6 of 13

Домішки (Міксини)

Домішки дають можливість визначити стилі, які будуть повторюватись в таблицях стилів:

Результат

7 of 13

Завдання. Створити домішку, якою можна задати такі стилі розмірів для блоків

8 of 13

Посилання на батьківський селектор

Результат

9 of 13

Завдання. Створіть домішку string-concat, яка для різних тегів генерує контент в псевдоелементі after:

10 of 13

Оператор @each

Результат

11 of 13

Мапи (словники)

Результат

12 of 13

Завдання. Потрібно створити стилі для таких блоків

  • Для всіх блоків повинен бути спільний клас alert
  • Для кожного типу блоку повинен бути окремий (контекстний) клас: alert-success, alert-info, alert-warning, alert-danger
  • В спільному класі потрібно задати властивості: внутрішні відступи, зовнішні відступи, рамка, заокруглення кутів
  • В контекстних класах потрібно задати: колір фону, колір тексту і колір рамки

$success-colors: #5cb85c, #a0d6a0, #48a548;

$info-colors: #5bc0de, #9cd9eb, #2badd4;

$warning-colors: #f0ad4e, #f5c684, #dd8913;

$danger-colors: #d9534f, #e79290, #c32f2a;

​

13 of 13

Вимоги до коду

  • Значення кольорів кожного типу блоку повинні заноситись у відповідні списки.
  • Для задання відповідності між типами блоків та списками їх кольорів потрібно створити мапу $colors
  • Для створення контекстних класів використовуйте символ & як посилання на батьківський клас alert
  • Весь код помістити у не більше ніж 18 рядків