I saw that one of the local bootcamps was hosting a crash course on Sass so I decided to enroll to see what it’s about. I have no experience with Sass and until I started googling it the night before the crash course, was absolutely confused about how it could help with css and what a css preprocessor even did. In all of my years working in WordPress, I’ve come across themes packaged “with sass” or “less” and a quick search typically redirected me to their homepages but never any posts with sufficient explanations. Maybe I wasn’t looking hard enough but either way, I did not explore further. I’m very proficient in HTML and CSS so I’m able to work my way around most stylesheets with minimal assistance.
The night before the class I couldn’t sleep so I decided to search and collect some articles on what sass is and why it’s all the rage. I ended not attending the class and I found more than enough information online (ha!). These are my findings, drumroll please….
The basics
CSS which stands for Cascading Style Sheets, is a stylesheet language used to customize HTML elements appearance within browsers. HTML establishes the structure of the web page and CSS defines the styling of the structure. (I know all of these but for the purposes of this exercise, entertain me).
You can use CSS to increase the size of fonts on your page, change the font types and styles that are used on the page, change the background color, change the borders around certain elements – basically apply THE WORKS. For some, making changes to stylesheets can be tedious. If you decide halfway through development that you want to change the color, you’d need to do what I do: use the find/replace feature within your text editor.
The nitty-gritty
From everything I read, there were folks who wanted to implement practices & concepts of an actual programming language in order to optimize the CSS styling process: using variables (instead of the find/replace features), conditionals and other programm-y things like math and the DRY concept (Don’t Repeat Yourself). Enter CSS preprocessors… It takes code written using a “simple preprocessed language (CSS with added extensions)”, runs it through a compiler program which then converts it into CSS… hence the name CSS preprocessor. How is this better than just plan ole CSS? The preprocessed programming language has a separate set of rules of engagement which means more flexibility & functionality. Somehow all of that additional functionality is re-expressed into CSS – although I’m not completely sure how that works yet. I’m not completely sold on the idea of learning a new “preprocessed” language in order to just write CSS, but according to The Internets, it has it’s pros & cons which I won’t be able to really assess until I install a compiler and load a preprocessor. Popular preprocessors include Sass which was built on Ruby and Less which was built on JavaScript. They have different syntax and features but the underlying concept is the same.
A good thing to note is that there are preprocessors for HTML and JavaScript as well, but right now I’m focused on CSS. I don’t think it’s advisable that a newbie coder jump right into using preprocessors if they don’t have a solid foundation on the language itself – that’s just my opinion.
I think that my ability to grasp the usefulness of a CSS preprocessor this time around is a result of my work learning JavaScript and Python. I didn’t have that foundation so I wasn’t able to make the connections previously but now I can see how & why it would be helpful for developers who are accustomed to that level of functionality with other languages and want something similar with CSS. I’m still on the fence about if and how I’ll implement this but once I do I’ll write about it!
Additional Resources:
- https://psdtowp.net/css-preprocessors.html
- https://www.keycdn.com/blog/sass-vs-less/
- https://css-tricks.com/sass-vs-less/
- http://www.creativebloq.com/web-design/what-is-sass-111517618
- http://alistapart.com/article/why-sass
- http://www.sitepoint.com/whats-difference-sass-scss/
- http://atozcss.com/blog/what-is-sass/
- https://www.smashingmagazine.com/2016/01/variables-in-css-architecture/
- http://learn.shayhowe.com/advanced-html-css/preprocessors/