CODEWITHSUNDEEP
sassatom-editorauto-compile
Antoine Henrich
Antoine Henrich

Reputation: 180

Compiling into multiple .scss files with Atom Plugin sass-autocompile by armin-pfaeffle

I am note quite sure if this is even possible with this plugin, but my current problem is that I maintain a large SCSS project, which has three sides and I actually want three different CSS files to be compiled while saving.

I have three main files:

  1. core-something_1.scss
  2. core-something_2.scss
  3. List item

core-something_3.scss

All of there files need the same reset colors etc. This is why they are all in one SCSS project. To be able to compile I need to add the comment: // main: ../core-something_1.scss

This will only compile one file, which makes sense, but is there a possibility to add smth. like this: // main: "../core-something_1.scss", "../core-something_2.scss", "../core-something_3.scss"

The result will be that it autocompiles three files for me. Best case would be to get rid of these comments, and just auto-check where the scss sub-files are called and compile them. I used to work on "Coda by Panic" but swiched to Atom some weeks ago. In Coda everything worked fine without any comments. Maybe somebody can help. Thanks! :)

Link to plugin: https://github.com/armin-pfaeffle/sass-autocompile

Upvotes: 1

Views: 2093

Answers (3)

Martin Geldart
Martin Geldart

Reputation: 407

A little late to the party but I may have the solution for others that complain that partial files and not compiling to the main file when saved.

I use this little commented-out line in all my _partial files. This tells SASS to compile the partials and add them to the main file:

// main: main.scss

Obviously, change main.scss to the filename of your main file and place this on the first line of your stylesheet.

Upvotes: 2

Zak Abu Zubair
Zak Abu Zubair

Reputation: 3

In Atom sass-autocompile settings select/tick the options Compile on Save and "Compile with 'expanded' output style"

Define the 'expanded' output style file path -> ../css/$1.css

When you save/compile your main.scss file, it will create a 'css' folder into your main project and you will have an output .css file.

You should import all your _core-something1.scss, _core-something2.scss into your main.scss file.

i.e

@import "core-something1"; @import "core-something1";

You don't need to compile individual files you just need to compile/save main.scss

Upvotes: 0

dommmm
dommmm

Reputation: 908

If you need to maintain one common set of colors throughout the site, wouldn't it be better to split it out into a partial and reference it into each of your scss files?

@import 'reset-colors';

Upvotes: 0

Related Questions