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

Хватит мучиться с громоздкими таблицами стилей!
Пошлите CSS подальше и освойте гораздо более мощный и удобный язык Sass!
В этой части мы изучим часть основных возможностей языка Sass, а также научимся быстро создавать компактные и динамические таблицы стилей.

Для освоения материала достаточно базовых знаний таблиц стилей CSS и HTML (или Pug).

➡️ Следующая часть:
   • ЦВЕТА. АДАПТИВНАЯ ВЕРСТКА. Sass и SCS...  

📂 Материалы ролика:

• Основы языка разметки 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: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