tandavala/node-sass.md

## node-sass.md

      
    Raw
  

              node-sass.md
            
          
    node-sass

Sass é uma linguagem de script que é interpretada ou compilada em Cascading Style Sheets (CSS). e neste GIST estarei demonstrando como usar sass com node js.
Primeiro passo

Iniciar um projecto do zero com a framework express
mkdir node_sass
cd node_sass

npm init
Na raiz do diretorio vamos começar a instalar o express e o package node-sass.
    npm i express --save
vamos criar a estrutura do nosso projecto conforma demostro em baixo.
  node_sass/
    public/
        css/style.css
        index.html
    scss/
        _colors.scss
        index.scss
    index.js
    .
    .
agora que temos a estrutura do projecto, vamos programar o servidor.
const express = require("express");
const app = express();
const path = require("path");
const router = express.Router();

app.use(express.static(path.join(__dirname, "public")));

router.get("/", function(req, res) {
  res.sendFile(path.join(__dirname + "/index.html"));
});

// add the router
app.use("/", router);
app.listen(process.env.port || 3000);

console.log("running...");
testando o servidor node index.js
a agora que ja temos o nosso servidor, vamos criar a nossa pagina html no directorio public/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Hello Sass</title>
    <link rel="stylesheet" href="./css/style.css" />
  </head>
  <body>
    <h3>Hello World Sass</h3>
  </body>
</html>
temos tudo pronto para escrever código sass, mais antes vamos instalar o ultimo package.
 npm i node-sass -g --save-dev

tendo o nosso package instalado com sucesso, vamos abrir o ficheiro scss/_colors.scss e vamos escrever o seguinte codigo.
$clr-green: green;
$clr-white: #fff;
depois disso vamos novamente abriro ficheiro scss/index.scss e vamos escrever o seguinte codigo.
@import "_colors";

body {
  background: $clr-green;
  color: $clr-white;
}
ate aqui tudo este bem a unica coisa que falta e transpilar o codigo scss para css atraver do seguinte comanda no terminar.
node-sass --include-path sass scss/index.scss public/css/style.css

seguindo esta documentação teremos um projecto node js onde a estilização será feita usando o sass, para não ficar muito chato toda hora digitar o comanda
node-sass --include-path sass scss/index.scss public/css/style.css

podemos criar um alias para facilitar transpilar o nosso codigo.
 vim ~/.bashrc


o vim vai abrir o fecheiro ``.bashrc`, na depois da ultima linha vamos acrescentar o seguinte codigo.
alias makesass="node-sass --include-path sass scss/index.scss public/css/style.css"