Sass Workflow

Visit Tutorial Page ( Report)
Welcome to this Avelx course, this course will develop your skills in maintaining structured stylesheets. Sass is a CSS preprocessor which allows a more functional approach to styling; such as variables, mixins, if statements, loops, maths, inheritance and more. First I'll show you how to easily use the command line to keep our CSS up to date. We'll be watching our Sass files automatically for any new changes and exporting in real time. Also the command line allows real time compression to produce a smaller CSS file and converting between Sass and SCSS. With projects getting larger and more detailed we need to keep our CSS maintained. This can be a handful when it comes to a standard CSS stylesheet. But with Sass everything can become a breeze! Who is the target audience? Web developers that need a solution to writing less CSS and a more simplified and structured stylesheet Web developers with knowledge of HTML and CSS Developers with some command line knowledge (but not required)
  • Setup
    • Introduction

      This lecture will give you the reason why SASS is becoming more popular. Also you'll have an insight into this course with previews from later lectures. Finally, I'll explain the method of teaching throughout this course.

    • SASS Installation

      The first option we look at in this lesson is SASS Meister which is an online solution. The second installing SASS directly on OSX, Windows and GNU.

    • SASS Commands

      Now let's start using the command line and review the most important SASS commands. The commands learn't apply to all OS's and will be used throughout this course.

    • Environment Setup

      Environment setup is very important to the way we organise and structure our workflow. This lecture will cover the free Atom editor available to all OS's and get the terminal setup to watch our SCSS file for any changes. Finally we'll look at the different syntax's between SCSS and SASS.

  • Basic API
    • Variables

      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!

    • Inheritance

      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

      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.

    • Import

      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.

  • Advanced API
    • List Functions

      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

      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.

    • Math Operators & Functions

      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 Directives

      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.

    • Loops

      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.

    • Function Directives

      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.

  • SASS extended
    • SASS Extended Introduction & Koala Compiler

      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

    • SASS compiler auto prefix css properties

      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.

    • SASS Source Maps

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

    • SASS Grid

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

    • SASS Grid Media Queries

      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.

    • SASS Buttons

      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.

    • Bonus Lecture: Discount courses

      Use the coupon code avelx5050 to get 50% off any of my premium course's. Check out my author's page for more details:

Write Your Review