Sass is something that is compiled.
- You’ll start with something like a main.scss file.
- That file might include other sass files, have sass variables, etc
- You then compile that file, with the output being a normal css file, i.e. main.css, and it’s that file That your theme links to. Sass compilers can also do things like compress the CSS.
So the first step is to find a Sass compiler for your setup, and get that successfully compiling the sass you have. There are apps/programs, free and paid, as well as command line approaches.
Generally you set those compilers up to automatically detect when you edit your sass and it automatically re-compiles the css, so you don’t have to keep triggering that step manually.
Once you’ve got that compile step happening, you can tinker with the sass, do things like change variables to change colours in bulk, that kind of thing.
But one thing that sass is really good for is that you can write your sass nested.
So you can write something like.
.my_class {
h2, h3, h4 {
color: purple;
}
p {
strong {
color: green;
}
}
}
and that converts to CSS:
.my_class h2, .my_class h3, .my_class h4 {
color: purple;
}
.my_class p strong {
color: green
}
That’s a simple example, but it illustrates how you can wrap a section of css with a class, and it will automatically prefix all the rules.
Where it gets quite powerful is that that it will work with includes as well, so you can do something like this:
.ccm-page {
@import "partials/base";
}
And inside partials/_base.scss (note the underscore), you can put regular css, like all your regular element styling. When compiled, everything inside that file will be prefixed.
It means that if you’ve got some partial with a whole bunch of styles that are conflicting, you can just wrap that, and it’ll ensure everything inside it can only target elements within your actual page content (which automatically has ccm-page class on it).
Depending on how your sass is setup, sometimes you can just wrap everything. But it’s something to use sparingly, as it can just blow out the side of your stylesheets.
Once you know Sass, Less is basically the same concept.
I’d really recommend adding it to your skillset. It’s one of those things that really doesn’t take more than an hour or two to start using, but it’s immensely usefull.
