Mike North
Stripe
Sass Fundamentals
3 hours, 44 minutes CC
Course Description
Leverage the Sass preprocessing to empower your CSS practices and master styling complex applications. Mike will show you how styles can be modularized and reused -- avoiding repetition and redundancy, while keeping everything readable and maintainable.
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseLearn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Sass Fundamentals
Section Duration: 13 minutes
Mike North introduces his Sass Fundamentals course: Sass is a scripting language that is interpreted into Cascading Style Sheets (CSS).
Reviewing the problems with developing CSS, Mike illustrates the need for a styling scripting language.
From keeping styles organized and variables, Mike discusses the benefits of using a preprocessor like Sass. A preprocessor is a program that processes its input data to produce output that is used as input to another program.
Mike reviews the agenda for the course including Sass origins, variables, control flow, CSS architecture with BEM, and Sass functions.
Sass Basics
Section Duration: 45 minutes
Mike introduces basics of Sass that includes syntax, nesting, and powerful Sass selectors. Mike also takes a question from a student.
In this challenge, students write Sass rules that need to be fixed to pass tests. Then Mike takes a question from a student.
Mike walks through the solution to Challenge 1 and takes questions from students.
In this challenge, students write Sass rules that allow for two-column switching.
Mike walks through the solution to Challenge 2 and takes questions from students.
Sass Variables
Section Duration: 26 minutes
CSS's @import allows for splitting CSS into smaller, more maintainable portions; however, there is a cost of a separate HTTP request for @import. Sass's @import directive takes those different files and combines them into one file. Also, Sass’s import can include Partials, which are files denoted with a “_” before the file name and contain little snippets of CSS that you can add in other Sass files. Partials are not generated into CSS as-is like like other Sass files.
In this challenge, students import a partial with Sass and fix styles with Sass rules.
Mike walks through the solution to Challenge 3 and takes questions from students.
Sass Mixins
Section Duration: 32 minutes
Mike demonstrates using Sass mixins and using arguments with mixins. Sass mixins are groups of CSS declarations to reuse throughout your site's style sheet.
In this challenge, students import a partial with Sass and fix styles with Sass rules.
Mike walks through the solution to Challenge 4 and takes questions from students.
Passing arguments through mixins, Mike demonstrates how to extend the power of writing CSS rules with Sass.
In this challenge, students using mixins with arguments to create a cross-browser range inputs
Mike walks through the solution to Challenge 5.
Sass Functions
Section Duration: 24 minutes
Mike demonstrates some of the predefined functions available in Sass, specifically the color functions.
In this challenge, students create color themes when styling HTML buttons.
Mike walks through the solution to Challenge 6 and takes questions from students.
Control Flow
Section Duration: 7 minutes
Mike shows that @if directive takes an expression and uses the styles nested beneath it only if the expression returns anything other than false or null.
In this challenge, students use a conditional in their mixin: setting the text color to white for buttons only if the brightness value of the background color is less than 70%.
Mike walks through the solution to Challenge 7.
Data Structures
Section Duration: 25 minutes
Reviewing data structures in Sass, Mike demonstrates common programming techniques like loops, lists, each, in Sass.
In this challenge, students use @for, @each, and data structures to create CSS rules for moving elements in five-pixel increments.
Mike walks through the solution to Challenge 8 and takes questions from students.
CSS Architecture
Section Duration: 31 minutes
In discussing CSS architecture, Mike reviews and codes in the Block, Element, Modifier methodology (BEM), which is a naming convention for classes in HTML and CSS.
In this challenge, students create CSS rules for buttons in the BEM naming convention.
Mike walks through the solution to Challenge 9 and takes questions from students.
To help keep Sass writing DRY (Don't Repeat Yourself), which is the coding practicing the reducing repetition of information of all kinds, Mike reviews @extend in Sass that allows for sharing of CSS properties from one selector to another.
In this challenge, students use @extend to modify the visual presentation of buttons.
Mike walks through the solution to Challenge 10 and takes questions from students.
Working with Sass Functions
Section Duration: 15 minutes
Mike demonstrates writing functions in Sass.
In this challenge, students write a Sass function to check a color scheme's legibility by comparing the luminance of the colors.
Mike walks through the solution to Challenge 11 and takes questions from students.
Wrapping Up Sass Fundamentals
Section Duration: 1 minute
Mike answer a question and concludes the course by thanking the students.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops