@emtecinc/sass-render

sass-render

An utility for converting sass files to css, with batch file processing, output template file support, watch mode and other useful attributes

Installation

// with npm
npm install @emtecinc/sass-render

// with yarn
yarn add @emtecinc/sass-render

Usage

sass-render takes in following arguments

1. -s or --source

   This is a mandatory argument.

   The argument takes in a GLOB which represents a source directory containing sass/scss file that need to be converted into css.

   Ex. Consider there is a directory named components within the directory containing package.json, which has sass files that need to be processed.

   Follow the steps below to process the sass files:

   Install sass-render locally as shown above.

   Add below line to scripts in package.json. You can choose any script name. I have chosen render-sass for this example.

   //Since the below command will be used as a npm script, the quotes need to escaped so using \ before "
   
   "scripts": {
       "render-sass":" sass-render -s \"components/**/scss/*.scss\" "
   }
   

   OR

   "scripts": {
       "render-sass":" sass-render --source \"components/**/scss/*.scss\" "
   }
   

2. -t or --template

   This is an optional argument.

   It is a very useful argument, which can be used to inject the converted sass output into a template, to transform the final output.

   This attribute takes in the path of a template.

   Ex. Assume I have below template stored in a file named my-template.template in the same directory as package.json

   This a sample template.
   
   The output will be substituted here <% content %>
   
   

   The <% content %> tag defines the placeholder. By default utility will look out for this place holder in the template.

   Add the attribute -t or --template as shown below, to use the template file.

     "scripts": {
         "render-sass":" sass-render -s \"components/**/scss/*.scss\" -t \"my-template.template\" "
     }
   

   OR

    "scripts": {
         "render-sass":" sass-render --source \"components/**/scss/*.scss\" --useTemplate \"my-template.template\" "
     }
   

   If you want to use anything other than content, it can be controlled using -l or --delimiter.

   Ex. If I need to change the default content place holder to say raw.

     "scripts": {
         "render-sass":" sass-render -s \"components/**/scss/*.scss\" -t \"my-template.template\" -l \"raw\" "
     }
   

   OR

    "scripts": {
         "render-sass":" sass-render --source \"components/**/scss/*.scss\" --template \"my-template.template\" --delimiter \"raw\" "
     }
   

   By default the extension of the output file is .css. If you want to change it, the -e or --extension attribute can be used.

   Ex. If you want the extension to be js, simply set -e or --extension to js as shown below.

     "scripts": {
         "render-sass":" sass-render -s \"components/**/scss/*.scss\" -t \"my-template.template\" -l \"raw\" -e \"js\" "
     }
   

   OR

    "scripts": {
         "render-sass":" sass-render --source \"components/**/scss/*.scss\" --template \"my-template.template\" --delimiter \"raw\" --extension \"js\" "
     }
   

3. -o or --output

   This is an optional argument.

   By default the output files are written to the same folder where the source scss file is.

   We can define the folder where it will be written by passing in the output folder using -o or --output attribute.

   Ex. If we need the files to be written to css directory, pass it as attribute as shown below.

   "scripts": {
       "render-sass":" sass-render -s \"components/**/scss/*.scss\" -o \"css\" "
   }
   

   OR

   "scripts": {
       "render-sass":" sass-render --source \"components/**/scss/*.scss\" --output \"css\" "
   }
   

4. -r or --computeRelativePath

   This is an optional argument.

   We can compute the relative path of output directory with respect to source file path, with help of this attribute.

   Ex. If we need to go one folder up in the file tree with respect to source scss file, we can set this attribute and folder control operator ../ as shown below.

   "scripts": {
       "render-sass":" sass-render -r -s \"components/**/scss/*.scss\" -o \"../css\" "
   }
   

   OR

   "scripts": {
       "render-sass":" sass-render --computeRelativePath --source \"components/**/scss/*.scss\" --output \"../css\" "
   }
   

5. -p or --persistParentDirectory

   This is an optional argument.

   We can persist the parent directory structure of the source scss file being processed.

   Ex. If the source file are in src folder and you want to go one folder up and write the files to ../output/src folder, use the -p or --persistParentDirectory attribute as shown below. Since the source files are in src folder, -p attribute will help preserve it and -r attribute will help to do relative path calculation as shown in previous example.

   "scripts": {
       "render-sass":" sass-render -r -p -s \"components/**/scss/*.scss\" -o \"../output\" "
   }
   

   OR

   "scripts": {
       "render-sass":" sass-render --computeRelativePath --persistParentDirectory --source \"components/**/scss/*.scss\" --output \"../css\" "
   }
   

6. -w or --watch

   This is an optional argument.

   If you want to watch out for source scss file changes, use this attribute.

   "scripts": {
      "render-sass":" sass-render -w -s \"components/**/scss/*.scss\" -o \"css\" "
   }
   

   OR

   "scripts": {
       "render-sass":" sass-render --watch --source \"components/**/scss/*.scss\" --output \"css\" "
   }
   

License

This project is licensed under the terms of the GPL3 license.