1. Instalar NodeJS
  2. npm install -g node-sass Para instalar SASS
  3. node -v muestra la versión que tienes instalada de node
  4. node-sass --version Para ver la versión de sass que se instalo
  5. node-sass style.sass style.css Para compilar y crear el archivo CSS si es que no existia
    NOTE: Con esta linea de comandos puede crear cuantos archivos de CSS quieras. Ya hice la prueba con style0.css
  6. node-sass style.sass style.css -w Para que node este observando los cambios y compile en automático
  7. node-sass -o css sass/test.sass -w Para compilar y que te ponga el archivo de css que creara en la carpeta que le digas

    8. Nota importante

    Fijense 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.html
       css/style.css
       sass/
          sass/
             css/
             test.sass

    Y 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.

  8. No se usan {} ni ;
  9. Siempre se usa el tabulador en SASS, ejemplo:(ejemplo anidando html5, clases y pseudoselector Hover)
    article
       p
          a
             text-decoration: none
             color: orange
             &:hover
                color: pink
                font-size: 20px
  10. Si quieres escribir comentarios, hazlo en el archivo CSS, porque SASS no permite escribir comentarios
  11. Si un elemento usa los mismos estilos CSS, lo puedes separar así:
    header,
    main,
    aside,
    footer
        padding:20px
  12. Mixins: Técnicamente son funciones, antes eran muy usados para reutilizar código, como por ejemplo cuando los navegadores no soportaban algunas cosas de CSS, ejemplo:

    @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)
  13. Clases extendidas: Se utiliza para extender y reutilizar una clase como si fuera un objeto que hereda a sus hijos. Ejemplo:
    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
  14. Poner tipografías: Se pone de manera identica que en CSS pero sin {} y;

    @font-face
       font-family: 'Indie Flower'
       src: url('../fonts/IndieFlower-Regular.ttf')

    SASS 2021

  • npm init -y para configurar en automatico el archivo package.json
  • npm run sass para correr la tarea de sass configurando el package.json usando "sass": "sass --watch ./scss/style.scss ./css/style.css" dentro de scripts
  • sass --watch style.scss style.css para correr sass SIN package.json