filmov
tv
Learn SCSS (Sass) and BEM naming methodology by refactoring - HTML/CSS Tutorial

Показать описание
In this video we learn the basics of the BEM naming methodology and we go from the basics of SCSS to abstracting things into a modular architecture.
This is more in the learn-by-doing style of teaching. Instead of building something from scratch with SCSS I thought it would be more beneficial to take something already built with CSS and refactor into modular SCSS. This teaches you how to go back to any existing projects you have and refactor them with SCSS if you want.
If you have any questions or feedback let me know in the comments!
** TIMESTAMPS **
0:50 | BEM Overview
3:02 | Blocks and elements
5:53 | Modifiers
6:40 | Project Overview
9:40 | Project Setup/Configuring Koala
12:50 | Outlining upcoming lessons
13:35 | Variables overview
14:16 | Nesting overview
16:32 | Mixins overview
16:50 | if/else conditionals overview
18:07 | For loops overview
18:28 | Extending styles overview
20:00 | Partials & architecture overview
20:45 | Variables in depth
29:19 | Color variables in depth
32:40 | Font variables in depth
33:48 | Nesting in depth
40:45 | Nesting media queries
55:05 | Mixins & If/else conditionals
1:11:50 | For loops
1:19:27 | Architecture
This is more in the learn-by-doing style of teaching. Instead of building something from scratch with SCSS I thought it would be more beneficial to take something already built with CSS and refactor into modular SCSS. This teaches you how to go back to any existing projects you have and refactor them with SCSS if you want.
If you have any questions or feedback let me know in the comments!
** TIMESTAMPS **
0:50 | BEM Overview
3:02 | Blocks and elements
5:53 | Modifiers
6:40 | Project Overview
9:40 | Project Setup/Configuring Koala
12:50 | Outlining upcoming lessons
13:35 | Variables overview
14:16 | Nesting overview
16:32 | Mixins overview
16:50 | if/else conditionals overview
18:07 | For loops overview
18:28 | Extending styles overview
20:00 | Partials & architecture overview
20:45 | Variables in depth
29:19 | Color variables in depth
32:40 | Font variables in depth
33:48 | Nesting in depth
40:45 | Nesting media queries
55:05 | Mixins & If/else conditionals
1:11:50 | For loops
1:19:27 | Architecture
Комментарии