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 (504 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.
11,691 students enrolled
Free
Start Learning Now
  • Lectures 21
  • Contents Video: 3 hours
  • Skill Level Beginner Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 2/2015 English

Course 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!

What are the requirements?

  • Basic understanding of CSS and prefixed properties
  • Basic knowledge of HTML (not required but strongly recommended)

What am I going to get from this course?

  • Develop projects quicker by implementing SASS
  • Install SASS on any OS
  • Understand SASS commands
  • Understand basic & advanced SASS API's

What 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)

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Setup
00:42

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.

04:37

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.

10:39

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.

07:06

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.

Section 2: Basic API
09:35

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!

08:24

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.

12:07

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.

08:40

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.

Section 3: Advanced API
08:33

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.

06:05

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.

06:08

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.

09:34

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.

13:50

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.

04:27

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.

Section 4: SASS extended
05:30

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

01:15

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.

10:09

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

13:30

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

17:38

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.

18:02

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.

00:59

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

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Lawrence Turton, 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.

Ready to start learning?
Start Learning Now