Las cookies nos permiten ofrecer nuestros servicios. Al utilizar nuestros servicios, aceptas el uso que hacemos de las cookies. Más Información. Aceptar

Qué es Sass: ventajas, desventajas y ejemplos de desarrollo

Juan Diego Pérez Jiménez
  • Escrito por Juan Diego Pérez Jiménez el 20 de Noviembre de 2019
  • 1 min de lectura | Desarrollo Web
Qué es Sass: ventajas, desventajas y ejemplos de desarrollo
El reproductor de video será cargado en breves instantes.

Qué es Sass

Sass es un procesador CSS.

Un preprocesador CSS es una herramienta que nos permite generar, de manera automática, hojas de estilo, añadiéndoles características que no tiene CSS, y que son propias de los lenguajes de programación, como pueden ser variables, funciones, selectores anidados, herencia, etcétera.

Estas características de los procesadores nos permiten, además, que el CSS que se genera sea más fácil de mantener y más reutilizable.

Ventajas de utilizar Sass

El uso de una herramienta como Sass proporciona una serie de ventajas, como son las siguientes:

  • Reduce el tiempo para crear y mantener el CSS.

  • Permite tener una organización modular de los estilos, lo cual es vital para proyectos grandes.

  • Proporciona estructuras avanzadas propias de los lenguajes de programación, como variables, listas, funciones y estructuras de control.

  • Permite generar distintos tipos de salida, comprimida, normal o minimizada, trabajando tanto en desarrollo como en producción, además se hace una forma muy fácil.

  • Permite vigilar los ficheros, de tal manera que, si ha habido un cambio en la hoja de estilos, se regenera automáticamente (modo watch).

  • Tiene muy pocas dependencias, sobre todo la nueva versión, que es dart-sass. En las anteriores versiones se dependía de muchas librerías de Ruby y era un poco engorroso de instalar, pero con la nueva versión, la instalación es muy fácil.

  • Existen muchas herramientas asociadas, muchas librerías hechas con Sass y una comunidad muy importante de usuarios.

Desventajas de utilizar Sass

Como todo, Sass tiene algunas desventajas, que son extensibles a cualquier otro preprocesador que se utilice:

  • Hay que aprender a utilizar una nueva herramienta, lo que para algunos supone una desventaja.

  • Hay un tiempo de consumo en el proceso de generación o compilación del CSS, sobre todo si es el archivo SCSS es muy grande. No es mucho tiempo, pero sí que existe esa pequeña demora.

  • Tiene una sintaxis más compleja que CSS.

Ejemplo de uso de Sass

A continuación, veremos un pequeño ejemplo de Sass, dónde podemos ver los elementos básicos de este preprocesador CSS, como estructuras repetitivas, variables, funciones o parámetros:

.row {
        @include flex_mixin:
}
    /// Número de elementos máximos que voy a tener a lo ancho del layout
    /// @group layout
    $num_elementos: 8;

    ///Función que devuelve la anchura correspondiente al elemento
    @function anchura_col($i) {
        @return (100 / $num_elementos)*$i ;
        }

    ///Bucle para generar las clases para tamaños medios
    @for $i from 1 through $num_elementos {
        .row > .col#{$i} {
            width: #{anchura_col($i)} + “%”;
        }
    }

Podemos ver que hay muchos elementos, pero tienen una sintaxis muy similar a CSS, añadiendo potencialidades de lenguaje de programación.

Una vez que ejecutamos nuestro fichero SCSS, se generaría un fichero CSS de salida de forma automática.

Relacionado

Te dejamos una selección de cursos, carreras y artículos

Curso de Sass

Curso de Sass

curso

Con este curso aprenderás:

  • ✓ Conocerás toda la potencialidad de un preprocesador CSS como Sass
  • ✓ Practicarás muchas de las posibilidades de Sass mediante la ejecución de casos prácticos propuestos.
  • ✓ Usarás la herramienta Gulp para, junto con Sass, desarrollar un workflow para el desarrollo FrontEnd

Duración: 4 horas y 17 minutos

Estas son algunas de las empresas que ya confían en OpenWebinars

Profesores y profesionales

Nuestros docentes son profesionales que trabajan día a día en la materia que imparten

Conviértete en profesor de OpenWebinars