An Intro to SASS in Rails
From the perspective of a developer, CSS is a bit of an oddity. CSS doesn’t inherently have logic, the ability to iterate or create loops, or to assign variables. This might be fine for simple static web pages. For larger sites and web apps, CSS can become tricky very quickly. CSS files can become long, like 700 lines long. If only there were something to help our CSS be easier.
Introducing SASS, which is short for syntactically awesome style sheets., It’s a CSS preprocessor, which means it will take your written code and process it into CSS. Which makes writing CSS better, but still provides proper CSS in the end. With SASS we can nest selectors, making our code a lot cleaner. We can also set variables which are useful when we want to keep things consistent. We can even do loops and conditionals to make styling multiple items even easier.
When reading about SASS you’ll probably see or hear about SCSS, and wonder what the difference between them are. In short, they’re both SASS but with different syntax and file extensions. SCSS is more like traditional CSS with curly braces “{ }” and semicolons “;”. While SASS syntax relies on indentation to specify blocks of code. SCSS syntax tends to be more common, but the choice is completely preference.
In Ruby on Rails we have SASS built in from the get go. Alternatively you can also install it using npm or brew in other projects, we can also install it standalone from their github. From there we can change our stylesheet file to have the .scss or .sass extension, which will let us be able to use sass.
One of the most useful and line saving features of sass is the ability to nest our selectors. With regular CSS if we had an id selector with a bunch of styles and then wanted to select only the h1 tags in that id, we would have had to make that declaration on a completely separate line. With SASS we can simply select the id then inside select the h1 along with any other styling for the div.
Another useful SASS feature is the ability to assign variables. With this, we can keep our consistency with things like spacing, color, or fonts. With the use of variables we can repeat less and make our code DRY. It’s worth noting that CSS does have its own variables that have their own pros and cons, like that they can cascade and you can access and manipulate them in JavaScript. However CSS variables can have browser support issues which SASS variables don’t.
SASS also allows us to create loops to iterate through elements in lists. Being able to loop with CSS selectors is helpful when we need to do a lot of repetitive styling. There are for, each, and while loops available in SASS. Combined with conditionals, this gives us a powerful tool when styling.
In SASS we can use conditionals as well to make our styles smarter and more dynamic. Using these with loops we can create repeating elements each with different styling without having to manually write out each selector. These can save a lot of our time and effort when we’re styling our website or app.
It is worth noting that SASS is still a declarative programming language like CSS. It can only ever say what to style on the page. It can’t do complex tasks like JavaScript can. Even so, having some logic and looping gives us more options for styling a large number of unique elements, as well as just more general flexibility.
SASS is an incredibly helpful tool with styling, and is widely used for many web apps or websites that are out there. You could still do everything that SASS does in CSS, and get a product that will look exactly the same. However SASS saves us a lot of time and pain, and since it comes with Rails by default it might be worth to give it a try.
This is a very helpful cheat sheet that goes over the main functionality of SASS. Here
