Now that you know the basics of Sass, it’s time to put these new skills to work in the best way possible. Learning the ‘best practices’ for writing Sass will gain you admiration among your peers.
Getting Started
Getting Started: We will dive into file management and importing that won’t steer you wrong. To round things up we will use Source Maps to help debug our code and remind us where we put all these files.
Intro to Sassmeister – 6:50
Sass Basics in Review – 5:59
Declaration, Mixin, and Placeholder Listing Consistency – 2:43
Partials – 2:59
Manifests – 7:13
Globbing – 5:10
Sass Line Comments – 5:23
Source Maps5:37
Advanced Variables, Mixins, Functions, and Placeholders
You have mastered DRY and that is AWESOME! But now let’s look at how we can take all these variables, mixins, functions and placeholders to make some rock solid modular code. We will also look at advanced naming conventions with nesting features, how !default works and how to DRY up our variable naming conventions using list maps.
Scoping and !default Variables – 4:31
Variables and Arguments within Mixins and Functions – 9:16
Better Variables with List-maps – 4:16
Nesting – 4:07
Advanced Mixins – 9:59
Mixin with Null Options and Named Arguments – 2:33
Functions Turned Up to 11 – 5:57
Mixins with Too Much Logic? Build with Functions Instead – 8:22
Selector Inheritance: Trap Doors and Pitfalls of @extend – 5:43
Placeholders Appear Where Written – 7:15
Extends and LibSass – 2:37
&-suffix Naming Conventions – 2:36
New & Powers – 5:59
Advanced Functions
Functions are amazing and there are multiple examples out there that illustrate how to better abstract away calculations and operations into individual functions that can be consumed into other functions, mixins or directly with CSS attributes. In this section we will look at how we can use functions to introspectively understand our code.
Advanced Color Functions – 5:53
More Advanced Color Functions – 4:22
Refactoring to Make it Better – 5:53
Playing around with Str-Length – 5:29
Random Strings – 2:28
The String Index Function – 1:49
Using Random functions in your Designs – 6:27
Randomly Generating Graphics – 3:59
Introspection – 4:12
More Introspection – 3:33
Evaluating Strings – 4:46
Advanced Directives
Directives are amazing, but they can do much more than we have ever imagined. Here we will examine how to use a complex list map for loops, and with multiple assignments. We will look at new ways we can use for loops and how to maintain modular code without nested outputs.
Using the @each Directive – 5:31
The List-Maps Feature – 4:05
More on @for loops – 7:57
The @content directive – 3:43
Another Example of the @content Rule – 3:43
Defining Breakpoints with @content – 3:26
The @at-root Directive – 3:13
More About the @at-root Directive – 6:22