Skip to content

What is Sass

Jonius7 edited this page Oct 25, 2021 · 1 revision

What is Sass? (explained simply)

Sassy CSS, or Sass, is basically an extension of CSS.

All CSS is compatible with Sass, so no need to worry there, you can use your existing CSS with no problems.

The file extension is .scss, compared to regular .css

Sass compiles to .css through an extension via VSCode, node.js, Ruby or otherwise. In Python's case, using the library libsass.

Why am I using Sass?

(Since Release 5.0)

The main benefit, is being able to split up your existing CSS into smaller, manageable files that cover a particular section or feature.

No need to use lots of CSS @import anymore, which can be notorious for page loading. Sass will handle the @imports for you and compile to one .css file.

It also makes enabling and disabling certain Steam Library tweaks much easier to do, such as the Box Play Button, Vertical Nav Bar, Classic Layout.

Have a look at scss/libraryroot.custom.scss to see how simple the imports can be.