Site review: sass-lang.com

SASS is a CSS pre-processor that's quite popular in job postings right now. SASS proposes, like most frameworks, that it makes site development and maintenance faster and easier.

It does this by adding various features which you can use in your CSS: variables, nesting, partials, imports, mixins, inheritance, and operators.

First a quick analysis of SASS

To use SASS you need to install Ruby, because everyone loves prerequisites for languages which are native to the browser, amirite?

Variables allow you to store things such as colours for easy reference. This means that you can use them all over the place and change them when you need to. Of course if you're using an editor such as VS code, only a couple of typefaces, and not so many colours that your design looks like it's from the 90s, then you probably don't need variables. I've never worked on a project where a colour was changed site-wide without changing the entire design, and thus the entire CSS.

Nesting allows you to save time (allegedly) by grouping blocks of code together. This has the added benefit of frequently generating more code than if you'd just done it the normal way.

Partials let you create CSS snippets to modularise the code across your site. But really folks, if you have so much CSS that it requires modularising, have you just written too much CSS?

Imports are... wait – doesn't CSS do imports anyway? And aren't they considered bad?

Mixins are an ideal way to write vendor specific prefixes in a non-repetitive fashion for all of the non-production sites you'll ever make. Because if you're using vendor specific preferences on live production sites then you're a terrible, terrible person, who doesn't care about site maintenance or indeed, clients.

Inheritance lets you write code in a non-repetitive manor which is great, if you don't know how CSS inheritance works.

Operators are, well they're pretty much useless now that we have calc, right?

If you haven't realised by now, I'm not a fan of CSS pre-processors. I don't think they really add anything to the language, other than adding complexity for no reason just because it was a hip thing to do in the early 2010s.

Homepage analysis

Literally the first thing on the site is the wording: "Your laptop needs more Sass. Grab a set of Sass stickers now." Assuming I have a laptop isn't a great user experience. Ironically, apart from the tiny footer text, this is the only copy on the homepage that passes colour contrast – nice accessibility guys. There's also the very common mystery meat mobile navigation button.

Carrying on with accessibility there's an empty button, skipped heading level, and a total of 21 contrast errors.

As you'd expect from a leading web system there are, oh – there's four W3C validation warnings. I suppose these are quite minor, but it's pretty poor when you're trying to be an industry leader.

There's an A B score from GTmetrix which isn't too bad, but it's a shame that the main problem is with expires headers on CSS and JS files. It seems to take away from SASS's glory that there's at least some problem with something CSS related.

The page size is 533KB – fairly small by today's standards, but a whopping 370KB of this is related to fonts. You should probably question if you're doing things properly when 22/45 of your requests are to font files. Speaking of excessive things, there's seven JS files weighing 113KB despite there not being any obvious JS across the site.

There's no site security SSL certificate and the site doesn't necessarily require one, but it's still best practice and promoted by Google so it should have one. They're currently freely available from Let's Encrypt so there's no reason not to be secured.

Conclusion

The number of problems isn't huge – 22 errors, 5 warnings, an A B performance score. You may consider it nitpicking, but on such a small homepage I'd expect much better. If there's this many problems on a tiny page, how many would there be if the same developers made a larger site?