The word 'SASS' became a common word today, that floating around among web designers and developers. SASS (Syntactically Awesome StyleSheets) is a CSS preprocessor. A CSS preprocessor is a program that takes one type of data and converts it to another type of data with the help of a SASS compiler. In the case of CSS, SASS is a popular CSS preprocessor that launched with an aim to processed CSS and thus makes the coding simpler and more efficient.
If you are a web artisan, you may know what a CSS preprocessor is. To those, who are new in this area, a CSS preprocessor is basically a scripting language that extends CSS and then generates it into regular CSS. Sass, Less, and Stylus three are the primary CSS preprocessors on the market today.
Well, now we know what a CSS preprocessor is. But the question is: Why Preprocessing CSS? And How we will be benefited while using a CSS preprocessor?
Why Preprocessing CSS?
Because CSS is primitive and incomplete. You can't build a function, or inheritance, or reuse a definition. These functionalities are quite hard to achieve in CSS. By using a preprocessor, you can easily implement those in your project and thus increase your productivity, and decrease the amount of code you are writing. CSS Preprocessors come with the aim of saving developers time and effort. Let’s see how it works:
Let's assume you are designing a website where the primary color code of your website is #2870dc; that means the color code of the header, footer, links, or some other bullet points is #2870dc. So, you have defined the following color code in all the tags of your CSS file. But if you want to change the primary color, or sometimes you have to change it to fulfill the client's requirements. So, how you will handle it with CSS?
You have to search and go through all those tags where you define the color code in previous and change it manually. For a small file, it won't very difficult, but while the file is about 10/20 thousand lines or more than that then it became really panic for a developer.
Let's see how you can handle it with SASS. We can define our primary color as a variable in SASS, and call them where we need to use it. Look at the example below.
$primary-color: #2870dc;
$secondary-color: #dc28c6;
p, a{
color: $primary-color;
}
hr{
color: $secondary-color;
}
So, whenever we need to change the primary color or something else of a website, we do not change it to the whole script, just changing the value of one variable can resolve it, while using SASS.
How we will be benefited while using a CSS preprocessor?
There are many advantages and various reasons why CSS preprocessors can be a valuable tool in our development process. One of the biggest reasons is preprocessors make our CSS DRY (not having to repeat yourself). A CSS preprocessor expands the capabilities of CSS by allowing us to use variables that store values, nested rules declarations, create mixins for common snippets and libraries, and thus save our time with the improvement of the entire project.
Let’s see some examples of how we write code in CSS vs how we write code in SASS.
Code in CSS
ul{
margin: 0;
list-style-type: none;
}
ul li{
float: right;
}
ul li a{
color: #229ed3;
}
ul li a:hover{
color: #999;
}
Code in SASS
$link-color: #999;
$link-hover: #229ed3;
ul{
margin: 0;
li{
float: right;
}
a{
color: $link-color;
&:hover{
color: $link-hover;
}
}
}
Importance of a Compiler to Preprocessing CSS
So, now where do you write SASS code or how to start writing SASS code? Well, you can write SASS or Less code using any text/code editor but you can't send SASS/Less code directly to the browser, because it a browser doesn't know what to do with it. That's the importance of why you should use a CSS preprocessor to translate or compile the SASS code into standard CSS code.
There are many compilers for SASS/Less/Stylus. But not all of them are good as expected. In this article, we'll cover the best tools for compiling SASS and also works with Less and Stylus.
Koala (MAC, Windows, Linux) - Free
Koala is an open source and free GUI based application or compiler for compiling SASS and other preprocessors like Less, Compass, and CoffeeScript. This tool is available to download for Windows, Mac or Linux and can run on there. Koala needs either Ruby or libSass installed locally to successfully compile SASS or other files.
WebsiteScout-App (MAC, Windows, Linux)- Free
Scout-App is an open-source and cross-platform CSS compiler that can compile both SASS and Compass out of the box. It has most of the features of any paid compiler. Scout-App was designed with a powerful translation engine allowing it to change languages on the fly.
WebsiteCompass
Compass is an open-source CSS authoring framework that uses the SASS stylesheet language to make writing stylesheets powerful and easy. It has all the powers of SASS and comes with ready-to-use mixins, functions, and other utilities. Compass runs on any computer that has ruby installed.
WebsitePrepros (MAC, Windows, Linux)-Paid
Prepros is eligible to compile almost all preprocessing languages like Sass, Less, Stylus, Cssnext, Jade/Pug, Markdown, Slim, CoffeeScript, and more. It is a powerhouse, a grid production engine in itself, a framework to create grid frameworks. Prepros reloads your browser automatically every time you save a file in the code editor.
WebsiteHammer (MAC)-Paid
Hammer has been dubbed a "game changer" for web development. It ships with built-in support for Sass (with Bourbon), CoffeeScript, Slim, HAML & Markdown, as well as Hammer’s own special tags with automatic language compilation, to HTML, CSS, and JavaScript.
WebsiteLiveReload (MAC, Windows, Linux)- Paid
The feature that can make you a huge fan of LiveReload is auto compiling. Though it does not have a great or charming UI. However, the job of converting SASS and LESS to CSS of this compiler is perfect. LiveReload monitors changes in the file system. As soon as you save a file, it is preprocessed as needed, and the browser is refreshed. LiveReload now works on Windows, Linux, and Mac OS as well. However, the Windows and Linux version of this compiler is free now.
WebsiteCodeKit (MAC)- Paid
CodeKit is powerful and much more than a compiler. It compiles almost everything such as SASS, Less, Stylus, CSS, CoffeeScript, Pug, Slim, Haml, TypeScript, JavaScript, ES6, Markdown, JSON, SVG, PNG, GIF, and JPEG right out of the box. But with the free version, you can compile only the LESS files. You have to pay $34 if you want to use it as another compiler then.
WebsiteSassmeister - Online Editor
Sassmeister is an online playground for compiling SASS. In fact, it is one of the top SASS playgrounds, with the help of Sassmeister you can able to see the powers of SASS online without getting into Ruby installation. Moreover, you can choose the SASS version and syntax, CSS output style, Extensions, HTML syntax, and so on.
WebsiteThe following articles will help you to start working with SASS, you will learn how to compile a SASS or Less file with the help of a preprocessor. You may have a look.
Final Thought
SASS is an essential part of modern web design, the sooner you start with SASS the better you design. There are many SASS tools available in the market - paid as well as free to use. All these tools we have enlisted here are great for compiling codes. Depending on your expertise level and project needs, select the right tools and give your web design workflow a modern touch.
Read more Bootstrap Cheat Sheet
