Sass Workflow

Variables greatly increase the structure of a given stylesheet. Variables could be used for colour schemes, namespace, measurements, values, selectors and more. If used properly variables will save us a tone of time!

SASS allows us to keep a structured stylesheet by utilising inheritance. Inheritance can share properties between selectors via placeholders and implement namespace's easily among other things.

Mixins are predefined snippets of code that can be reused throughout the SASS document. These snippets can quickly take on a function like approach with arguments being passed into them. Mixins are parsed before compilation to CSS so they can contain SASS syntax.

Importing SCSS and SASS files can give the present file shared access to mixins, variables, styles and more. This means you can make your own import files and use them across all your projects without any hassle.

We have already seen lists are useful for just representing shorthand CSS property values. For this lecture I will recap the definition of a list data type within SASS. But then we'll extend the functionality of a list data type by using SASS Script functions.

Maps resemble objects in SASS with a key and value pair structure. Maps can be highly efficient for repetitive data and storing lot's of collated values together.

SASS developers have made sure that maths is not left out. Maths is essential for any programming, especially when it comes to styling. SASS has all the standard operaters you would expect for precise control and flexible code.

If statements make our styling conditional as they depend on circumstance. We can check variables, compare them with operators and more to give our code adaptability.

SASS has done a fantastic job of helping with repetitive code. But nothing is more effective than loops. You have three types of loops all of which we'll review in this lecture. The first loop we'll look at is the for loop and swiftly move onto the each loop and finally the while loop. All these loops have their strengths and weaknesses but no doubt they will save countless hours on big projects.

Extending the sass functionality is easy with function directives. Functions are very similar to mixins in that you can pass in arguments and control the returned outcome. You can place anything inside of a function including other mixins, variables, maths and just plain old css. This final piece to our puzzle will unlock the power to SASS.

Welcome to an update to this course in 2016. Instead of using the command line interface you can use the free desktop application to compile your SASS scripts

Now you don't have to define your own mixins for the new CSS3 properties. Instead you can simply have those properties produced at compile time.

In this lecture we'll look at using the SASS source maps with multiple browsers. This will halve your development time.

In this lecture we'll be looking at building a grid system by using the features of SASS.

Now we're going to extend our knowledge further and nest loops inside of loops and come up with an advanced grid system that'll be very easy to change at a later date.

For the final project we'll be creating some simple buttons and again using the most prominent features in SASS to quickly create buttons for any website.

Get additional details and bonuses in this lecture.