This course is focused on SASS, a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). It teaches how SASS extends the capabilities of CSS, making it more powerful with features like variables, nested rules, mixins, functions, and inheritance. The course guides learners through the process of building their own CSS library with SASS, enabling them to create reusable styles that can be included in multiple web development projects. Participants learn to structure their SASS files for maintainability, use partials to organize their code, and compile their SASS into efficient, minified CSS files. By the end of this course, learners are equipped to leverage SASS in developing a custom CSS library that streamlines the process of styling websites and applications.
Overview
COURSE DIFFICULTY
Skills Learned
After completing this online training course, students will be able to:
Compile SASS to CSS
Use and define SASS variables
Organize code with SASS partials
Structure a CSS project
Implement nested rules in SASS
Perform calculations with SASS math functions
Create and utilize maps in SASS
Apply loops to generate styles
Use conditionals to control styling logic
Reference parent selectors
Define and use mixins for reusable styles
Create custom functions in SASS
Generate utility classes with SASS
Establish breakpoints and media queries
01. Getting Started
- Introduction
- Compiling SASS
- Variables
- Partials
02. Making Your Own CSS Library
- Project Structure
- Nested Rules
- Using Math
- Maps
- Loops
- Conditionals
- Parent Selectors
- Mixins
- Functions
- Utilities
- Breakpoints
- Making a Grid System (Part 1)
- Making a Grid System (Part 2)
- Using @extend
- Using the CSS Library
- Purging CSS
- Customizing the Library Using !default
- Extending the Library Yourself
SKILLS LEARNED
Skills Learned
After completing this online training course, students will be able to:
Compile SASS to CSS
Use and define SASS variables
Organize code with SASS partials
Structure a CSS project
Implement nested rules in SASS
Perform calculations with SASS math functions
Create and utilize maps in SASS
Apply loops to generate styles
Use conditionals to control styling logic
Reference parent selectors
Define and use mixins for reusable styles
Create custom functions in SASS
Generate utility classes with SASS
Establish breakpoints and media queries
COURSE OUTLINE
01. Getting Started
- Introduction
- Compiling SASS
- Variables
- Partials
02. Making Your Own CSS Library
- Project Structure
- Nested Rules
- Using Math
- Maps
- Loops
- Conditionals
- Parent Selectors
- Mixins
- Functions
- Utilities
- Breakpoints
- Making a Grid System (Part 1)
- Making a Grid System (Part 2)
- Using @extend
- Using the CSS Library
- Purging CSS
- Customizing the Library Using !default
- Extending the Library Yourself
