Sass - from beginner to real world - Master Sass Edition
by
Kevin Powell
Login
Enrollment is closed
VS Code
Sass - from beginner to real world - Master Sass Edition
/
Introduction
code.visualstudio.com/
Visit Link
Sass - from beginner to real world - Master Sass Edition
Work faster & smarter with Sass
Enrollment is closed
Learn more
Already enrolled?
Sign in to continue learning.
Table of contents
Sass - from beginner to real world - Master Sass Edition
by
Kevin Powell
ui-24px-outline-1_lock
Introduction
Introduction
Draft
What is Sass anyway?
Draft
What is Sass anyway?
Draft
What Software do you need?
Draft
What Software do you need?
Draft
VS Code
Draft
VS Code
Draft
The Community
Draft
The Community
ui-24px-outline-1_lock
The Setup
The Setup
Draft
A note before we get started
Draft
A note before we get started
Draft
Installing Sass with Sass live compiler
Draft
Installing Sass with Sass live compiler
Draft
Sass compilers for other text editors
Draft
Sass compilers for other text editors
Draft
Using Sass live compiler and live server
Draft
Using Sass live compiler and live server
Draft
Sass live compiler and live server settings
Draft
Sass live compiler and live server settings
Draft
A couple of other very useful VS Code Extensions
Draft
A couple of other very useful VS Code Extensions
Draft
Installing ruby (Windows users only)
Draft
Installing ruby (Windows users only)
Draft
Installing Sass
Draft
Installing Sass
Draft
Watching folders to compile Sass to CSS
Draft
Watching folders to compile Sass to CSS
Draft
Output style options
Draft
Output style options
Draft
CSS output style options
Draft
CSS output style options
Draft
What are source maps?
Draft
What are source maps?
Draft
Other command line alternatives (free and premium options)
Draft
Other command line alternatives (free and premium options)
Draft
Sass vs SCSS - two different ways of writting Sass
Draft
Sass vs SCSS - two different ways of writting Sass
Draft
CSS vs Sass comments
Draft
CSS vs Sass comments
ui-24px-outline-1_lock
Nesting
Nesting
Draft
Nesting selectors
Draft
Nesting selectors
Draft
SCSS vs Sass nesting
Draft
SCSS vs Sass nesting
Draft
Nesting and the ampersand (&)
Draft
Nesting and the ampersand (&)
Draft
Nesting properties
Draft
Nesting properties
Draft
Time for a challenge!
Draft
Time for a challenge!
Draft
challenge_01-starting-files.zip
Draft
challenge_01-starting-files.zip
Draft
solution.scss
Draft
solution.scss
ui-24px-outline-1_lock
Variables
Variables
Draft
What are variables?
Draft
What are variables?
Draft
Variable inseption (variables inside variables)
Draft
Variable inseption (variables inside variables)
Draft
Variables and the cascade
Draft
Variables and the cascade
Draft
Naming variables
Draft
Naming variables
Draft
It's challenge time!
Draft
It's challenge time!
Draft
Variable Challenge Starting Files
Draft
Variable Challenge Starting Files
Draft
solution.scss
Draft
solution.scss
ui-24px-outline-1_lock
Operators
Operators
Draft
Introduction to Operators
Draft
Introduction to Operators
Draft
Operators - a use case
Draft
Operators - a use case
ui-24px-outline-1_lock
Building out a pricing table
Building out a pricing table
Draft
Pricing Table - Intro
Draft
Pricing Table - Intro
Draft
Pricing Table Starting Files
Draft
Pricing Table Starting Files
Draft
Google font @import
Draft
Google font @import
Draft
Writing the markup
Draft
Writing the markup
Draft
Setting up the variables
Draft
Setting up the variables
Draft
Styling it up
Draft
Styling it up
Draft
pricing-table-finished-version.zip
Draft
pricing-table-finished-version.zip
ui-24px-outline-1_lock
Extends
Extends
Draft
An introduction to Extends
Draft
An introduction to Extends
Draft
Placeholders
Draft
Placeholders
Draft
Don't forget about the other stuff you can do
Draft
Don't forget about the other stuff you can do
Draft
Problems with extends - 1
Draft
Problems with extends - 1
Draft
Problems with extends - 2
Draft
Problems with extends - 2
ui-24px-outline-1_lock
Mixins basics
Mixins basics
Draft
Introduction to Mixins
Draft
Introduction to Mixins
Draft
Selectors inside mixins
Draft
Selectors inside mixins
Draft
Mixin arguments - part one
Draft
Mixin arguments - part one
Draft
Mixin arguments part two - optional arguments
Draft
Mixin arguments part two - optional arguments
Draft
Mixin arguments part three: more ways to work faster
Draft
Mixin arguments part three: more ways to work faster
Draft
Mixin arguments part four - keeping things in the right order
Draft
Mixin arguments part four - keeping things in the right order
Draft
Mixin Challenge - Introduction
Draft
Mixin Challenge - Introduction
Draft
LearnSass - mixin challenge.pdf
Draft
LearnSass - mixin challenge.pdf
Draft
Mixin Challenge - Starting Files
Draft
Mixin Challenge - Starting Files
ui-24px-outline-1_lock
Introduction to functions
Introduction to functions
Draft
Introduction to Functions
Draft
Introduction to Functions
Draft
Some of my favourite Sass functions
Draft
Some of my favourite Sass functions
ui-24px-outline-1_lock
Building an e-commerce card
Building an e-commerce card
Draft
The Markup
Draft
The Markup
Draft
card-starting-files.zip
Draft
card-starting-files.zip
Draft
Getting Sass set up and running
Draft
Getting Sass set up and running
Draft
Settin' up the variables
Draft
Settin' up the variables
Draft
Creating the mixins
Draft
Creating the mixins
Draft
Styling the typography
Draft
Styling the typography
Draft
Styling the buttons
Draft
Styling the buttons
Draft
Finishing touches
Draft
Finishing touches
Draft
my-finished-files.zip
Draft
my-finished-files.zip
ui-24px-outline-1_lock
Lists
Lists
Draft
Introduction to Lists
Draft
Introduction to Lists
Draft
List lengths
Draft
List lengths
Draft
The different types of lists
Draft
The different types of lists
Draft
Accessing specific list items
Draft
Accessing specific list items
Draft
The different ways to write lists
Draft
The different ways to write lists
ui-24px-outline-1_lock
Interpolation
Interpolation
Draft
What is interpolation?
Draft
What is interpolation?
Draft
Interpolation and math
Draft
Interpolation and math
Draft
Interpolation challenge.pdf
Draft
Interpolation challenge.pdf
ui-24px-outline-1_lock
More Mixins
More Mixins
Draft
A quick refresher on Mixins
Draft
A quick refresher on Mixins
Draft
A look at variable arguments
Draft
A look at variable arguments
Draft
Staying organized with variables
Draft
Staying organized with variables
Draft
Variable arguments with @include
Draft
Variable arguments with @include
Draft
Variable arguments with @include - part two
Draft
Variable arguments with @include - part two
Draft
Mixin challenge - part one.mp4
Draft
Mixin challenge - part one.mp4
Draft
mixin challenge handout.pdf
Draft
mixin challenge handout.pdf
Draft
Mixin challenge - part two.mp4
Draft
Mixin challenge - part two.mp4
Draft
A look at @content
Draft
A look at @content
Draft
Using @content to make awesome media query mixins
Draft
Using @content to make awesome media query mixins
Draft
Adding a custom size media query
Draft
Adding a custom size media query
ui-24px-outline-1_lock
@for
@for
Draft
Intro to Sass @for
Draft
Intro to Sass @for
Draft
Using the $i variable
Draft
Using the $i variable
Draft
Using interpolation
Draft
Using interpolation
Draft
Adding in some math
Draft
Adding in some math
Draft
A little more math and a new variable
Draft
A little more math and a new variable
Draft
@for challenge
Draft
@for challenge
Draft
@for challenge.pdf
Draft
@for challenge.pdf
ui-24px-outline-1_lock
@each
@each
Draft
Introduction to @each
Draft
Introduction to @each
Draft
A more useful example of @each
Draft
A more useful example of @each
Draft
Using nested lists
Draft
Using nested lists
Draft
Refactoring
Draft
Refactoring
ui-24px-outline-1_lock
@if, @else, @if else and the if() function
@if, @else, @if else and the if() function
Draft
Intro to the @if directive
Draft
Intro to the @if directive
Draft
A more realistic example
Draft
A more realistic example
Draft
@else directive intro
Draft
@else directive intro
Draft
A more realistic look at @else
Draft
A more realistic look at @else
Draft
Using @if and @else to make a cool @mixin
Draft
Using @if and @else to make a cool @mixin
Draft
Improving the mixin
Draft
Improving the mixin
Draft
Introduction to @if else
Draft
Introduction to @if else
Draft
The if() function
Draft
The if() function
Draft
Using the if function to write less code
Draft
Using the if function to write less code
ui-24px-outline-1_lock
Creating your own functions
Creating your own functions
Draft
Introduction to custom functions
Draft
Introduction to custom functions
Draft
Variable number of arguments
Draft
Variable number of arguments
Draft
functions - starter file for following videos.zip
Draft
functions - starter file for following videos.zip
Draft
Dynamically set text color
Draft
Dynamically set text color
Draft
Making the output look a little better
Draft
Making the output look a little better
Draft
Refactor challenge.mp4
Draft
Refactor challenge.mp4
Draft
Refactor challenge - solution.mp4
Draft
Refactor challenge - solution.mp4
ui-24px-outline-1_lock
Warnings and Errors
Warnings and Errors
Draft
Intro to debugging in Sass
Draft
Intro to debugging in Sass
Draft
The warning
Draft
The warning
Draft
Creating an error
Draft
Creating an error
Draft
Improving our error with interpolation
Draft
Improving our error with interpolation
Draft
Debug
Draft
Debug
ui-24px-outline-1_lock
Maps
Maps
Draft
Introduction to Sass maps
Draft
Introduction to Sass maps
Draft
How to access maps
Draft
How to access maps
Draft
Access maps made easier
Draft
Access maps made easier
Draft
Mapception
Draft
Mapception
Draft
Accessing maps inside of other maps
Draft
Accessing maps inside of other maps
Draft
Accessing maps inside of other maps made easier (plus a mini challenge)
Draft
Accessing maps inside of other maps made easier (plus a mini challenge)
Draft
Improving our media query mixin with a map
Draft
Improving our media query mixin with a map
Draft
Maps and `@each`
Draft
Maps and `@each`
Draft
Accessing maps with `@each` challenge
Draft
Accessing maps with `@each` challenge
Draft
Accessing maps with `@each` solution
Draft
Accessing maps with `@each` solution
Draft
map-has-key()
Draft
map-has-key()
Draft
A more realistic example of map-has-key()
Draft
A more realistic example of map-has-key()
ui-24px-outline-1_lock
Improving our media query mixin with map-has-key()
Improving our media query mixin with map-has-key()
Draft
Improving our media query mixin - challenge
Draft
Improving our media query mixin - challenge
Draft
map-has-key-challenge.zip
Draft
map-has-key-challenge.zip
Draft
The solution
Draft
The solution
ui-24px-outline-1_lock
Improving our media query mixin with type-of()
Improving our media query mixin with type-of()
Draft
A look at the type-of() function
Draft
A look at the type-of() function
Draft
Using type-of to improve our mq mixin even more! A challenge
Draft
Using type-of to improve our mq mixin even more! A challenge
Draft
And making it even better!
Draft
And making it even better!
Draft
type-of-challenge.zip
Draft
type-of-challenge.zip
ui-24px-outline-1_lock
Partials and file organization
Partials and file organization
Draft
Introduction to partials
Draft
Introduction to partials
Draft
Order matters when importing your partials
Draft
Order matters when importing your partials
Draft
The 7-1 system and what I actually use (file organization)
Draft
The 7-1 system and what I actually use (file organization)
ui-24px-outline-1_lock
Building out a 1-page site
Building out a 1-page site
Draft
Introduction to the project
Draft
Introduction to the project
Draft
assets.zip
Draft
assets.zip
Draft
A look at the files
Draft
A look at the files
Draft
The Markup - Navigation
Draft
The Markup - Navigation
Draft
The Markup - Home and About
Draft
The Markup - Home and About
Draft
The Markup - Facts and Meals
Draft
The Markup - Facts and Meals
Draft
The Markup - Testimonial and Footer
Draft
The Markup - Testimonial and Footer
Draft
First variables and mixins
Draft
First variables and mixins
Draft
Setting up a custom function
Draft
Setting up a custom function
Draft
Adding an error to the function
Draft
Adding an error to the function
Draft
Setting up the typography
Draft
Setting up the typography
Draft
Setting up the general layout
Draft
Setting up the general layout
Draft
Styling the navigation
Draft
Styling the navigation
Draft
Styling up the home section layout
Draft
Styling up the home section layout
Draft
Stlying the About section, and some trouble shooting
Draft
Stlying the About section, and some trouble shooting
Draft
Creating an underline pseudo element mixin
Draft
Creating an underline pseudo element mixin
Draft
Styling the facts and meals sections
Draft
Styling the facts and meals sections
Draft
Styling the testimonial and footer, and fixing a mistake
Draft
Styling the testimonial and footer, and fixing a mistake
Draft
Adding in a media query mixin
Draft
Adding in a media query mixin
Draft
About section - large screen layout with grid
Draft
About section - large screen layout with grid
Draft
Creating a grid mixin
Draft
Creating a grid mixin
Draft
Fixing up the nav and about section
Draft
Fixing up the nav and about section
Draft
Fixing up the typography + closing thoughts
Draft
Fixing up the typography + closing thoughts
ui-24px-outline-1_lock
5-page travel blog with Sass and CSS Grid
5-page travel blog with Sass and CSS Grid
Draft
Coming soon
Draft
Coming soon
Draft
Project overview
Draft
Project overview
ui-24px-outline-1_lock
Closing thoughts
Closing thoughts
Draft
I hope you enjoyed the course, plus a few other things
Draft
I hope you enjoyed the course, plus a few other things
Draft
Future Updates
Draft
Future Updates