SASS
I’ve been doing a bit of front end work recently and working heavily in CSS (and HTML. and JavaScript.) In the course of some projects, I’ve run across examples of things I’m trying to do, done with SASS. I’ve used SASS to an extent, but am certainly not as comfortable working in it as I am in pure CSS. I thought I’d look into SASS a little more and get comfortable with the uncomfortable.
Let’s start with some basics
SASS is compatible with all versions of CSS. This is important when using CSS libraries or other features that may need to be compatible.
Before you can start using SASS, you need to set it up on your project. You can get started using SASS either through an application or through the command line. Check out the instructions here to get started!
Why use SASS?
CSS on its own can be super powerful, but the larger or more complex your layout gets, the larger and more complex your stylesheets become. Even simple layouts can have a few hundred lines of CSS styling and can be difficult to maintain. This is where SASS comes in. SASS has a preprocessor that lets you use features that don’t exist in CSS yet. Things like variables, nesting, mixing, inheritance, etc. that make writing CSS simpler and easier to maintain and manage.
Did you say Variables?
Yup.
As in most programming languages, variables in SASS are a way to store information that you want to reuse. Instead of reusing the variable in your application, however, you are reusing it in your stylesheet. You can store any CSS value that may be use more than once, such as colors, fonts, etc. The ‘$’ symbol is used to make something a variable. When the SASS is processed, it takes the variables that have been defined and outputs normal CSS with our variable values in place.
What about Nesting?
The first thing to know about nesting is to be careful. Overly nested rules will result in CSS that could be hard to maintain. It is generally considered a bad practice.
Warnings aside, nesting allows for the same clear visual hierarchy that HTML uses to be used in CSS. Nesting is a great way to organize your CSS and make it more readable.
And Mixins?
A mixin groups CSS declarations that you may want to reuse throughout your application. A prime example of a mixin is for vendor prefixes: instead of writing out -webkit, -moz, -ms, etc., you can set write it out once as a mixin and reuse that mixin throughout the application. Creating a mixin is easy; you simply use the @mixin directive and give it a name. Once the mixin is created, you can then use it as a CSS declaration starting with @include and the name of the mixin. You can even pass a variable as the value to make the mixin more dynamic!
What’s that inheritance you mentioned?
In programming, we talk about having DRY code, well, a lot. If you’re not familiar, DRY means Don’t Repeat Yourself. We take great pains to reuse, not repeat, code snippets. But when it comes to CSS, we repeat often and that is not very DRY. In SASS, we can use @extend to share a set of CSS properties from one selector to another. We can write out our properties once and @extend them to other selectors. It helps you avoid have to write multiple class names on HTML elements as well!
One last thing, Operators.
Why would we want to do math in CSS? Responsive templates are the norm these days — websites need to be viewable on computers, tablets, phones, etc. In CSS, we have a few ways of making things responsive. We can use percentage values, such as setting a width to be 100%. In CSS3, we also have access to view height and view width values, so we can set something to be 100% of the view-width.
SASS has the standard operators: +, -, /, *, and %. We can use these to calculate the width and/or height that specific objects should take up on our screen. One thing we can do with operations is take a pixel value and convert it to a percentage without much hassle. For example, if we have a div with a fixed width, we can define the fixed space that elements with that div should take up. If we use operators, SASS will then convert those fixed pixel amounts to percentages.
Conclusion
Well, not really, this just scratches the surface of SASS. SASS is super powerful and can make writing CSS much easier, simpler to manage and definitely more DRY.
