Primeros pasos con Less y Sass

¿Qué es Less y Sass?

Son los preprocesadores mas populares y eficientes para CSS y te permite escribir código CSS de una manera mas limpia, ágil y eficiente y extiende capacidades como agregar funciones de programación a CSS. Y sacar ventajas para aumentar la productividad en proyectos reales.

Una sintaxis mas limpia y legible, mecanismos de variables, funciones para cadenas o números, también múltiples formas de selectores.

¿Qué son los Preprocesadores CSS?

En general es un programa que procesa un tipo de lenguaje con funciones de programación para generar un fichero CSS convencional.

Extienden las funcionalidades de CSS y nos permite darle un mantenimiento cuando escala el proyecto poder agilizar nuestros tiempos y costos.

Los mas Populares:

  • LESS
  • Sass
  • Stylus

Características:

  • El lenguaje que emplean y su sintaxis es diferente para cada uno.
  • Se combinan y mimetizan con el lenguaje CSS.
  • Tienen como principal objetivo ampliar las capacidades de las hojas de estilo en cascada y reducir sus limitaciones.
  • Genera el código CSS 100% compatible con los navegadores, agregando sus prefijos.

Beneficios de Preprocesadores CSS

  • Sintaxis mas limpia apara selectores compuestos.
  • Mas funcionalidades.
  • Mejor gestión de ficheros
  • Reutilización de código.
  • Flexibilidad y mantenimiento.

Sass VS Less

Sintaxis general

Sass aporta bastantes ventajas, como la capacidad de gestionar de manera limpia y consistente estructuras condicionales, bucles, iteraciones mixins, etc.

Anidamiento

Los dos gestionan este aspecto, pero Sass da un paso mas allá con la capacidad anidar propiedades compuestas. Ejem. la propiedad font.

.miEstilo {
    font: {
        family: 'Courier';
        size: 24px;
        weight: bold;
    }
}

Variables y tipos de datos:

  • Sass aporta “list” y “map”, con capacidad de gestión avanzada a través de funciones predefinidas, @each.
  • LESS permite albergar reglas y selectores como un tipo de variables.
  • LESS permite variables de variables.
  • LESS dispone de alguna opción de interpolación adicional.

Funciones predefinidas.

Ambos lenguajes tienen un set de funciones predefinidas muy valido para trabajar con los deferentes tipos de datos.

Instalación de Grunt

Grunt ofrece muchas cosas que trabaja bajo la plataforma Node.js, pues maneja gestor de tareas, minificación, compilación y pruebas unitarias.

Para instalar tenemos que tener previamente instalado Node.JS y NPM (Manejador de módulos de paquetes).

Comandos para instalar Grunt.

npm install -g grunt-cli

1 comentario

Thanks pertaining to sharing this kind of wonderful subject matter on your site. I noticed it on the search engines. I will check back again whenever you post extra aricles. We love Google 🙂

Deja una respuesta