CSS Preprocessors – Check ’em out!
CSS Preprocessors have recently caught my attention, and here’s why!
Although I wish I could show specific examples of how I have used CSS preprocessors in my work, but truthfully, it’s still a work in progress. I’m learning more about them and how they work, but I definitely see the merits behind it.
What are they? Preprocessors, in its name are essentially ways to precompile your CSS into maybe a variable that can help with simplifying syntax or make the code more robust. When I saw that they had made it a variable, I realized just how useful this could actually be, in cases where you copy+pasta certain codes into attributes and values, any alteration would require the designer to go back into every single line and every file, but if you just change the value of the variable, it’s a persisting change!
Why use one? Increases the functionality as long as everything that it outputs is CSS and works in a browser! Because it is a “preprocessor” it technically isn’t “CSS” per say, which is what makes it so useful. It allows another layer of abstraction that despite another layer, makes it more simple and reduces limitations.
A problem that I see is in larger scale projects. If the entire team or group is not working with the same preprocessors, it could run into errors because not everybody will be able to see the generated page the same way nor will they be able to edit the files the same way, especially with methods that are unique to preprocessors. Even if it isn’t in a team, a problem can be found with other developers or clients. Although it won’t break the site, it just won’t be able to render and generate the same way until put into production.
But there are a lot of preprocessors? Which do I use?
I’m currently using Sass, as the preprocessor, and Compass, as the CSS framework. Honestly there are many choices, like Sass, LESS, and, Stylus and what not, but I just decided to pick the one that I found the most written about and based off of documentation and guides. They’re all very much intuitive and easy to learn. Sass and LESS are basically identical to CSS regarding its syntax. They both use the standard syntax which can make the “conversion” a very simple process.
Some preprocessors use the common brackets/semicolons, some do not, and better yet, some do neither! Another thing to factor is the ease of declaring a variable. Although they’re all done similarly, they each have a different method: Sass is $, LESS is @, and surprisingly, Stylus doesn’t really matter. It seems that Stylus has the most “robust” framework and flexibility.
One great thing about preprocessors, is that they can NEST! Instead of writing the same parent element over and over again for like “p”, “a” or whatever, you can just indent and nest within the parent’s brackets. As I mentioned earlier, another thing about variables is how they can be reused and can be persistent with changes, known as “mixins”… or functions that can reuse the properties throughout the stylesheet.
Can’t really say too much about inheritance because I personally feel it’s a bit more work because the user has to specifically add another line to extend the styles to other elements. Maybe in situations where there is a lot of inheritance needed, I don’t really see the need. LESS does not truly support inheritance and instead just adds multiple selectors to one set of properties.
Summary! ~~ :3
In the end, preprocessors are a way to add functionality and additional features that can’t be done in CSS alone. Meant to make development quicker, easier, more maintainable, and more scalable, preprocessors are like smart watches, nice to have but not necessary.