Desarrollo Frontend

Preprocesadores

Miguel Cantillana F

<miguel@ewok.cl>

Pre Procesadores CSS

¿Por que?

  • CSS es repetitivo.
  • CSS no tiene variables.
  • Es Inflexible, y complicado de reusar.
  • Sitios web complejos se vuelven complicados de mantener.

Sass

Syntactically Awesome StyleSheets

  • 100% compatible con CSS3.
  • Permite el uso de variables, anidamiento de estilos y mixins.
  • Permite el uso de elementos básicos de programación.
  • Genera archivos CSS bien formateados y permite configurar su formato.

Compiladores

Uso de Sass

Anidación

#main p {
  color: #00ff00;
  width: 97%;
 
  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

Produce:

Sass

#main p {
  color: #00ff00;
  width: 97%;
}
#main p .redbox {
    background-color: #ff0000;
    color: #000000;
}

Anidación

#main {
  width: 97%;
 
  p, div {
    font-size: 2em;
    a { font-weight: bold; }
  }
 
  pre { font-size: 3em; }
}

Produce:

Sass

#main {
  width: 97%;
}
#main p, #main div {
  font-size: 2em;
}
#main p a, #main div a {
  font-weight: bold;
}
#main pre {
  font-size: 3em;
}

selectores padre

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

Produce:

Sass

a {
  font-weight: bold;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
body.firefox a {
  font-weight: normal;
}

Propiedades anidadas

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

Produce:

Sass

.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold;
}

Variables

$width: 5em;
/* Ahora ya puedes utilizar la variable 
llamada $width como valor de cualquier 
propiedad CSS: */

#main {
  width: $width;
}

Produce:

Sass

#main {
  width: 5em;
}

La regla @import

La regla @media

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}

Produce:

Sass

.sidebar {
  width: 300px;
}
 
@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px;
  }
}

La regla @extend

.foo {
  color: red;
}
.bar {
  @extend .foo;
}
.foo, .bar {
  color: red;
}

La regla @extend

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

Produce:

Sass

.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd;
}
 
.seriousError {
  border-width: 3px;
}

@mixin

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

@mixin clearfix {
  display: inline-block;
  &:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  * html & { height: 1px }
}

Sass

@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}

Sass

@include

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}


p { @include sexy-border(blue, 1in); }

Sass

p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed;
}

Sass

Formato de salida

#main {
  color: #fff;
  background-color: #000; }
  #main p {
    width: 10em; }
 
.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline; }

El formato :nested

Formato de salida

#main {
  color: #fff;
  background-color: #000;
}
#main p {
  width: 10em;
}
 
.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline;
}

 El formato :expanded

Formato de salida

#main { color: #fff; background-color: #000; }
#main p { width: 10em; }
 
.huge { font-size: 10em; font-weight: bold; text-decoration: underline; }

El formato :compact

Formato de salida

#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}

El formato :compressed

Integración

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('styles', function() {
    gulp.src('sass/**/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('./css/'))
});

//Watch task
gulp.task('default',function() {
    gulp.watch('sass/**/*.scss',['styles']);
});

http://ryanchristiani.com/getting-started-with-gulp-and-sass/

Ejercicio Sass

Actividad

Dado el siguiente repositiorio realizar lo siguiente:

  • Realice un fork del repositorio
  • Haga un clon del proyecto fork en su computador
  • Reescriba la hoja css/style.css con sass, según lo revisado en clases. Como mínimo debe contener:
    • Anidación
    • Uso de variables
    • Mixing
    • @import
  • Haga commit de los cambios y actualizar el repositorio en github

Recursos

  • http://blog.escuelaweb.net/manejar-paquetes-cliente-con-bower/
  • https://librosweb.es/libro/sass/
Made with Slides.com