CODEWITHSUNDEEP
node.jsexpresssassnode-sass
Allan Stepps
Allan Stepps

Reputation: 1067

Get SASS to (auto) compile from specific files into different folders

I've got /source/sass/skin1_settings.scss which contains importations from /vendors/foundation/, some specific settings for that style and the app.scss. I would like my node.JS to compile it directly into /skin/skin1/css/app.css, how can I do that ?

NB: That's the same deal for the second style.

I'm using node-sass-middleware in order to use node-sass with Express.

app.use(
 sass({
     src: [sass_folder], 
     dest: [css_folder],
     debug: true,       
 })
);

And here's my tree structure, thanks.

./    
    +--vendors/                 <-- Third-party libs from external vendors
        +--jquery/         
        +--foundation/     
        +--angularjs/      
        +--modernizr/      

    +--source/
        +--sass/                        <-- custom stylesheet (not present on the prod server)
            +--skin1_settings.scss
            +--skin2_settings.scss
            +--app.scss

    +--skin/
        +--skin1/
            +--img/             <-- imported images (..@2x, ..@3x)  
            +--css/             <-- generated stysheet

        +--skin2/
            +--img/             <-- imported images (..@2x, ..@3x)  
            +--css/             <-- generated stysheet

    +--html/                    <-- HTML Mockups
        +--...

Upvotes: 2

Views: 180

Answers (1)

Jesus Lugo
Jesus Lugo

Reputation: 796

To make automatic compiling of SASS into CSS, the often choices are: use Compass or Grunt with libsass (which is node.js based), I would recommend to use that last one, you just need:

  • Install Grunt
  • Install libsass (you can also use the plugin grunt-contrib-sass )
  • Setup grunt config file for the project, here you say where you want each CSS file compiled into (check the libsass page above, there are configuration samples there).

When you're going to work on the project, just use the grunt config to watch files and that's it, edit your files and grunts does the compile (you can watch for errors in the console if needed).

Hope this can help you.

Upvotes: 1

Related Questions