Package for the Atom IDE that takes a Sass file on each save and automatically compiles, lints, prefixes, and saves the resulting CSS code.
This plugin was something I developed rather quickly and primarily with my own use in mind. I wouldn't expect that others would find it any more useful than the myriad Sass compiler packages already out there.
Motivation to publicize and provide this brief explainer is mostly to make it easier for me when I eventually have to come back to debug something. Perhaps others might find it useful as well though.
auto-sass and install from Atom's in-app settings UI
Or, if you prefer via CLI:
apm install auto-sass
In the package settings UI, you can turn on/off any of the three additional post-compilation tasks:
There are also some module-specific configs exposed as well, including some of Dart Sass' common options (e.g. output style, source map) and fallback/override options related to Browserlist and Stylelint.
You can set the default file name and path for the output CSS relative to its source Sass file. Use
$1 as a stand in for the original file name (without extension).
By default, the output path location is set to
../$1.css, or in other words:
assets/css/src/main.scss ↓ assets/css/main.css
You can also override the output path on a per-file basis by following a
out: keyword in a first-line comment of that Sass file, as shown below:
// compile: ../$1/styles.css$sassy-var: 16px;@include my-mixin();..
On save this Sass file would get compiled and saved to:
Auto Sass doesn't compile partial Sass files of course—that's the whole point of the partials feature after all, however, it's quite handy to have certain downstream Sass files (i.e. those
@useing that partial file) recompiled automatically when the partial is saved.
You can tell Auto Sass to do this by adding a first-line comment similarly as described above to your partial file, but instead using a
link: keyword followed by a comma-separated list of Sass file paths—relative to current file, as before—that you would like to have auto-compiled whenever the current file is saved:
// main: ../main.scss$red: #FF0000;$etc: "...";..
For these couple of files, if we save
_partial.scss, it will go and compile
main.scss as if you had just saved that file.
With just those two basic first-line comment commands, we can chain up the compilation of files in pretty complex ways, though for simplicity's sake, I'm sure you'd rarely want to have a chain involving more than 3-5 files, max.
Also, while I described the "downstream" compiling feature to be for partials... you could make use of this on any other Sass file. The use case in _partials is just most apparent.
Not sure what the trend/long-term outlook is with Atom, I've found a lot of widely used packages remain unmaintained with stale deps... weird bugs I thought were due to this package ended up being problems with other linters and such.
I hope future me doesn't pull his hair out trying to squash a bug that's out of his control.
Why does Stylelint seemingly only do caching if exec directly via CLI and ignore
cache: true opt via node API?
Copyright © 2022 Neel Yadav
This project is licensed under the terms of the MIT License. Full license text is available in the LICENSE.txt file.
Good catch. Let us know what about this package looks wrong to you, and we'll investigate right away.