CSS БОЛЬШЕ НЕ НУЖЕН! Sass и SCSS. Часть 1

Хватит мучиться с громоздкими таблицами стилей! Пошлите CSS подальше и освойте гораздо более мощный и удобный язык Sass! В этой части мы изучим часть основных возможностей языка Sass, а также научимся быстро создавать компактные и динамические таблицы стилей. Для освоения материала достаточно базовых знаний таблиц стилей CSS и HTML (или Pug). ➡️ Следующая часть:    • ЦВЕТА. АДАПТИВНАЯ ВЕРСТКА. Sass и SCSS. Ча...   📂 Материалы ролика: • Основы языка разметки Pug (используется в ролике вместо HTML):    • HTML БОЛЬШЕ НЕ НУЖЕН! Pug. Полный курс. Ча...   • Редактор CodePen:
🔗 Полезные ссылки • Официальный сайт Sass (документация с примерами):
• Sass на npm:
• Sass на GitHub:
• Пипетка для получения цвета с экрана (используется в ролике):
📜 Содержание: 0:00 Вступление 1:33 Проблемы CSS 2:31 Что такое Sass? 3:00 Редактор CodePen 3:25 Два синтаксиса: Sass и SCSS 5:35 Пример разметки со стилями 6:51 Вложенные правила 10:05 Просмотр готового CSS кода 10:30 Вложенность и комбинаторы 11:11 Вложенность и списки селекторов 11:49 Не злоупотребляйте вложенностью! 12:28 Селектор родителя 14:14 Селекторы ДО текущего 15:13 Особенность селектора родителя 16:09 Добавление суффиксов 18:09 Добавление селекторов 18:34 Ограничение селектора родителя 19:02 Пример: Письма 26:36 Переменные Sass 28:10 Глобальные и локальные переменные 29:54 Разница между Sass и CSS переменными 33:19 Интерполяция в селекторах 35:43 Интерполяция везде 37:30 at-rules 38:19 Условия 41:10 Условие внутри значения свойства 42:27 Цикл for 44:18 Цикл each 45:54 Итерация сложных списков 48:33 Пример: Картинки с настраиваемой шириной 53:59 Миксин без параметров 55:48 Миксин с параметрами 58:18 Миксин: значения по умолчанию 59:24 Миксин: аргументы по имени 1:00:58 Добавление правил в миксин 1:02:13 Пример: Стилизация пользователей 1:14:28 Заключение #sass #scss #css