A gentle introduction to Sass

September 07, 2016


Sass

Preface:

Sass is a great little helper for dealing with complex CSS and extending functionality, come along and learn about SASS.

Note: I gave myself little challenges you are welcome to try if you want to recreate my own learning curve.

Sass Syntax(es)

Challenge: Import and display some html styled in Sass Syntax ( Both of them ! )

The first thing I feel I need to clarify, is that there are 2 (Two) different ways to write SASS, let’s check out both with a simple example, this example will also show how to nest Css selectors,( a Sass feature), let’s start with the result:

See the Pen Sass Syntax Overview ( Plain CSS ) by Eugenio - Keno - Leon (@k3no) on CodePen.

See the Pen Sass Syntax Overview ( SCSS ) by Eugenio - Keno - Leon (@k3no) on CodePen.

See the Pen Sass Syntax Overview ( Sass ) by Eugenio - Keno - Leon (@k3no) on CodePen.

The main differences in between syntax styles:

  • Lack of semicolons and brackets on (Sass) Syntax
  • Semicolons and Brackets on (Scss) Syntax

Nesting

  • You nest by Indenting the selector/element in (Sass) Syntax
  • You nest with Brackets in (Scss) Syntax

There is a nice write up on the documentation about why and what the differences are…

As for which one to use, it is up for debate, currently( Mid-Late 2016), I believe Scss is slightly more popular with the crowd and Sass is more of a niche, so in the interest of setting you ( dear reader) for success, I’ll use only SCSS going forward

Variables:

One of the biggest things you can do with Sass, is define and use variables, let’s check how:

Challenge: Define and use at least 2 Sass variables.

See the Pen Sass Variables by Eugenio - Keno - Leon (@k3no) on CodePen.

As you can see, you declare and use variables with the dollar sign $ , this is super handy when you have complex sites with tons of elements and you want to change some related colors for instance.

Data Types:

This is just the tip of the iceberg, you can use various Data Types and operations, let’s check out the different data types you can use with sass first:

Challenge: create 2 variables that use different data types and use them

See the Pen Sass Data Types by Eugenio - Keno - Leon (@k3no) on CodePen.

And the rest (from the docs) :

  • numbers (e.g. 1.2, 13, 10px)
  • strings of text, with and without quotes (e.g. “foo”, ‘bar’, baz)
  • colors (e.g. blue, #04a3f9, rgba(255, 0, 0, 0.5))
  • booleans (e.g. true, false)
  • nulls (e.g. null)
  • lists of values, separated by spaces or commas (e.g. 1.5em 1em 0 2em, Helvetica, Arial, sans-serif)
  • maps from one value to another (e.g. (key1: value1, key2: value2))

Operations:

So far so good,things start getting more complex and useful once you consider that Sass add the ability to do operations within Css, let’s start with some basic ones:

Challenge: Use some Basic operations in Sass

See the Pen Sass Basic Operations by Eugenio - Keno - Leon (@k3no) on CodePen.

Conditionals

A slightly more complex (but awesome ) use of operations in Sass is with conditionals:

Challenge: Create a conditional in Css with Sass !

See the Pen Sass Conditionals by Eugenio - Keno - Leon (@k3no) on CodePen.

This being an introduction, I’ll leave with a simple conditional, but there is more, you can use @if, @for, @each and @while control structures as well !

Functions

Another cool feature of Sass is the included functions

Challenge: Use a Sass function, any function.

See the Pen Sass Functions by Eugenio - Keno - Leon (@k3no) on CodePen.

Full list of built-in-functions

And for an advanced related topic, you can also create your own Sass functions

Imports

As their name implies, imports allow you to add another chunk or segment of CSS ( CSS already allows imports, but Sass generates a single file, so you can save on requests).

Challenge: Import some Css into a Sass file.

See the Pen Sass Imports by Eugenio - Keno - Leon (@k3no) on CodePen.

Note: the above is just an example using plain Css Imports ( due to how codepen works), in a local environment you would us something like:

@import 'defaultStyle';

Check the rest of the Sass Import documentation for more.

Mixins

And last but not least,let’s take a look at mixins, what’s a mixin you ask ? good question….

Challenge: Figure out what a mixin is and make and use one.

See the Pen Sass Mixins by Eugenio - Keno - Leon (@k3no) on CodePen.

A mixin is a just a collection of css declarations you can then later reuse, you can make mixins for vendor prefixes, small and large components and other useful bits of css, you define them with @mixin and use them with @include but there’s more, you can also add arguments and thus make them into function ! let’s try that:

Challenge: Create a mixin with arguments and use it.

See the Pen Sass Mixins with Arguments by Eugenio - Keno - Leon (@k3no) on CodePen.

And that’s that, you can check the documentation for more about making your own mixins with arguments

Things I didn’t cover/further challenges: Other directives like @function and control directives, extending Sass, lists and maps and complex mixins, plus the sass ecosystem.

The Takeaway:

Sass does give css super powers as they say, it takes a little getting used to the syntax and wrapping your head around the new css functionality, but if you learn it you will become more productive, it is also worth mentioning that some of the Sass functionality is being slowly incorporated into css, but it’s still worth to learn sass since there is a healthy ecosystem of libraries that build on top of sass to make Front End development better and faster.

Best,

Keno