Advanced Sass

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. 14 steps

• Intro to Sassmeister 6:50
• Sass Basics in Review 5:59
• Sass Style 2 questions
• Declaration, Mixin, and Placeholder Listing Consistency 2:43
• Listing Consistency 2 questions
• Partials 2:59
• Practicing Partials 2 questions
• Manifests 7:13
• Manifest files 1 question
• Globbing 5:10
• Globbing with Sass 1 question
• Sass Line Comments 5:23
• Source Maps 5:37
• Debugging 4 questions

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. 25 steps

• Scoping and !default Variables 4:31
• Variables and Arguments within Mixins and Functions 9:16
• Variables and Scoping 3 questions
• Better Variables with List-maps 4:16
• List-Maps 1 objective
• Nesting 4:07
• List-maps and Nesting 3 questions
• Advanced Mixins 9:59
• Advanced Mixins 2 questions
• Mixin with Null Options and Named Arguments 2:33
• Mixins 1 objective
• Null Options and Arguments 3 questions
• Functions Turned Up to 11 5:57
• Mixins with Too Much Logic? Build with Functions Instead 8:22
• Functions 4 questions
• Functions 1 objective
• Selector Inheritance: Trap Doors and Pitfalls of @extend 5:43
• Placeholders Appear Where Written 7:15
• Extends and LibSass 2:37
• Extends 1 objective
• Placeholder Selectors 3 questions
• &-suffix Naming Conventions 2:36
• New & Powers 5:59
• Suffix Naming 1 objective
• Naming Conventions 4 questions

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. 18 steps

• Advanced Color Functions 5:53
• More Advanced Color Functions 4:22
• Refactoring to Make it Better 5:53
• Color Functions 4 questions
• Playing around with Str-Length 5:29
• Random Strings 2:28
• The String Index Function 1:49
• Strings 1 objective
• String Functions 2 questions
• Using Random functions in your Designs 6:27
• Randomly Generating Graphics 3:59
• The random() Function 3 questions
• Introspection 4:12
• More Introspection 3:33
• Introspection: Part 1 1 objective
• Evaluating Strings 4:46
• Introspection: Part 2 1 objective
• Introspection 2 questions

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. 16 steps

• Using the @each Directive 5:31
• The List-Maps Feature 4:05
• The @each Directive 3 questions
• @each 1 objective
• More on @for loops 7:57
• @for 3 questions
• @for 1 objective
• The @content directive 3:43
• Another Example of the @content Rule 3:43
• Defining Breakpoints with @content 3:26
• @content 4 questions
• The @at-root Directive 3:13
• More About the @at-root Directive 6:22
• @at-root 2 questions
• @at-root: Part 1 1 objective
• @at-root: Part 2 1 objective