Use sass-autocompile on Atom

2019.04.06

Compile scss using sass-autocompile on Atom

How do we use sass-autocompile??

Initial setting

Install Node.js

Node.js

confirm complete instration of it by command prompt./p>

> node -v
v8.9.4//version

> npm -v //npm command instllation
5.6.0//version

Install node-sass

//install
> npm install -g node-sass 


//installation check
> node-sass -v
node-sass       4.7.2   (Wrapper)       [JavaScript]
libsass         3.5.0.beta.2    (Sass Compiler) [C/C++]

Install Ruby

Ruby

Install sass and compass by Ruby command prompt

Caution!! Use Ruby command prompt, not Windows command prompt!

//Confirm gem command validation 
> gem -v


//Install sass
> gem install sass

//Install compass
> gem install compass

//Confirm complete instllation
> sass -v
> compass -v

Install sass-autocompile on Atom

Install sass-autocompile from Atom setting. And do initial setting.

  • Choose “Compile with ‘extended’ output style”.
  • Set CSS file name “$1.css”.
  • Set indent.

Compile scss files.

Make work directories

Make folder for scss and css each other.
for example…

Root ——– css
      |
       — scss

Creat scss files and script “// compileCompressed: ../css/$1.css” on first-line.
After install sass-autocompile, “+”mark and Window icon is appeared(sometimes they hide).
If error occur, click it and input “create compass” on command.

Compile scss to css!!

Save scss files, then they compile scss to css.
CSS files are saved in css directory.