Un vistazo a Sass

Se conoce que CSS es una tecnología que permite mejorar la presentación del html de las páginas web, pero en algunas ocasiones se puede presentar repeticiones del código en diferentes hojas de estilos, haciendo que sean cada vez más grandes, más complejas y más difíciles de mantener. Para dar una solución a estos problemas se utiliza los procesadores de estilos.

Estos procesadores dan la posibilidad de agregar funcionalidad al código permitiendo usar características que no existen en CSS, como variables, anidamiento, mixins, herencia y otras cosas ingeniosas

Una vez realizado el código con Sass, es procesado el archivo .scss y luego es guardado como un archivo css normal que se puede usar en el sitio web.

Características

Archivos Parciales

Se puede crear archivos Sass parciales que contengan pequeños fragmentos de código. Esta es una excelente forma para poder modular los estilos que se van a utilizar y ayudar a mantener un orden más entendible.

Un archivo parcial es simplemente un archivo Sass nombrado con un guión bajo al principio, un ejemplo es _partial.scss. El subrayado le permite a Sass saber que el archivo es parcial y que no se debe generar un archivo Css. Los parciales de Sass se utilizan con la @import directiva.

@import

Esta característica sirve para llamar  los archivos Sass o Css que contienen partes de código y unirlos en otro archivo en donde se realiza el llamado, se utiliza @import seguido del nombre del archivo que se desea llamar.

Sass tomará el archivo que desea importar y lo combinará con el archivo que está importando para que pueda enviar un solo archivo CSS al navegador web

Nesting

Con nesting nos permite evitar escribir el típico código css así:

    
.div {}
.div a {}
.div a:hover {}
    

En sass nos ayuda en simplificar el llamado de las clases que se van a utilizar usando el nesting o anidación. Haciendo más comprensible la jerarquía del código css

    
    .div {
        a {
            &:hover {
                
            }
        }
    }
    

Se utiliza el símbolo “&” que referencia al elemento padre de la etiqueta. En sass nos ayuda en simplificar el llamado de las clases que se van a utilizar usando el nesting o anidación. Haciendo más comprensible la jerarquía del código css

Variables

Son valores que se pueden reutilizar  desde un solo sitio de forma sencilla y centralizada.

Ejemplo:

Sass

    
    $font-stack: Helvetica, sans-serif;
    $primary-color: #333333;

    body {
        font: 100% $font-stack;    
        color: $primary-color;
    }
    

CSS

    
    body {
        font: 100% Helvetica, sans-serif;    
        color: #333333;
    }
    

Operadores

En Sass y en Css también se puede utilizar operadores matemáticos como  +, -, *, /, y %; para realizar respectivos cálculos matemáticos y calcular por ejemplo los anchos de un div y nav

Mixins

Es un elemento esencial ya que permite aprovechar una parte del código al que podemos llamar repetidamente y que encapsula en una o más líneas de código.

Ejemplo

Sass

    
    @mixin circle($width) {
        width: $width;
        height: $width;
        border-radius: 100%;
        background:black;
    }

    div{
        @include circle(100px);
    }
    

CSS

    
    div {
        width: 100px;
        height: 100px;
        border-radius: 100%;
        background: black;
    }

    

Son muy útiles cuando se trabaja con CSS3. Cada navegador tiene un prefijo para que funcione el código css escrito ( -webkit, -moz, -ms , etc…), con un mixin se coloca todos los prefijos y después se llama el mixim colocando como parámetro el valor personalizado que queremos utilizar.  Es recomendable crear una biblioteca propia de mixims de los que se utiliza frecuentemente

Extend/ Herencia

En algunas ocasiones es necesario aprovechar una clase o modificarla ligeramente. Con sass permite reutilizar el código anterior y añadir algún nuevo elemento si así lo deseamos 

Sass

    
    .bg-special {
        background: #3e3e3d;
        width: 100px;
        height: 100px;
        padding: 10px;
    }

    div {
        @extend .bg-special;
        color: azure;
        font-family: 'Nunito', sans-serif;
    }
    

CSS

    
    .bg-special,
    div {
        background: #3e3e3d;
        width: 100px;
        height: 100px;
        padding: 10px;
    }

    div {
        color: azure;
        font-family: 'Nunito', sans-serif;
    }
    

Sass interpreta el extend en añadir a la nueva etiqueta la anterior, haciendo que se ahorre mas lineas de código. Es como si estuviéramos tratando de un lenguaje orientado a objetos pero usando CSS. Un ejemplo del uso es cuando se tienen unos botones en los que según el estado varía el color, en esta oportunidad es bueno utilizarlo. Todos son iguales, por lo que heredan las propiedades que les hacen únicos y se añade la que le hace especial.

Funciones

En Sass también se puede realizar funciones con las posibilidades dinámicas, si solo necesitamos hacer cálculos matemáticos podemos crearnos funciones ad hoc para llamarlas a la hora de compilar

Sass

    
    @function ratio($val, $val2){
        @return $val + $val2
    }