Presentación realizada por Sergio Carracedo explicando el uso de ventajas de los preprocesadores CSS

2. Preprocesadores
CSS
LESS / SASS

3. Meetups
@SergioCarracedoWeb developer at OPSOU
PHP Developer, Drupal enthusiast
@SergioCarracedo

4. CSS: Un poco de historia
Meetups
Las hojas de estilo nacen alrededor de 1970 para dar estilo a
documentos SGML (Standard Generalized Markup Language).
Hoja de estilo != CSS
Primera recomendación W3C de CSS Nivel 1 en 1996.
Antes de CSS teníamos que usar etiquetas de presentación
<b> Bold != <strong>
<i> Italic != <em>
<font>

5. CSS: Un poco de historia
Meetups
Y más…..
<blink>
<marquee>
<bgsound>
<center>
<strike>
<dir> Directorio (<ul>)
<isindex> Buscador (<form>)
...

6. CSS: ¿Qué es?
Meetups
Y llegó el CSS: Cascading Stylesheets (Hojas de estilo en
cascada)
● Permiten definir la presentación de un documento de
marcado (HTML, XML,...).
● Separan el documento de su presentación permitiendo
el nacimiento de la web semántica

7. CSS: Limitaciones
Meetups
● Nos obliga a repetir muchos de los selectores
● Tenemos que hardcodear los valores de colores,
tipografías, etc..
(Existen las variables en CSS, pero IE/Edge
http://caniuse.com/#feat=css-variables
● Repetitivo para maquetaciones similares.
Por ejemplo hacer un degradado de 2 colores, el CSS sería el mismo
solo cambiando los dos colores.
Reutilización de definiciones con variaciones

8. Preprocesadores CSS
Meetups
¿Que son?
Una herramienta que nos permite escribir pseudocódigo
CSS que incluye variables, condicionales, bucles y
funciones que son convertidas finalmente en CSS “real”
¿Ventajas?
Escribir CSS más limpio y ordenado
Reutilización
Modularidad

9. Preprocesadores CSS
Meetups
Descarga: http://lesscss.org/
Prueba online: http://less2css.org/
Nodejs (alternativamente en PHP)
Descarga: http://sass-lang.com/
Prueba online: http://www.sassmeister.com/
Ruby
Dos sabores: sass y scss
Descarga: http://stylus-lang.com/
Prueba online: http://stylus-lang.com/try.html
Nodejs

10. Instalación y uso
Meetups
$ npm install -g lessc
$ lessc --clean-css styles.less styles.css
$ npm install -g watch-lessc
$ sudo gem install sass
$ sass --watch folder:css
También puede transpilar los archivos .less directamente en el navegador usando una libreria js o
usando librerias PHP: https://github.com/oyejorge/less.php
Muchos de los IDEs de desarrollo (p.e. PHPStorm) se encargan de transpilar
los archivos LESS y SASS de forma transparente

11. Sintaxis
Meetups
a {
color: #ff0;
text-decoration: none;
}
a
color: #ff0
text-decoration: none
La sintaxis básica de LESS y SASS es muy similar al CSS convencional.
Esta sintaxis permite obviar las llaves y puntos y comas. (sintaxis SASS)
Admite también una sintaxis con llaves (Sintaxis SCSS)

12. Variables
Meetups
@primary-color: #f00;
@secondary-color: #0f0;
a {
color: @primary-color;
}
a:hover {
color: @secondary-color;
}
a {
color: #f00;
}
a:hover {
color: #0f0;
}

13. Variables
Meetups
$primary-color: #f00;
$secondary-color: #0f0;
a {
color: $primary-color;
}
a:hover {
color: $secondary-color;
}
a {
color: #f00;
}
a:hover {
color: #0f0;
}

14. Anidación
Meetups
@primary-color: #f00;
@secondary-color: #0f0;
header {
a {
color: @primary-color;
&:hover {
color: @secondary-color;
}
}
}
header a {
color: #f00;
}
header a:hover {
color: #0f0;
}

15. Anidación
Meetups
$primary-color: #f00;
$secondary-color: #0f0;
header {
a {
color: $primary-color;
&:hover {
color: $secondary-color;
}
}
}
header a {
color: #f00;
}
header a:hover {
color: #0f0;
}

16. Mixins
Meetups
Los “mixins” son algo similar a una función, nos permite reutilizar definiciones de CSS admitiendo
variables que varíen el resultado.
Ejemplo: Hacer un degradado de dos colores en CSS3
background: #ff0000;
background: -moz-linear-gradient(top, #ff0000 0%, #00ff00 100%);
background: -webkit-linear-gradient(top, #ff0000 0%,#00ff00 100%);
background: linear-gradient(to bottom, #ff0000 0%,#00ff00 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000',
endColorstr='#00ff00',GradientType=0 );

17. Mixins
Meetups
● Solo sirve para los colores preestablecidos
● Si hay que hacer un cambio en la forma de generarlo hay que hacerlo en todos los lugares
donde se use a lo largo las hojas de estilo
¿Y si pudiésemos hacer algo como una función?
function gradient($startColor = ‘#f00’, $endColor = ‘#0f0’) {
…

18. Mixins
Meetups
.gradient(@start: #f00, @stop: #0f0 ) {
background: @start;
background: -moz-linear-gradient(top, @start 0%, @stop 100%);
background: -webkit-linear-gradient(top, @start 0%,@stop 100%);
background: linear-gradient(to bottom, @start 0%,@stop 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=@start,
endColorstr=@stop,GradientType=0 );
}
header {
.gradient();
}
body {
.gradient(#aaa, #bbb);
}
¿Como se usa?

19. Mixins
Meetups
@mixin gradient($start: #f00, $stop: #0f0 ) {
background: $start;
background: -moz-linear-gradient(top, $start 0%, $stop 100%);
background: -webkit-linear-gradient(top, $start 0%, $stop 100%);
background: linear-gradient(to bottom, $start 0%, $stop 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=$start,
endColorstr=$stop,GradientType=0 );
}
header {
@include gradient();
}
body {
@include gradient(#aaa, #bbb);
}

20. Mixins
Meetups
Los “mixins” son una funcionalidad muy potente que nos ahorra escribir mucho código y que
además este sea más sencillo de mantener.
Hay multitud de repositorios de Mixins:
Ejemplos:
● http://lesselements.com/
Mixins para los elementos más típicos usados, degradados, sombras, columnas, transiciones, etc
● https://daneden.github.io/animate.css/
Mixins de animación

21. Herencia
Meetups
En CSS clásico si necesitamos aplicar el mismo estilo a varios elementos lo hacemos agrupandolos
en la definición;
a, p, em, ol {
font-size: 1rem;
}
Podemos complicarlo más en CSS, pero acabaremos con una hoja de estilos bastante difícil de leer.
Tanto en LESS como en SASS podemos traer los estilos usados en otro elemento al nuestro de
forma sencilla

22. Herencia
Meetups
@text-color: #333;
.text {
color: @text-color;
font-size: 18px;
line-height: 1.2em;
margin-bottom: 30px;
}
h2 {
.text;
font-size: 30px;
margin-bottom: 40px;
}
.text {
color: #333;
font-size: 18px;
line-height: 1.2em;
margin-bottom: 30px;
}
h2 {
color: #333;
font-size: 18px;
line-height: 1.2em;
margin-bottom: 30px;
font-size: 30px;
margin-bottom: 40px;
}

23. Herencia
Meetups
$text-color: #333;
.text {
color: $text-color;
font-size: 18px;
line-height: 1.2em;
margin-bottom: 30px;
}
h2 {
@extend .text;
font-size: 30px;
margin-bottom: 40px;
}
.text, h2 {
color: #333;
font-size: 18px;
line-height: 1.2em;
margin-bottom: 30px;
}
h2 {
font-size: 30px;
margin-bottom: 40px;
}

24. Importación
Meetups
En entornos de producción lo óptimo es que todo el CSS se agrupe en un solo fichero, pero a nivel
de desarrollo es casi imprescindible trabajar con “trozos” de CSS para facilitar el mantenimiento.
Algunos CMS se encargan de unir estos trozos por nosotros.
LESS y SASS también lo pueden hacer, aportando la ventaja de que no se limitan solo a unir, si no
que interpretan. Por ejemplo podríamos tener los “mixins” en una archivo a incluir en el resto.
La forma de realizar la importación es idéntica para LESS y SASS
@import “reset.css”
@import “mixins.less”

25. Manejo de colores
Meetups
Tanto LESS como SASS aportan funciones propias para simplificar el manejo de colores: Oscurecer
un color, Aclararlo, Saturarlo, crear transparencias, mezclarlo...
@color: #f90;
a {
color: lighten(@color, 20%);
color: darken(@color, 20%);
color: saturate(@color, 20%);
color: desaturate(@color, 20%);
color: mix(@color, #0f0);
color: fade(@color, 20%);
}
a {
color: #ffc266;
color: #995c00;
color: #ff9900;
color: #e69419;
color: #80cc00;
color: rgba(255, 153, 0, 0.2);
}

26. Operaciones
Meetups
Podemos realizar operaciones matemáticas tanto en LESS como SASS
@fontsize: 14px;
body {
margin: (@fontsize/2);
top: @fontsize + 50px + 100px;
right: 100px - 50px;
left: 10 * 10;
}
body {
margin: 7px;
top: 164px;
right: 50px;
left: 100;
}

27. Media queries
Meetups
LESS y SASS con ayudan a simplificar la legibilidad del CSS permitiendo usar media queries “en
medio de una clase”
@xs-width: 767px;
.col {
width: 50%;
float: left;
padding: 10px;
@media (max-width: @xs-width) {
width: 100%;
float: none;
}
}
.col {
width: 50%;
float: left;
padding: 10px;
}
@media (max-width: 767px) {
.col {
width: 100%;
float: none;
}
}

28. Media queries
Meetups
$xs-width: 767px;
.col {
width: 50%;
float: left;
padding: 10px;
@media (max-width: $xs-width) {
width: 100%;
float: none;
}
}
.col {
width: 50%;
float: left;
padding: 10px;
}
@media (max-width: 767px) {
.col {
width: 100%;
float: none;
}
}

29. Loops y estructuras de control
Meetups
LESS y SASS disponen de estructuras de loop y control, pero SASS aquí gana por goleada
.generate-columns(4);
.generate-columns(@n, @i: 1) when (@i
=< @n) {
.column-@{i} {
width: (@i * 100% / @n);
}
.generate-columns(@n, (@i + 1));
}
.column-1 {
width: 25%;
}
.column-2 {
width: 50%;
}
.column-3 {
width: 75%;
}
.column-4 {
width: 100%;
}

30. Loops y estructuras de control
Meetups
@for $i from 1 through 4 {
.column-#{$i} { width: ($i * 100% / 4)}
}
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
@if null { border: 3px double; }
}
@each $animal in puma, sea-slug, egret,
salamander {
.#{$animal}-icon {
background-image:
url('/images/#{$animal}.png');
}
}
.puma-icon {
background-image: url("/images/puma.png");
}
.sea-slug-icon {
background-image: url("/images/sea-
slug.png");
}
.egret-icon {
background-image: url("/images/egret.png");
}
.salamander-icon {
background-image:
url("/images/salamander.png");
}

31. Loops y estructuras de control
Meetups
@each $header, $size in (h1: 2em, h2: 1.5em,
h3: 1.2em) {
#{$header} {
font-size: $size;
}
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.2em;
}

32. Conclusiones
Meetups
● En mi opinión si no estás usando un preprocesador de CSS deberías hacerlo
● Solo le veo ventajas, el único inconveniente es que necesitas un transpilador
● El cambio de LESS a SASS y viceversa es relativamente sencillo
● SASS genera generalmente un código más limpio
● Bootstrap 3 => LESS, Bootstrap 4 => SASS

33. Meetups
@SergioCarracedoWeb developer at OPSOU
PHP Developer, Drupal enthusiast
@SergioCarracedo
echo PHP_EOF;
¿Preguntas?