So I guess I'm sort of obsessed with these poll-like opinion based posts lately, but I love hearing what the Dev community's take is on so many subjects! This week I wanted to talk about CSS - a "language" that I love completely and have such deep hatred for all at the same time.
This isn't a new debate, that's for sure, but I've mostly used vanilla CSS my whole life and was very interested in this preprocessor debate.
If you're new to CSS or the idea of preprocessors here are the formal web definitions of each:
CSS
Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.
Sass
Sass (short for syntactically awesome style sheets) is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). SassScript is the scripting language itself.
Sass documentation:
Sass lets you use features that don't exist in CSS yet like variables, nesting, mixins, inheritance and other nifty goodies that make writing CSS fun again.
Less
Less (which stands for Leaner Style Sheets) is a backwards-compatible language extension for CSS. This is the official documentation for Less, the language and Less.js, the JavaScript tool that converts your Less styles to CSS styles.
Less documentation:
Less only makes a few convenient additions to the CSS language, which is one of the reasons it can be learned so quickly.
Now that you have some context, here is my usual data table with comparisons. I scoured the internet for other people's opinions and have compiled them below:
| Regular ol' CSS | Sass | Less | |
|---|---|---|---|
| Setup | Ready out of the box styling | Setup required to ensure that code compiles before rendering | Setup required to ensure that code compiles before rendering |
| Use of Compiler | Not necessary | Needs compiler | Needs compiler |
| Use of Variables | Not capable | Can use variables | Can use variables |
| Documentation | Standard documentation with LOTS of information online | More frequently updated repo with less issues and PRs than Less | More issues and PRs than Sass repo |
| Integration | Great for smaller projects, becomes excessive in larger projects | Helpful for larger projects for cleaner, dryer code | Helpful for larger projects for cleaner, dryer code |
It's also good to keep in mind that CSS is always updating as well, and there have been some great new features added recently. Some that can even rival some of the benefits that could only be gained before by using a preprocessor.
But what do you think? If you've used either of these in the past, which do you think is better? And if not are you interested in either of them or preprocessors at all? Or is CSS on it's on plenty enough to deal with as it is?
Excited to hear all of your opinions and hope you all have a great rest of your week! 😊
Top comments (4)
Using Sass in most of the projects as many of the css frameworks like bootstrapnare using sass. Many of the free or paid html templates also come with sass. Other libraries we use also comes with sass.
I didn't realize that Sass is so widely used! Thanks for sharing :)
Vanilla CSS has had variables for a quite a while now.
Aren't supported in Internet Explorer, which means you need to give him a crutch (as always) in form of standard property values.
Oh I didn't realize that, thanks for sharing Stephanie!