Learn Sass for Beginners - Better than CSS
Learn Sass for Beginners - Better than CSS
in this video I will teach you the basic of Sass, SCSS and BEM (block-element-modified) class naming convention standard and principles of responsive design. at the end of this video you will have a basic knowledge of SASS, what is the difference of SASS and SCSS. how Sass Nesting, Variables and Mixing works, how to modularize your sass codes and real world simple web design with sass. everything you are going to see and learn through in this video.
00:00 - Intro
00:17 - What is the different between CSS and Sass
00:31 - What is Sass ?
01:03 - What is CSS ?
01:35 - Problems statement of CSS
02:01 - Sass inbuilds
02:38 - Difference of Sass and SCSS
03:59 - CSS Preprocessor
04:37 - Sass Variables
07:26 - Sass Nesting
08:36 - Sass Modules
12:19 - Mixins in Sass
15:41 - Demo user interface design using sass
16:06 - Sample Project UI Demo
16:58 - Usage of Node Sass
18:04 - Compile Sass to CSS
20:23 - Demo project Sass Variable declaration
20:56 - Sass Nesting in Demo Project
21:29 - Sass and BEM
23:01 - Node Sass watch mode
24:12 - Mixins demo project
25:09 - Responsive design using mixins
26:09 - Demo project GIT repository
References
Sass Beginner Guide
https://sass-lang.com/guide
Node Sass package library
https://www.npmjs.com/package/node-sass
Project Demo GIT Repository
-https://github.com/raheemmohamed/pure...
BEM (Block- Element- Modifier) class Naming convention
https://getbem.com/introduction/
Watch My Other Videos
How to Stay Motivated as a Developer
• Stay Motivated as a Developer
How I Improved My Communication Skills
• How I Improved My Communication Skills
Why Node.js Runtime Environment | How to run Node.js
• Why Node.js Runtime Environment | How to r...
Object Oriented Programming in JavaScript - ECMAScript 5
• Object Oriented Programming in JavaScript ...
Object Oriented Programming way in JavaScript - ECMAScript 6
• Object Oriented Programming in Javascript ...
How to Host Your Website For Free
• How to Host Website For Free with GitHub Page
__________________________
If you like to buy me a coffee ☕️? I'll be happy to have some from you 😊
https://www.buymeacoffee.com/raheem
My official website
https://inproto.net/raheem/
Follow me on LinkedIn
/ raheem-mohamed-293ab1113
Follow me on Github
https://github.com/raheemmohamed
=== Used Royalty-Free Music's ===
Spring Flowers by Keys of Moon | / keysofmoon
Music promoted by https://www.chosic.com/free-music/all/
Creative Commons CC BY 4.0
https://creativecommons.org/licenses/...
Audio Musics Credit Goes to
Royalty-Free Music from www.chosic.com
Video shoot with SONY ZV E10
Video audio record with BOYO SHOTGUN Mic
Video Edit with ADOBE PREMIER PRO 2020
#webdevelopment #coding #programming