Table of Contents
Sass Fundamentals
Introduction
Mike North introduces his Sass Fundamentals course: Sass is a scripting language that is interpreted into Cascading Style Sheets (CSS).CSS Pitfalls
Reviewing the problems with developing CSS, Mike illustrates the need for a styling scripting language.Preprocesser Benefits
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.Course Agenda
Mike reviews the agenda for the course including Sass origins, variables, control flow, CSS architecture with BEM, and Sass functions.
Sass Basics
Syntax, Nesting, & Selectors
Mike introduces basics of Sass that includes syntax, nesting, and powerful Sass selectors. Mike also takes a question from a student.Challenge 1: Parental Selectors
In this challenge, students write Sass rules that need to be fixed to pass tests. Then Mike takes a question from a student.Challenge 1: Solution
Mike walks through the solution to Challenge 1 and takes questions from students.Challenge 2: Parental Selectors 2
In this challenge, students write Sass rules that allow for two-column switching.Challenge 2: Solution
Mike walks through the solution to Challenge 2 and takes questions from students.
Sass Variables
Sass @import and Variables
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.Challenge 3: Imports and Variables
In this challenge, students import a partial with Sass and fix styles with Sass rules.Challenge 3: Solution
Mike walks through the solution to Challenge 3 and takes questions from students.
Sass Mixins
Sass Mixins and Arguments
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.Challenge 4: Mixins
In this challenge, students import a partial with Sass and fix styles with Sass rules.Challenge 4: Solution
Mike walks through the solution to Challenge 4 and takes questions from students.Default Argument Values
Passing arguments through mixins, Mike demonstrates how to extend the power of writing CSS rules with Sass.Challenge 5: Mixins 2
In this challenge, students using mixins with arguments to create a cross-browser range inputsChallenge 5: Solutions
Mike walks through the solution to Challenge 5.
Sass Functions
Introducing Sass Functions
Mike demonstrates some of the predefined functions available in Sass, specifically the color functions.Challenge 6: Color Functions
In this challenge, students create color themes when styling HTML buttons.Challenge 6: Solutions
Mike walks through the solution to Challenge 6 and takes questions from students.
Control Flow
@if Sass Directive
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.Challenge 7: Control Flow
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%.Challenge 7: Solution
Mike walks through the solution to Challenge 7.
Data Structures
Data Structures
Reviewing data structures in Sass, Mike demonstrates common programming techniques like loops, lists, each, in Sass.Challenge 8: Nudging Classes
In this challenge, students use @for, @each, and data structures to create CSS rules for moving elements in five-pixel increments.Challenge 8: Solution
Mike walks through the solution to Challenge 8 and takes questions from students.
CSS Architecture
BEM Introduction
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.Challenge 9: BEM Buttons
In this challenge, students create CSS rules for buttons in the BEM naming convention.Challenge 9: Solution
Mike walks through the solution to Challenge 9 and takes questions from students.Reusing Style with Mixins
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.Challenge 10: @extend
In this challenge, students use @extend to modify the visual presentation of buttons.Challenge 10: Solution
Mike walks through the solution to Challenge 10 and takes questions from students.
Working with Sass Functions
Writing Sass Functions
Mike demonstrates writing functions in Sass.Challenge 11: Relative Luminance in Sass
In this challenge, students write a Sass function to check a color scheme's legibility by comparing the luminance of the colors.Challenge 11: Solution
Mike walks through the solution to Challenge 11 and takes questions from students.