Home | Clases | Sass y SCSS | Introducción a los pre-procesadores

Introducción a los pre-procesadores


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


html {
background-color: #CCC;
}

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

nav ul {
margin: 0;
padding: 0;
list-style: none;
color: #FFF;
}

nav li {
display: inline-block;
}

nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
color: #000;
}



Ejemplo de sintaxis en SASS


$fuente: Helvetica, sans-serif
$color: #F00
$color_menu: #FFF
$color_enlaces: #000
$fondo: #CCC

html
background-color: $fondo


body
font: 100% $fuente
color: $color

nav
ul
margin: 0
padding: 0
list-style: none
color: $color_menu

li
display: inline-block

a
display: block
padding: 6px 12px
text-decoration: none
color: $color_enlaces



Ejemplo de sintaxis en SCSS


$fuente: Helvetica, sans-serif;
$color: #F00;
$color_menu: #FFF;
$color_enlaces: #000;
$fondo: #CCC;

html{
background-color: $fondo;
}

body{
font: 100% $fuente;
color: $color;
}

nav{
ul{
margin: 0;
padding: 0;
list-style: none;
color: $color_menu;
}

li{
display: inline-block;
}

a{
display: block;
padding: 6px 12px;
text-decoration: none;
color: $color_enlaces;
}
}



Ejemplo de sintaxis en LESS


@fuente: Helvetica, sans-serif;
@color: #F00;
@color_menu: #FFF;
@color_enlaces: #000;
@fondo: #CCC;

html{
background-color: @fondo;
}

body{
font: 100% @fuente;
color: @color;
}

nav{
ul{
margin: 0;
padding: 0;
list-style: none;
color: @color_menu;
}

li{
display: inline-block;
}

a{
display: block;
padding: 6px 12px;
text-decoration: none;
color: @color_enlaces;
}
}



Fuentes


Fecha de publicación: 15/04/2019
Asignaturas: aplicaciones webdiseño de interfaces web
Temas: css css3 sass scss less preprocesadores
Utilizamos cookies propias y de terceros para mejorar su experiencia en la navegación. Al seguir navegando entendemos que acepta su uso.
Si lo desea, consulte nuestras políticas de privacidad y cookies
ENTENDIDO
[X] Cerrar

Contacta conmigo


[X] Cerrar

Acceso alumnos