Erick Jones

erickjones-2015-blog-header-Image-sass-for-beginners

Sass for beginners

Syntactically Awesome Style Sheets

What makes Sass/SCSS so awesome?

Well, if you have been using CSS for years, you probably miss some functionalities that would make your stylesheets more inteligent. Sass came to add these new improvements to CSS.

The meaning of the acronym S.A.S.S. is: “Syntactically Awesome Style Sheets”. The name is so awesome as the idea behind Sass. If you don’t know nothing about Sass, this article is for you. Lets keep it basic and after I will write a second part of this article showing how can you improve your Sass Stylesheets and use it with other tools that will make your app more smart and efficient. Sass is a scripting language that can use operators, compute expressions, use variables, functions, conditionals and loops.

The original syntax of Sass is very different from normal CSS, what made some people shake their legs and turn their faces to it. Some years after they came with the idea to make it more syntax-like CSS. This is called SCSS. In this article we will just write SCSS.

If you are interested to know more about it, in the end of the article I link further reading about Sass.

Installation

You will need Ruby installed in your system.

Linux

If you have Linux you can hit the Command and get it like that:

Windows

If you use Windows, there is a Ruby installer that will do all the work for you and + install a Ruby command line powershell application so you can run your code.

Mac

If you use Mac you dont need to Install Ruby before. Mac already comes with Ruby  .

Now you can install it

Hit your terminal/Command/cmd and enter:

If you receive some error message, try with sudo:

You can check if is working with:

This should print the version of Sass you installed. Congratulations, you are one step closer to the illumination 

Lets learn the basics now

I will try to teach you step-by-step and if you don’t understand something, leave your comment and we will find the answers together.

Create a file called myFirstSass.scss, and lets start.

Compiling to CSS

To compile to CSS, you just need to type in your terminal:

Or you can just simply start a watcher that will compile to CSS everytime you save your SCSS file:

Important to say that the SCSS file doesn’t need to have the same name of your CSS.

Variables

With variables you can change all your CSS systematically. Variables in SASS always start with $. If you are not a programer and don’t know what a variable is, the variable is a “name” where you can store a value on it. See the example below:

this will compile to:

So as you can see, you can mix the variables with your old way to write CSS with no problems.

Nesting selectors and the “&” selector

You can save some time also nesting selectors. The & references the parent selector:

this will compile to:

Partials and Import

You can use chunks of other .scss files to have more modularity. I can import a reset file to my scss without the need to write this reset always when I write a code. The partials in Sass always shall be written preceding by “_”. Example: “_reset.scss”:

Now to import this partial to our SCSS is very easy:

You dont need to write “.scss” when you import. Now save your code and see your compiled CSS with the reset imported.

Extending from other selectors

You can easily use properties from other selectors with “@extend”:

This will output:

Mixins and Includes

Mixins are like functions. You can set a name for your @mixin and pass any value in the parameter. This can save you time to write vendor prefixes or to apply the variables you have already set in your project. The @include will be responsible to insert this @mixin where you want:

This will output:

Using operators

Sass makes possible to set properties and values based on calculations. You can add, subtract, divide, multiply and etc.

Lets make a box float in the middle of the screen using this magic:

See the Pen eNVWBd by Erick Jones (@erickjones) on CodePen.

That’s actually nothing!

You can use your creativity and make smarter and modular Stylesheets. Hope you like folks.
For any question, you can be free to comment and also participate in this article.

Further reading:

Sass official website: http://sass-lang.com/
And this A list apart article

Sharing is caring

Share on Facebook
Tweet about this on TwitterShare on Google+Share on LinkedInEmail this to someone


Leave a comment

More Articles

See all