Introduction to Sass (Syntactically Awesome Stylesheets)

Video Lectures

Displaying all 30 video lectures.
Lecture 1
How to Install Sass
Play Video		 How to Install Sass
This is the first in a series of tutorials that show users how to use Sass. This first tutorial focuses on installing and running sass for the first time using a Mac.

Subscribe to Level Up Pro for extra features!
http://leveluptuts.com/level-up-pro

Subscribe to the Level Up Newsletter
http://eepurl.com/AWjGz

For questions post in the comments or visit:
http://leveluptuts.com/forum

To Support Level Up Tuts:
http://leveluptuts.com/donations
Lecture 2
The Basics of Variables in Sass
Play Video		 The Basics of Variables in Sass
This is the 2nd tutorial in a series that show users how to code CSS with Sass.

This tutorial covers the use of Variables. Variables allow for the reuse of values within CSS and can use basic math and operations.

Subscribe to Level Up Pro for extra features!
http://leveluptuts.com/level-up-pro

Subscribe to the Level Up Newsletter
http://eepurl.com/AWjGz

For questions post in the comments or visit:
http://leveluptuts.com/forum

To Support Level Up Tuts:
http://leveluptuts.com/donations
Lecture 3
Nesting Your Sass
Play Video		 Nesting Your Sass
This is the 3rd tutorial in a series that show users how to code CSS with Sass.

This tutorial covers the use of Nesting. Nesting avoids repetition by nesting selectors within one another.
Lecture 4
Using Mixins
Play Video		 Using Mixins
This is the 4th tutorial in a series that show users how to code CSS with Sass.

This tutorial covers the use of Mixins which allow re-use of chunks of CSS, properties and selectors.
Lecture 5
Selector Inheritance
Play Video		 Selector Inheritance
This is the 5th tutorial in a series that show users how to code CSS with Sass.

This tutorial shows you how to use selector inheritance in Sass.
Lecture 6
Creating Configurable Shapes Using Mixins
Play Video		 Creating Configurable Shapes Using Mixins
This is the 6th tutorial in a series that show users how to code CSS with Sass.

This tutorial shows users how to create mixins that are configurable with the use of if statements to create a circle and a triangle. More Sass basic tutorials are on the way along with Compass tutorials coming soon!
Lecture 7
@Import & Parent Reference
Play Video		 @Import & Parent Reference
This is the 7th tutorial in a series that show users how to code CSS with Sass.

This tutorial shows users how to use @import to organize stylesheets and the Parent Reference feature.
Lecture 8
Using Lists and @each
Play Video		 Using Lists and @each
This is the 1st tutorial in a series that show users how to code CSS using advanced features in Sass.

This tutorial covers the use of lists and how to use them in with the @each directive.
Lecture 9
Nth Function In Lists
Play Video		 Nth Function In Lists
This is the 2nd tutorial in a series that show users how to code CSS using advanced features in Sass.

This tutorial covers the use of the Nth function to find values in lists. This example goes over the basics of Nth and then uses an @each statement to build gradually lighten a back background over 4 separate divs.

The code:
@each $p in (
one black,
two black + 20,
three black + 40,
four black + 60
) {
.#{nth($p,1)} { background:#{nth($p,2)}; }
}
Lecture 10
Built in Functions
Play Video		 Built in Functions
This is the 10th tutorial in a series that show users how to code CSS using advanced features in Sass.

This tutorial covers the use of functions built into Sass. I cover rgba() and fade-out() as well as percentage() and round(). For a complete reference of Sass functions, check out:
http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html

The code:
width:round(percentage(890px / 1440px))
rgba(#333,0.7)
Lecture 11
Build Your Own Function
Play Video		 Build Your Own Function
This is the 11th tutorial in a series that show users how to code CSS using advanced features in Sass.

This tutorial covers how to build your own functions by passing arguments and returning a transformed value.
Lecture 12
Build Your Own Function Part 2 - If Else
Play Video		 Build Your Own Function Part 2 - If Else
This is the 12th tutorial in a series that show users how to code CSS using advanced features in Sass.

This tutorial covers how to use If and Else conditionals inside of your Sass functions to add further options and functionality.
Lecture 13
Build Your Own Function Part 3 - Total Automation with Lists
Play Video		 Build Your Own Function Part 3 - Total Automation with Lists
This is the 13th tutorial in a series that show users how to code CSS using advanced features in Sass.

This tutorial covers how to use the code from the previous example inside of your list example to totally automate the contrasting color of your text.
Lecture 14
Output Style
Play Video		 Output Style
The 14th tutorial in the Sass Tutorials series. This tut teaches you about the various output styles that Sass has built in.
Lecture 15
For Loops
Play Video		 For Loops
The 15th tutorial in the Sass Tutorial series. This video teaches you how to use For loops in Sass to accomplish some really interesting things. One more tool in your Sass library.
Lecture 16
While Loops
Play Video		 While Loops
The 16th tutorial in the Sass Tutorial series. This video teaches you how to use While loops in Sass to expand on the functionality of For loops.
Lecture 17
Using Live Reload
Play Video		 Using Live Reload
The 17th tutorial in the Sass Tutorial Series. This tut shows you how to use Live Reload to compile your Sass and automatically refresh your browser.

http://livereload.com/
Lecture 18
Updating to Sass 3.2.1. Media Mark
Play Video		 Updating to Sass 3.2.1. Media Mark
The 18th tutorial in the Sass Tutorial Series. This is the quickest tutorial in Level Up Tuts history. Update your Sass to the latest version with this tut if you haven't already to take advantage of great new features.
Lecture 19
Placeholder Selectors
Play Video		 Placeholder Selectors
The 19th tutorial in the Sass Tutorial Series. This tutorial breaks down the new Placeholder Selectors feature in Sass 3.2.1. This allows you extend a styles without having the base style appear in the css.
Lecture 20
@Content - Better Media Queries in Sass
Play Video		 @Content - Better Media Queries in Sass
The 20th tutorial in the Sass Tutorial Series. This tutorial shows the latest features of Sass 3.2.1, how you can use @content to inject code into your mixin. It's perfect for seamless media queries!
Lecture 21
Extending Sass and Writing a Config file
Play Video		 Extending Sass and Writing a Config file
The 21st video in the Sublime Text 2 tutorial series. Here I talk about the great ways you can extend Sass and we create a Compass config.rb file to start using plugins and frameworks.
Lecture 22
Installing and Using Sass Globbing
Play Video		 Installing and Using Sass Globbing
The 22nd video in the Sublime Text 2 tutorial series. Here we show you how to install and use Sass Globbing.
Lecture 23
Installing Singularity Grid System
Play Video		 Installing Singularity Grid System
The 23rd video in the Sublime Text 2 tutorial series. Here I show how to install and get set up with the Singularity Grid System.

http://singularity.gs/
Lecture 24
Creating and Using a Symmetrical Grid
Play Video		 Creating and Using a Symmetrical Grid
The 24th video in the Sublime Text 2 tutorial series. Here I show you how to create a basic 960 symmetrical grid with the Singularity Grid System.

http://singularity.gs/
Lecture 25
Asymmetric Grids
Play Video		 Asymmetric Grids
The 25th video in the Sublime Text 2 tutorial series. Here I show you how to create asymmetrical grids with the Singularity Grid System.

For questions post in the comments or visit:
http://leveluptuts.com/forum
Lecture 26
Responsive Grids With Breakpoint
Play Video		 Responsive Grids With Breakpoint
The 26th video in the Sublime Text 2 tutorial series. Here I show you how to build a basic responsive grid using Breakpoint and Singularity.


For questions post in the comments or visit:
http://leveluptuts.com/forum
Lecture 27
Adding Columns at Breakpoints
Play Video		 Adding Columns at Breakpoints
The 27th video in the Sublime Text 2 tutorial series. Here I show you how to build a more advanced and configurable responsive grid using Singularity and Breakpoint.


Subscribe to Level Up Pro for extra features!
http://leveluptuts.com/level-up-pro

For questions post in the comments or visit:
http://leveluptuts.com/forum

To Support Level Up Tuts:
http://leveluptuts.com/donations
Lecture 28
Selector Functions & Sass 3.4
Play Video		 Selector Functions & Sass 3.4
Here was show you a new feature of the just released Sass 3.4, Selector Functions.

Subscribe to Level Up Pro for extra features!
http://leveluptuts.com/level-up-pro

Subscribe to the Level Up Newsletter
http://eepurl.com/AWjGz

For questions post in the comments or visit:
http://leveluptuts.com/forum

To Support Level Up Tuts:
http://leveluptuts.com/donations
Lecture 29
Juice, Mixins for Life
Play Video		 Juice, Mixins for Life
Take a tour through the Juice mixin collection and see how they can enhance your workflow.

http://juicynex.us/juice/

Subscribe to Level Up Pro for extra features!
http://leveluptuts.com/level-up-pro

Subscribe to the Level Up Newsletter
http://eepurl.com/AWjGz

For questions post in the comments or visit:
http://leveluptuts.com/forum

To Support Level Up Tuts:
http://leveluptuts.com/donations

Simple cloud hosting, built for developers.:
https://www.digitalocean.com/?refcode=67357174b09e
Lecture 30
Juice, Mixins for Life Part 2
Play Video		 Juice, Mixins for Life Part 2
Take a tour through the Juice mixin collection and see how they can enhance your workflow.

http://juicynex.us/juice/

Subscribe to Level Up Pro for extra features!
http://leveluptuts.com/level-up-pro

Subscribe to the Level Up Newsletter
http://eepurl.com/AWjGz

For questions post in the comments or visit:
http://leveluptuts.com/forum

To Support Level Up Tuts:
http://leveluptuts.com/donations

Simple cloud hosting, built for developers.:
https://www.digitalocean.com/?refcode=67357174b09e