I'm new to front-end development, and I'm trying to get a handle on CSS pre-processors like Less and Sass. So, just to confirm, do these pre-processors compile down to regular CSS? I found a cool project that involves HTML, CSS, and Less files, and it's working along with some JavaScript and canvas elements. I'm particularly curious about how the points are stored in games like the whack-a-mole one since I couldn't locate any code for that.
I've come across tutorials explaining that I need to install the Less pre-processor to use it, but the game still works without that. Do modern browsers support Less natively now? Also, if Less translates to plain CSS, how can I see the actual compiled CSS code? I want to understand how features like loops and variables are utilized in the CSS.
2 Answers
If the game runs without the pre-processing of CSS, that means it's using pre-compiled CSS already. Nowadays, the necessity for pre-processors has greatly reduced. They were originally designed to add features not available in CSS and compile them into standard CSS that works across all browsers. But today, many of those features are supported natively, making pre-processors less relevant.
Exactly! So, if you want to view the compiled version, just look at the styles.css file loaded in the index.html. You’ll see all these calculations turned into plain CSS that the browser can understand and render.
In the whack-a-mole game, all the Less files have already been compiled into a styles.css file, which is referenced in the index.html, so that's what the browser pulls in. Just so you know, these CSS-focused games can be a bit tricky since they use some clever techniques that might not be the best starting point for learning CSS or pre-processors. Regarding the score, it actually works with some radio inputs that are checked when you click on the mole, which then helps display the score by moving the numbers around.
That's true! For example, preprocessors offered great tools for color manipulation that made it easy to create variations from a base color.
Here’s a quick example:
$color-primary: #3498db;
$color-primary--lighter: lighten($color-primary, 10%);
$color-primary--lightest: lighten($color-primary, 20%);
$color-primary--darker: darken($color-primary, 10%);
$color-primary--darkest: darken($color-primary, 20%);
When CSS didn’t support these manipulations, you would write that in a .less or .sass file, and the pre-processor would compile it down to a simpler CSS version. The compiled CSS would just have the final color values where the pre-processor code was used.