npm install -g node-sass
Para instalar SASS
node -v
muestra la versión que tienes instalada de node
node-sass --version
Para ver la versión de sass que se instalo
node-sass style.sass style.css
Para compilar y crear el archivo CSS si es que no existia node-sass style.sass style.css -w
Para que node este observando los cambios y compile en automáticonode-sass -o css sass/test.sass -w
Para compilar y que te ponga el archivo de css que creara en la carpeta que le digasFijense bien el nombre de las carpetas que están dentro de otras carpetas, porque de lo contrario, te creara muchos archivos css en todas las carpetas que se llamen igual.
Ejemplo:
tengo las siguientes carpetas y archivos:
index.htmlY si tu en la terminal de Node te posicionas donde está el archivo index.html , y pones el comando node-sass -o css sass/sass/test.sass
Te creara el archivo test.css en la primera y última carpeta css, osea que lo tendras en ambas.
article
p
a
text-decoration: none
color: orange
&:hover
color: pink
font-size: 20px
header,
main,
aside,
footer
padding:20px
@mixin colores($fondo, $articulo)
body
background: $fondo
.articulo
background: $articulo
@include colores(#ff8000,#fff)
Otro ejemplo:
@mixin borde-redondeado($pixels)
border-radius: $pixeles
-moz-border-radius: $pixeles
-wekit-border-radius: $pixeles
-ms-border-radius: $pixeles
-o-border-radius: $pixeles
article
borde-redondeado($px)
footer
borde-redondeado(15px)
body
background: #f2f2f2
font-family: Arial, Sans-serif
.boton
display: inline-block
padding: 15px 20px
background: none
color: #fff
text-decoration: none
margin-right: 20px
.btn-rojo
@extend .boton
background: #ff2732
.btn-azul
@extend .boton
background: #246eb9
.btn-verde
@extend .boton
background: #4fb56
@font-face
font-family: 'Indie Flower'
src: url('../fonts/IndieFlower-Regular.ttf')
npm init -y
para configurar en automatico el archivo package.jsonnpm run sass
para correr la tarea de sass configurando el package.json usando "sass": "sass --watch ./scss/style.scss ./css/style.css"
dentro de scriptssass --watch style.scss style.css
para correr sass SIN package.json