Quick guide to using SCSS – Handy code snippets

Sassy CSS

Sassy CSS

Perhaps if you are reading this post I assume, you have heard about couple of these SASS, LESS, and SCSS and by this time probably decided to use SCSS for your next project. So, I am not going to waste any time pointing out which one is better and why.


You can use variables to store information you may want to resuse like colors, typefaces, width or any other you want.Sytanx is same as PHP using $ sign in front.


As you may know code in HTML is clearly nested and follows hierarchy. While in CSS there’s no nesting but SASS/SCSS has over come this problem. You can now nest classes/IDs as in HTML. Look at the example


To use Pseudo-classes like :hover, :visited, ::before ,you can nest it inside main class and use & followed by Pseudo-classes. This makes much more logical sense then CSS.


Mixins are like code snippets or methods as you can pass values to them.They are quite helpful for vendor specific prefixes. Consider this example where you can set border radius of elements without writing all the code and pass the value of radius as well.


SASS/SCSS supports following operators + , - , / , * , % using which you can perform any mathematical operations in code. They are useful in many situation you may not think of now. Consider this example, here we calculate width in percentage using value in px.


If you know about Object oriented programming, you have probably heard about inheritance. Inheritance or extending lets you reuse CSS properties. If you love idea of don’t repeat yourself(DIY) type of coding, you’ll love this feature.

Tags: , , , ,