SASS tutorial for BEGINNERS, Zero to Mastery || Getting Started with SASS
1.4 هزار بار بازدید -
2 سال پیش
-
⌚Timestamp⌚Introduction0:00:00
⌚Timestamp⌚
Introduction
0:00:00 Welcome
0:00:56 What is Sass?
Configuring the Work Environment
0:02:43 Installing SublimeText 3 and Packages
0:08:10 Exploring the Starting Files
0:13:53 Installing Koala, a Sass Compiler
0:16:26 Creating a Sass Stylesheet
0:21:04 Comments in Sass
0:24:37 Including Simple Variables, Compiling, and Viewing Results
0:32:12 You Try It: Creating Sass Styles with Variables
Working with Variables, Math, and Functions
0:25:53 Global Variables, Local Variables, and Default Values
0:44:40 Manipulating Variables through Math
0:50:48 Manipulating Variables with Core Math Functions
0:57:58 Manipulating Variables with Core Color Functions
1:08:38 You Try It: Manipulating Variables
1:12:36 Writing Your Own Functions
Nesting Expressions
1:18:46 Understanding Nesting with Sass
1:21:53 Using & to Reference Parent Selectors
1:24:55 Nesting Within Selectors and Using Nesting with Caution
1:30:47 You Try It: Nesting
Mixins and Extend
1:33:52 Creating and Using Simple mixins
1:41:14 Understanding and Creating mixins with Variable Arguments
1:49:52 Creating and Using extend
1:54:45 Eliminating Extra Classes with extends
1:58:20 Creating Multiple extends
2:00:59 Chaining extends
2:04:28 Extend-only Selectors
2:09:23 Understanding the Difference Between mixin and extend
2:12:28 You Try It: mixins and extend
Understanding if and else
2:18:57 Understanding @if
2:24:33 Working with @if/@else and Default mixin Values
2:31:28 Media Queries, mixins, and @if/@else
File Management and Organization
2:41:56 Understanding, Organizing, and Compiling Sass Partials and Files
2:52:57 Incorporating External CSS Files
2:56:31 Preparing for Site Launch
Conclusion
3:00:42 Goodbye and Next Steps
Please subscribe to your YouTube channel, 👍like and share 📎 the video with your loved ones, and don't forget to turn on notifications by clicking on the bell icon @codewithjimmy
About
This video tutorial provides an overview of Sass, a powerful tool for CSS designers that allows them to create more efficient and organized style sheets. By leveraging data structures like variables, if/else statements, functions, and loops, designers can avoid repetition and make their code easier to follow. The tutorial covers the installation and configuration of a Sass compiler, the differences between Sass and CSS, and the syntax for both Sass and SCSS. You can use any text editor you prefer, but the tutorial recommends SublimeText3 and Koala for compiling Sass files. The tutorial also covers best practices for file management and provides hands-on experience creating a real-world website with Sass. By the end of this tutorial, you'll be equipped with the knowledge to use Sass to streamline your CSS design process.
This Course is solely for educational use. Our goal is to provide Quality learning to all Students without charge. As everyone is mortal, education should be open to all. All rights reserved by instructor. All appreciation to the teacher. If you have any issues with this video, please reach out. [email protected]
Introduction
0:00:00 Welcome
0:00:56 What is Sass?
Configuring the Work Environment
0:02:43 Installing SublimeText 3 and Packages
0:08:10 Exploring the Starting Files
0:13:53 Installing Koala, a Sass Compiler
0:16:26 Creating a Sass Stylesheet
0:21:04 Comments in Sass
0:24:37 Including Simple Variables, Compiling, and Viewing Results
0:32:12 You Try It: Creating Sass Styles with Variables
Working with Variables, Math, and Functions
0:25:53 Global Variables, Local Variables, and Default Values
0:44:40 Manipulating Variables through Math
0:50:48 Manipulating Variables with Core Math Functions
0:57:58 Manipulating Variables with Core Color Functions
1:08:38 You Try It: Manipulating Variables
1:12:36 Writing Your Own Functions
Nesting Expressions
1:18:46 Understanding Nesting with Sass
1:21:53 Using & to Reference Parent Selectors
1:24:55 Nesting Within Selectors and Using Nesting with Caution
1:30:47 You Try It: Nesting
Mixins and Extend
1:33:52 Creating and Using Simple mixins
1:41:14 Understanding and Creating mixins with Variable Arguments
1:49:52 Creating and Using extend
1:54:45 Eliminating Extra Classes with extends
1:58:20 Creating Multiple extends
2:00:59 Chaining extends
2:04:28 Extend-only Selectors
2:09:23 Understanding the Difference Between mixin and extend
2:12:28 You Try It: mixins and extend
Understanding if and else
2:18:57 Understanding @if
2:24:33 Working with @if/@else and Default mixin Values
2:31:28 Media Queries, mixins, and @if/@else
File Management and Organization
2:41:56 Understanding, Organizing, and Compiling Sass Partials and Files
2:52:57 Incorporating External CSS Files
2:56:31 Preparing for Site Launch
Conclusion
3:00:42 Goodbye and Next Steps
Please subscribe to your YouTube channel, 👍like and share 📎 the video with your loved ones, and don't forget to turn on notifications by clicking on the bell icon @codewithjimmy
About
This video tutorial provides an overview of Sass, a powerful tool for CSS designers that allows them to create more efficient and organized style sheets. By leveraging data structures like variables, if/else statements, functions, and loops, designers can avoid repetition and make their code easier to follow. The tutorial covers the installation and configuration of a Sass compiler, the differences between Sass and CSS, and the syntax for both Sass and SCSS. You can use any text editor you prefer, but the tutorial recommends SublimeText3 and Koala for compiling Sass files. The tutorial also covers best practices for file management and provides hands-on experience creating a real-world website with Sass. By the end of this tutorial, you'll be equipped with the knowledge to use Sass to streamline your CSS design process.
This Course is solely for educational use. Our goal is to provide Quality learning to all Students without charge. As everyone is mortal, education should be open to all. All rights reserved by instructor. All appreciation to the teacher. If you have any issues with this video, please reach out. [email protected]
2 سال پیش
در تاریخ 1401/10/05 منتشر شده
است.
1,447
بـار بازدید شده