CURSO DE SASS

PROGRAMAS A UTILIZAR
  1. Visual Studio Code Es un editor de codigo fuente desarrollado por Microsoft. Utilizaremos este programa por que es más ligero y tiene mas opciones a diferencia de otros
EXTENSIONES
                                
                                    Live Sass Compiler

                                    //CONFIGURACION
                                    "liveSassCompile.settings.formats": [
                                        {
                                            "format": "compact",//expanded - compressed
                                            "extensionName": ".css",
                                            "savePath": "/css"     //"savePath": "/css" // /public/archivos/principal/css  ----/public/principal/css
                                        }
                                    ],
REQUISITOS BÁSICOS
CONCEPTOS BÁSICOS
SASS (Syntactically Awesome Stylesheets => Hojas de estilo sintácticamente impresionantes).
Es un preprocesador de CSS que añade nuevas funcionalidades al lenguaje CSS (variables, funciones, condicionales…).
OJO: SASS PUEDE IMPLEMENTAR ALGUNAS FUNCIONALIDADES DE UN LENGUAJE DE PROGRAMACION; PERO NO ES UN LENGUAJE DE PROGRAMACION 
                        
                            sass --watch sass:css
FORMA ANIDADA
                                
                                    /* css */
                                    div {
                                        background: red;
                                    }
                                    div a {
                                        color: blue;
                                    }


                                    /* sass */
                                    div {
                                        background: red;
                                        a {
                                          color: blue;
                                        }
                                    }
VARIABLES
                                
                                    $fondo: rgb(12, 68, 94);

                                    /* ejemplo */
                                    body {
                                        background: $fondo;
                                    }
ORGANIZACION
                                
                                    /* 
                                    para cada frame de una pagina se crean distintos archivos. ejem:
                                    _header.scss
                                    */
                                    @import "componentes/colores";
                                    @import "componentes/header";
                                    @import "componentes/section";
                                    @import "componentes/footer";
                                    @import "componentes/mixin";
MIXIN
                                
                                    @mixin cuadrado($fondo, $ancho:200px) {
                                        width: $ancho;
                                        height: 200px;
                                        background: $fondo;
                                        margin: 20px;
                                    }
                                    .dos {
                                        @include cuadrado(blue,200px);
                                    }