Sass Workflow
4.6 (810 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
18,439 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Sass Workflow to your Wishlist.

Add to Wishlist

Sass Workflow

Learn why Sass is becoming more prominent in web development and how to use the API and command line for Sass.
4.6 (810 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
18,439 students enrolled
Created by Lawrence Turton
Last updated 4/2016
English
Price: Free
Includes:
  • 3 hours on-demand video
  • 2 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Develop projects quicker by implementing SASS
  • Install SASS on any OS
  • Understand SASS commands
  • Understand basic & advanced SASS API's
View Curriculum
Requirements
  • Basic understanding of CSS and prefixed properties
  • Basic knowledge of HTML (not required but strongly recommended)
Description
  1. 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)
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 21 Lectures Collapse All 21 Lectures 02:57:30
+
Setup
4 Lectures 23:04

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.

Introduction
00:42

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 Installation
04:37

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.

SASS Commands
10:39

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.

Environment Setup
07:06
+
Basic API
4 Lectures 38:46

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!

Variables
09:35

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.

Inheritance
08:24

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.

Mixins
12:07

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.

Import
08:40
+
Advanced API
6 Lectures 48:37

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.

List Functions
08:33

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.

Maps
06:05

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.

Math Operators & Functions
06:08

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.

If Directives
09:34

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.

Loops
13:50

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.

Function Directives
04:27
+
SASS extended
7 Lectures 01:07:03

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 Extended Introduction & Koala Compiler
05:30

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 compiler auto prefix css properties
01:15

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

SASS Source Maps
10:09

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

SASS Grid
13:30

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 Grid Media Queries
17:38

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.

SASS Buttons
18:02

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

http://www.udemy.com/u/lawrenceturton

Bonus Lecture: Discount courses
00:59
About the Instructor
Lawrence Turton
4.6 Average rating
6,463 Reviews
66,108 Students
7 Courses
Technical Instructor

Lawrence Turton works as a web developer & graphic designer specialising in HTML, CSS, jQuery, UI & UX design. He has previously worked with Fifteendesign producing websites, iPhone and Android apps and started his own agency in 2010 called Elite Web Design. During that time Lawrence has established a wide range of clients from blue chip companies to large corporations. From a young age he was an online instructor and started to work with two of the leading online training specialists Cartoonsmart and Envato. Lawrence always created projects involving designs in Photoshop and bringing his creations to life by coding them with web technologies. This gives him a unique perspective into real world projects from start to finish and a wealth of information for new comers to the web industry.