Why We Love Sass
The popularity of Sass has quickly grown over the past few years and now it’s being very actively used in many web projects. Our team has often been asked by our clients if we support it. We took their requests into account and implemented it as a separate option in our workflow.
After six months of testing and digging into it, Sass has turned out to be so cool and convenient, that starting from this month, we have decided to use it in all our projects by default.
What Is so Cool about Sass?
Sass is a language intended to simplify CSS coding. It also serves as a preprocessor. As many of you may know, a preprocessor allows you to use additional features that are not available in CSS, such as variables, analogs for functions and many other things. The preprocessor creates a normal CSS file and replaces all variables and other pieces of code with static values.
SCSS (Sassy CSS) is a sort of a dialect of Sass. It’s a CSS extension without syntax distortions. The syntax of SCSS code is the same as in usual CSS. When I talk about working with Sass in this article, I mean using SCSS code.
If you are a designer or developer, most likely you have come across CSS markup, perhaps when using a PSD to HTML service, writing it yourself or updating it. When supporting a web project, you have to work with that type of code now and then, which sometimes can be quite challenging. It can be a real headache to replace some minor color or gradient. Oh my, 5 – 7 lines of CSS for a simple gradient, with different prefixes and almost identical lines of code everywhere. This is absolute HELL! You have to write 2 – 3 screens of code to create a simple animation. I’m sure you wish you could get rid of all those tons of code, never have to worry what prefix you might have forgotten and enjoy dry, clean code. Am I right? Well, here’s a solution for you! You can use Sass or combine it with one of the popular CSS3 frameworks, such as Compass, Bourbon, etc.
There are many helpful tutorials and discussions about this CSS extension language. Today, I will talk about a couple of real-life examples to illustrate some awesome Sass features.
IMHO, the best things about Sass are:
- The code is readable (thanks to nesting of selectors).
- The code is neat (thanks to mixins and helpers).
- There are handy variables and mathematical calculations right in the code.
Now, let’s have a closer look!
One of the best Sass features is nesting of selectors. Here’s an example:
For me, the code in the left tab is much easier to read and understand.
Variables and Math
Every design usually has a set of colors (2-3 main colors and several additional ones). Have you ever thought how convenient it would be to mark those colors as variables and use those in the code instead of setting them with an eyedropper tool in Photoshop every time? What if you could change the colors of a whole page in one single place? This sounds like a fantastic idea, huh? Let’s create some variables with the following names: colors, such as: $red, $blue and $orange elements: $link-color, $heading-color and $footer-link-color and any other names you like.
You can use the same variables multiple times in your code. If you change the value of a variable in this one single place, it will be updated everywhere the variable is used.
Variables can be used for colors, sizes, URLs and many other things.
Sass also comes to the rescue of lazy guys like me, who are bored with calculating size values. It will do this for you! You can conduct mathematical operations right in your Sass code. You can play around with both sizes and colors of your variables.
Clean Code and Mixins
As I’ve already mentioned, Sass allows you to create dry code without prefixes, which makes it easier to read and edit the code. Let’s add a gradient to a block with a .box class.
Just compare those two pieces of code and feel the difference. SCSS is definitely the winner here. Just two values changed and the new gradient is ready!
I used some ready-made mixins here: a mixin for a regular linear gradient and a mixin for changing the box model of the block.
If you need the standard box model back, you just write:
It’s that simple! Just FYI, here, at PSD2HTML, we don’t use mixins for CSS3 prefixes by default though. Our developers prefer the Autoprefixer postprocessor, since it’s much faster and has up-to-date prefixes. Moving on. Let’s say you need to create a cross-browser opacity that will work in all modern browsers and old IE versions. After you create a mixin (or use a ready-made one from Sass frameworks), you can use it anywhere in the code and change only the level of its opacity. Sass will generate the corresponding code for you.
Here, I wrote @include opacity(0.8); and Sass generated a couple of lines of cross-browser compatible code. Sweet!
Here’s what typical helpers will look like:
Handy and short!
Ah, Sass has too many interesting features to fit in one post. You can find more mixins and helpers on the official sites of Compass and Bourbon, where you can also learn how to add those frameworks to your Sass project.
Sass has lots of benefits. Everyone who has ever given Sass a try is not likely to go back to chunky CSS. Our team has always been proud of how simple and neat our code is. We do a lot of research and testing to keep up with the latest web development trends to deliver the best solutions to our customers.
We’re on the beta stage at the moment, and your suggestions and feedback are highly appreciated. As always.