SASS/SCSS ПРЕПРОЦЕССОРЫ - КУРС в одном видео. NPM, Parcel, Package json. Теория и Практика

🟢 SASS (Syntactically Awesome Style Sheets) и SCSS (Sassy CSS) - это языки препроцессоров CSS, которые расширяют возможности обычного CSS и делают его более мощным и гибким. На сегодняшний день SASS это уже как мини-язык программирование, который обладает широким набором возможностей. ➡️ таймлайн ➡️ 00:00:00 блок 1 - старт 00:00:45 препроцессоры 00:04:29 Live SASS Compiler 00:05:22 отличия SASS и SCSS 00:06:23 переменная и компиляция 00:08:24 конфигурация Live SASS Compiler 00:11:43 source map 00:12:46 отдельные файлы и компиляция 00:14:30 правило импорт и его проблема 00:16:31 правило use вместо импорта 00:17:59 приватные переменные 00:18:26 делегирование импортов 00:20:46 начало верстки 00:21:45 декомпозиция border 00:23:36 разметка карточек 00:25:37 стили scss для карточек 00:26:50 миксины 00:31:37 вложенность и стилизация карточек 00:37:52 мобильная адаптация с media 00:40:39 блок 2 - старт 00:41:30 менеджер пакетов npm 00:42:20 файл package json 00:44:00 инструмент сборки parcel и npm пакет sass 00:46:29 зависимости в node modules 00:49:43 скрипты и запуск через командую строку 00:51:23 команды препроцессора sass 00:52:37 установка parcel, зависимости, скрипты 00:56:57 шаблонизация placeholders 01:02:24 функции functions 01:06:16 условные состояния if 01:09:15 циклы each 01:11:36 встроенные модули - цвета, строки и math 01:21:48 финиш ▶ основной Telegram:
▶ приватный Telegram (Видео без VPN + ПОДДЕРЖАТЬ можно тут):
▶ GitHub:
▶ Linkedin:   / kolotilshikov   ▶ Boosty:
▶ Графический дизайн и анимация:
📎 PDF ФАЙЛ с кодом к каждому уроке в телеграм канале 📎 ⚡️ вкусняхи ⚡️ 🔑 Курс по GIT (одно видео):    • Полный КУРС 2024 по GIT. Команды, терминал...   🔑 CSS Flexbox (2 видео):    • 47. Frontender[1.0] FLEXBOX (флексбокс) те...   🔑 CSS Grid (2 видео):    • 78. Frontender[1.0] CSS GRID | Теория, Пра...   🔑 Препроцессоры SCSS (2 видео):    • 82. Frontender[1.0] ПРЕПРОЦЕССОРЫ SASS | S...   🔑 SVG, svg-спрайты (2 видео):    • 53. Frontender[1.0] Векторная графика SVG ...   🔑 1 уровень - Верстка макета (8 видео):    • 57. Frontender[1.0] Верстка первого макета...   🔑 2 уровень - Верстка макета (8 видео):    • 70. Frontender[1.0] ВЕРСТКА второго макета...   🔑 3 уровень - Верстка макета (10 видео):    • 84. Frontender[1.0] ВЕРСТКА Макета. Обзор ...   ⚙️ Курс Frontender[1.0] разделен на 3 модуля: 1) HTML, CSS, SCSS, БЭМ, Flexbox, Grid, Bootstrap, GIT, FIGMA, верстка 3 макетов (100 уроков); 2) JavaScript, решение задач, написание нескольких приложений; 3) React, Typescript, Redux написание полноценного приложения; 📢 Автор: Дмитрий Колотильщиков #js #frontend #javascript

Смотрите также