Sass it up! Why u should use Sass
I write stylesheets by hands! I don’t need any help! I don’t want to add complexity to my workflow. Go away just shoo…
That's how you think right. But I guarantee after going through this post you’ll change your mind and make way for Sass in your tech stack.
Sass (and other CSS preprocessors) can be a powerful ally — a tool that any style-crafter can easily insert into their daily work. It took me a while to come around, but I’m sure glad that I did.
What are CSS preprocessors?
A browser can only understand CSS, as the styling technique for any DOM element being rendered. CSS, as a language has its own feature set, which at times might not be enough to create a clean and reusable chunk of rules. Eg. Not being able to reuse a collection of rules in multiple selectors, unavailability of variables which may lead to ambiguous pieces of data across the stylesheet.
To overcome most of these limitations, the concept of a preprocessor was born — offering an advanced way of writing CSS, which extends the basic functionalities. This advanced code is later compiled as normal CSS code using respective compilers (which depends on what preprocessor you are using), which the browser will understand.
Learning a new tool can suck and find 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.
As our web pages and apps get more complex our style sheets get larger and harder to maintain. CSS preprocessors like Sass help by keeping our style sheets concise and allowing us to modularize our code while offering a whole slew of features not yet available in regular CSS.
These extra features also make them really fun to use! Now you may have seen something that looks like this:
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
// http://sass-lang.com/documentation/file.SASS_REFERENCE.html#_11and thought, “Oh My Dickens? Thanks but I’ll keep my regular ol’ CSS.”
All properly formatted CSS is valid Sass!
This means you can start using Sass while continuing to write your styles as you always have, slowly incorporating more features as your comfort level grows. That’s right folks, just the same ol’.
Sass misconceptions
Do I need to know Ruby or advanced command-line shenanigans? Will I need to completely change the way I’ve been writing stylesheets? Will the CSS it outputs be unreadable?
The answer is “nope” for each of those questions.
Using the command line
This is the most comfortable and easiest way of using CSS SASS. Once Ruby and the SASS Gem are installed, you need to let the program know which SASS file needs to be converted to CSS, and here is the command for that:
sass input.scss output.cssThis command converts the file input.scss (by the way, .scss is the extension of your SASS based file, which stands for SASSy CSS), to output.css, which is normal stylesheet with good old CSS syntax.
But, as a front end engineer, you might not want to execute this command every time you make a change to your SCSS file, as it can become a cumbersome job to do. In that case, you can keep a watch on the SCSS file, and convert the same to normal CSS automatically, whenever there is a change to it, and here is the command for that:
sass –watch input.scss:output.cssHow to get started?
Getting started with a preprocessor is not rocket science. As I mentioned earlier, a CSS preprocessor will have its own set of syntax, which finally gets compiled into normal CSS, which in turn, the browser will understand. So, all you need is to choose a way in which you wish the preprocessor to get converted to normal CSS, and then you are good to go!
As far as SASS is concerned, here is a crash course I made for beginners to get started with Sass.
About Me
I’m a Senior Product Engineer from India, working in web and mobile development. I enjoy turning complex problems into simple, beautiful, and intuitive software. I blog to share my software knowledge with others.
My job is to build your idea so that it is functional and user-friendly but at the same time attractive. Moreover, I add a personal touch to your product and make sure that is eye-catching and easy to use. I aim to help you validate and scale your startup most creatively.
