Syntactically Awesome Style Sheets

This post is the first in the series of blog posts connected to our general Thursday tech talks at GSIX.

Post by: Marija Dimitrijevska (Front End developer at GSIX Solutions)

Sass is a CSS preprocessor or a layer between the stylesheets of your author and the .css

It is an extension of CSS that adds power and elegance to the basic language.

In general it is the most mature, stable and powerful professional grade CSS extension language in the world and it is completely compatible with all versions of CSS.

We know that CSS on its own can be fun, but stylesheets are getting larger, more complex and harder to maintain, so this is where a preprocessor can help.

css-with-superpower

Sass lets you use features that don’t exist in CSS yet like: variables, nesting, mixins, inheritance and other nifty goodies that make writing CSS fun again.

Once you start tinkering with Sass, it will take your preprocessed Sass file and save it as a normal CSS file that you can use in your web site.

Later, when you’ve become fluent with Sass (and it won’t take long), it really does feel like a natural extension of CSS—as if it’s filling holes we all wish were filled by the CSS spec itself.

This is why since I started using Sass, I never once thought it is awkward or laborious, because it just feels like CSS should feel.

Once you try it, you’ll likely stick with it permanently.

 

How can you use Sass?

 Before you can use Sass, you need to set it up on your project.

According to the Sass Documentation it can be used in three ways: as a command-line tool, as a standalone Ruby module, and as a plugin for any Rack-enabled framework, including Ruby on Rails and Merb. The first step for all of these is to install the Sass gem.

 There are a lot of good applications that will get you up and running with Sass in a few minutes for Mac, Windows, and Linux. Most of them are free but there are some that are paid as well.

 

app

If you’re using Windows, you may need to install Ruby first.

The installer will also install a Ruby command line powershell – Application that will let you use the Ruby libraries.

There is also the Online Sass compiler that can be used for compiling your code.

The two best online compilers for Sass are:

  1. https://devotter.com/sass-compiler

  2. https://www.sassmeister.com

Sass scripts

In addition to the plain CSS property syntax, Sass supports a small set of extensions called SassScript. SassScript also allows properties to use variables, arithmetic, and extra functions and it can be used in any property value.

 SassScript supports seven main data types:

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

 

Lists are how Sass represents the values of CSS declarations. They are just series of other values, separated by either spaces or commas. In fact, individual values count as lists, too: they’re just lists with one item.

 

Maps in SassScript

 Continuing the map theme, Sass 3.3 comes with support for generating source maps when compiling to CSS. Source maps are a standard format for telling browsers how files they consume got generated.

 

Rules and Directives

 Sass supports all CSS3 rules, as well as some additional Sass-specific ones known as “directives.”

It extends the CSS @import rule to allow it to import SCSS and Sass files. All imported SCSS and Sass files will be merged together into a single CSS output file. In addition, any variables or mixins defined in imported files can be used in the main file.

@import takes a filename to import. By default, it looks for a Sass file to import directly, but there are a few circumstances under which it will compile to a CSS @import rule:

  • If the file’s extension is .css.

  • If the filename begins with http://.

  • If the filename is a url().

  • If the @import has any media queries.

 

Doing math in your Sass is very helpful. Sass has a handful of standard math operators.

Why I recommend you to try out Sass?

For me there are many reasons why I am using Sass and here are some of them:

  • First if you use Sass you will have a clean code, the code is readable (thanks to nesting of selectors).

  • The code is neat (thanks to mixins and helpers).

  • There are handy variables and mathematical calculations right in the code.

By now I’m sure you’ve heard about Sass and how “You really need to start using it!”. Learning a new tool can suck and finding the time to do so is next to impossible but sometimes a tool comes along that changes our industry and is too good to ignore.

marija-sass

What are your toughts about Sass? Can you share your experience with it?

I would love to hear more from you guys! Let me know on: marija@gsix.me

And also follow our blog for the next posts in these series of general tech talks.

 

***

 

Official Sass documentation: http://sass-lang.com/documentation/file.SASS_REFERENCE.html

Official Sass guide: http://sass-lang.com/guide

Join the Sass community: http://sass-lang.com/community