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/
Pre procesadores CSS
By Miguel Cantillana
