SASS/SCSS Preprocessors - Course in One Video. NPM, Parcel, package.json. Theory and Practice
🟢 SASS (Syntactically Awesome Style Sheets) and SCSS (Sassy CSS) are CSS preprocessor languages that extend the capabilities of regular CSS, making it more powerful and flexible.
Today, SASS is like a mini-programming language with a wide range of features.
➡️ Timeline ➡️
00:00:00 Block 1 - Start
00:00:45 Preprocessors
00:04:29 Live SASS Compiler
00:05:22 Differences between SASS and SCSS
00:06:23 Variables and Compilation
00:08:24 Live SASS Compiler Configuration
00:11:43 Source Map
00:12:46 Separate Files and Compilation
00:14:30 The Import Rule and Its Problem
00:16:31 The Use Rule Instead of Import
00:17:59 Private Variables
00:18:26 Import Delegation
00:20:46 Start of Layout
00:21:45 Border Decomposition
00:23:36 Card Markup
00:25:37 SCSS Styles for cards
00:26:50 mixins
00:31:37 card nesting and styling
00:37:52 mobile adaptation with media
00:40:39 block 2 - start
00:41:30 npm package manager
00:42:20 package.json file
00:44:00 parcel build tool and npm package sass
00:46:29 dependencies in node modules
00:49:43 scripts and running via the command line
00:51:23 sass preprocessor commands
00:52:37 parcel installation, dependencies, scripts
00:56:57 placeholder templating
01:02:24 functions
01:06:16 if conditionals
01:09:15 each loops
01:11:36 built-in modules - colors, strings, and Math
01:21:48 Finish
▶ Main Telegram: https://t.me/Dmitry_Kolotilshikov
▶ Private Telegram (Video without VPN + you can SUPPORT here): https://t.me/tribute/app?startapp=sm6T
▶ GitHub: https://github.com/DmitryKolotilshikov
▶ Linkedin: / kolotilshikov
▶ Boosty: https://boosty.to/dmitry_ko
▶ Graphic Design and Animation: https://t.me/getlogo
📎 PDF FILE with code for each lesson in the Telegram channel 📎
⚡️ Treats ⚡️
🔑 GIT Course (one video): • Полный КУРС 2024 по GIT. Команды, терминал...
🔑 CSS Flexbox (2 videos): • 47. Frontender[1.0] FLEXBOX (флексбокс) те...
🔑 CSS Grid (2 videos): • 78. Frontender[1.0] CSS GRID | Теория, Пра...
🔑 SCSS Preprocessors (2 videos): • 82. Frontender[1.0] ПРЕПРОЦЕССОРЫ SASS | S...
🔑 SVG, SVG Sprites (2 videos): • 53. Frontender[1.0] Векторная графика SVG ...
🔑 Level 1 - Layout (8 videos): • 57. Frontender[1.0] Верстка первого макета...
🔑 Level 2 - Layout (8 videos): • 70. Frontender[1.0] ВЕРСТКА второго макета...
🔑 Level 3 - Layout (10 videos): • 84. Frontender[1.0] ВЕРСТКА Макета. Обзор ...
⚙️ The Frontender [1.0] course is divided into 3 modules:
1) HTML, CSS, SCSS, BEM, Flexbox, Grid, Bootstrap, GIT, FIGMA, 3 layouts (100 lessons);
2) JavaScript, problem solving, writing multiple applications;
3) React, Typescript, Redux, writing a full-fledged application;
📢 Author: Dmitry Kolotilshchikov
#js #frontend #javascript