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
Powered by
Terms Privacy
Welcome!
Enter your info below to login.
Forgot your password?