Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • node-sass css preprocessor for scss to css conversion

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 514
    Comment on it

    Sass stands for "Syntactically Awesome Style Sheets". It is compatible with all CSS versions available.

    If your CSS is getting complex, harder to maintain, here you can take the help of preprocessor.  Sass allows you to create variable, nesting, mixins, inheritance  and other good things that make your code awesome.

    Here, I am with the steps to compile and execute your stylesheets:

    1: Create a project, I name it sass.

    2. Initialize you project with some defaults:

    npm init

    Just leave all the asked fields blank.

    3. Installing sass compiler:

    npm install -D node-sass nodemon

    The above will install the compiler.

    You can use either node compiler or ruby as per your requirement. I am using node-sass for the simplicity of this tutorial.

    4. Make an entry for the source/ destination scss and CSS files in the package.js script section, as follows:-

    {
      "name": "sass",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build-css": "node-sass --include-path scss scss/main.scss   /css/main.css"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "node-sass": "^3.8.0",
        "nodemon": "^1.9.2"
      }
    }

    Above, I have mentioned that the CSS code in scss directory and final CSS code is in CSS directory.

    So, create two directories in parallel of package.json: 1. scss and 2. CSS

    5. Create a simple scss file in scss directory, as follows:-
     

    $backgroundColor: #bada55;
    
    body {
      margin: 0;
      background-color: $backgroundColor;
    }

    6. Compiling the .scss:

    npm run build-css

    7. It will finally generate css and place the file in css directory, the final css code will look like this:

    body {
      margin: 0;
      background-color: #bada55; }

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: