ЦВЕТА. АДАПТИВНАЯ ВЕРСТКА. Sass и SCSS. Часть 2
Продолжаем изучать движок Sass (и синтаксис SCSS). В этой части изучим основные модули, с помощью которых мы научимся аки клятые волшебники преобразовывать цвета, создавать и использовать сложные объекты, а также брать квадратные корни и пользоваться другими достижениями математики!
Для освоения материала достаточно базовых знаний таблиц стилей CSS и HTML (или Pug).
⬅️ Предыдущая часть:
• CSS БОЛЬШЕ НЕ НУЖЕН! Sass и SCSS. Час...
➡️ Следующая часть:
• SASS В РЕАЛЬНЫХ ПРОЕКТАХ. Sass и SCSS...
📂 Материалы ролика:
• Основы языка разметки Pug (используется в ролике вместо HTML):
• HTML БОЛЬШЕ НЕ НУЖЕН! Pug. Полный кур...
• Редактор CodePen:
https://codepen.io
🔗 Полезные ссылки
• Официальный сайт Sass (документация с примерами):
https://sass-lang.com/
• Sass на npm:
https://www.npmjs.com/package/sass
• Sass на GitHub:
https://github.com/sass/dart-sass
• Программа для работы с цветами (используется в ролике):
http://www.blacksunsoftware.com/color...
📜 Содержание:
0:00 Вступление
1:18 Редактор CodePen
2:06 Что такое SASS модуль?
3:12 Подключение модулей. Правило use
4:14 Подключение модуля color
4:46 RGB данные цвета
6:56 Прозрачность цвета
7:27 Тон цвета
8:11 Яркость цвета
8:49 Пример: Использование данных о цвете
10:53 Абсолютное изменение цвета. Функция change
13:27 Относительное изменение цвета. Функция adjust
14:38 Относительное изменение цвета. Функция scale
15:32 Смешивание цветов
16:33 Пример: Акцент-блоки с авто-цветами
28:42 Что такое map?
30:16 Подключение модуля map
30:34 Обращение к полям. Функция get
32:05 Проверка наличия поля. Функция has-key
33:21 Объединение объектов. Функция merge
35:17 Итерация через цикл each
36:58 Массивы ключей и значений
37:34 Пример: Адаптивная верстка
57:28 Про остальные модули
57:51 Математические константы
58:23 Математические функции
59:51 Пример: Геометрический логотип
1:05:10 Функция content-exists
1:07:06 Заключение
#sass #scss #css
