Table of Contents
IntroductionMike North introduces his Sass Fundamentals course: Sass is a scripting language that is interpreted into Cascading Style Sheets (CSS).
CSS PitfallsReviewing the problems with developing CSS, Mike illustrates the need for a styling scripting language.
Preprocesser BenefitsFrom 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 AgendaMike reviews the agenda for the course including Sass origins, variables, control flow, CSS architecture with BEM, and Sass functions.
Syntax, Nesting, & SelectorsMike introduces basics of Sass that includes syntax, nesting, and powerful Sass selectors. Mike also takes a question from a student.
Challenge 1: Parental SelectorsIn this challenge, students write Sass rules that need to be fixed to pass tests. Then Mike takes a question from a student.
Challenge 1: SolutionMike walks through the solution to Challenge 1 and takes questions from students.
Challenge 2: Parental Selectors 2In this challenge, students write Sass rules that allow for two-column switching.
Challenge 2: SolutionMike walks through the solution to Challenge 2 and takes questions from students.
Sass @import and VariablesCSS'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 VariablesIn this challenge, students import a partial with Sass and fix styles with Sass rules.
Challenge 3: SolutionMike walks through the solution to Challenge 3 and takes questions from students.
Sass Mixins and ArgumentsMike 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: MixinsIn this challenge, students import a partial with Sass and fix styles with Sass rules.
Challenge 4: SolutionMike walks through the solution to Challenge 4 and takes questions from students.
Default Argument ValuesPassing arguments through mixins, Mike demonstrates how to extend the power of writing CSS rules with Sass.
Challenge 5: Mixins 2In this challenge, students using mixins with arguments to create a cross-browser range inputs
Challenge 5: SolutionsMike walks through the solution to Challenge 5.
Introducing Sass FunctionsMike demonstrates some of the predefined functions available in Sass, specifically the color functions.
Challenge 6: Color FunctionsIn this challenge, students create color themes when styling HTML buttons.
Challenge 6: SolutionsMike walks through the solution to Challenge 6 and takes questions from students.
@if Sass DirectiveMike 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 FlowIn 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: SolutionMike walks through the solution to Challenge 7.
Data StructuresReviewing data structures in Sass, Mike demonstrates common programming techniques like loops, lists, each, in Sass.
Challenge 8: Nudging ClassesIn this challenge, students use @for, @each, and data structures to create CSS rules for moving elements in five-pixel increments.
Challenge 8: SolutionMike walks through the solution to Challenge 8 and takes questions from students.
BEM IntroductionIn 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 ButtonsIn this challenge, students create CSS rules for buttons in the BEM naming convention.
Challenge 9: SolutionMike walks through the solution to Challenge 9 and takes questions from students.
Reusing Style with MixinsTo 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: @extendIn this challenge, students use @extend to modify the visual presentation of buttons.
Challenge 10: SolutionMike walks through the solution to Challenge 10 and takes questions from students.
Working with Sass Functions
Writing Sass FunctionsMike demonstrates writing functions in Sass.
Challenge 11: Relative Luminance in SassIn this challenge, students write a Sass function to check a color scheme's legibility by comparing the luminance of the colors.
Challenge 11: SolutionMike walks through the solution to Challenge 11 and takes questions from students.