jairogarcíarincón

Introducción a los pre-procesadores

42.3K
Introducción a los pre-procesadores
08/05/2024

Contenidos

  1. Introducción a los pre-procesadores
  2. Instalación
  3. Configuración
  4. Sintaxis y reglas
  5. Variables
  6. Operadores
  7. Tipos de datos
  8. Ejercicio 1
  9. Funciones
  10. Interpolado
  11. Ejercicio 2
  12. Reglas y directivas básicas
  13. Directivas de control y heredadas
  14. Ejercicio 3

Definición de pre-procesador

Con CSS es posible diseñar sitios web exactamente como el diseñador hubiera querido, pero a medida que los sitios se van complicando, empezamos a encontrar limitaciones al CSS puro, encontrándonos con hojas de estilo de miles de líneas realmente difíciles de mantener, modificar o refactorizar.

Un pre-procesador de CSS es un lenguaje de hoja de estilos, esto es, una extensión de CSS que nos permite añadir nuevas funcionalidades para hacer el trabajo de diseño y maquetación del sitio web mucho más sencillo.

Todos los navegadores actuales pueden trabajar con CSS puro sin problemas, pero no ocurre lo mismo con lenguajes de hoja de estilos, razón por la cual es necesario procesarlos antes de incorporarlos al sitio web.

Dicho de otro modo, el código del documento pre-procesado (SASS, SCSS, LESS) debe ser convertido a CSS puro antes de realizar el despliegue del sitio web.


SASS (Syntactically Awesome Style Sheet)

SASS es el más conocido de los pre-procesadores CSS, es de código abierto y está disponible bajo licencia MIT.

Toda la documentación relativa al lenguaje se puede encontrar en la dirección https://sass-lang.com.

El uso SASS o cualquier otro pre-procesador no es obligatorio, pero como hemos adelantado antes, nos provee de diferentes funcionalidades no incluidas en CSS puro y que harán más sencillo el diseño de nuestro sitio web, así como la reutilización de código en diferentes proyectos:

  • Variables
  • Funciones matemáticas
  • Bucles
  • Condicionales
  • Estructuras lógicas y de control
  • Mixins o plantillas
  • Indentaciones
  • Anidamientos
  • Herencias
  • Ficheros parciales
  • Etc.



SCSS (Sassy-CSS)

Como veremos más adelante, el uso de SASS requiere de un cambio en la forma de escribir nuestras hojas de estilo, ya que SASS es un lenguaje que trabaja mediante indentaciones y retornos de carro, en vez de utilizar llaves y puntos y comas.

Existe otra forma de utilizar SASS más orientada a la compatibilidad con el estándar CSS llamada SCSS, que evita dichas indentaciones y retornos de carro y las sustituye por el estándar CSS.

Podemos utilizar cualquiera de las dos, pero no podemos mezclarlas en el mismo proyecto, ya que los ficheros tendrán extensión *.sass o *.scss.


LESS (Leaner Style Sheets)

LESS es otra extensión de CSS escrita en Javascript en vez de en Ruby (o Dart en la actualidad) como SASS y SCSS.

Además posee algunas diferencias de sintaxis respecto a SCSS y en la forma de trabajar con las funciones lógicas.

LESS estaba soportado en Bootstrap 3, pero desde Bootstrap 4 el proyecto cambió a SASS.

Toda la documentación esta disponible en la página http://lesscss.org


Ejemplo de sintaxis en CSS puro

01-introduccion.css


Ejemplo de sintaxis en SASS

02-introduccion.sass


Ejemplo de sintaxis en SCSS

03-introduccion.scss


Ejemplo de sintaxis en LESS

04-introduccion.less


Fuentes

Publicado el 21 de Noviembre de 2024

csscss3sassscsslesspreprocesadores

Siguiente