Embed Size (px)
Citation preview
Preprocesadores CSSLESS / SASS
Meetups
@SergioCarracedoWeb developer at OPSOUPHP Developer, Drupal enthusiast
@SergioCarracedo
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>
CSS: Un poco de historia
Meetups
Y más…..<blink><marquee><bgsound><center><strike><dir> Directorio (<ul>)<isindex> Buscador (<form>)...
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
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
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 ordenadoReutilizaciónModularidad
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/RubyDos sabores: sass y scssDescarga: http://stylus-lang.com/Prueba online: http://stylus-lang.com/try.htmlNodejs
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
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)
Variables
Meetups
@primary-color: #f00;@secondary-color: #0f0;
a { color: @primary-color;}a:hover { color: @secondary-color;}
a { color: #f00;}a:hover { color: #0f0;}
Variables
Meetups
$primary-color: #f00;$secondary-color: #0f0;
a { color: $primary-color;}a:hover { color: $secondary-color;}
a { color: #f00;}a:hover { color: #0f0;}
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;}
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;}
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 );
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’) {…
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?
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);}
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
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
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;}
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;}
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”
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);}
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;}
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; }}
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; }}
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%;}
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");}
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;}
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
Meetups
@SergioCarracedoWeb developer at OPSOUPHP Developer, Drupal enthusiast
@SergioCarracedo
echo PHP_EOF;¿Preguntas?
