¿Qué es Gulp.js?
Gulp.js es una herramienta para automatizar procesos, es muy útil para tareas repetitivas que nos hacen perder tiempo
¿Qué es SCSS?
SCSS es una sintaxis dentro de SASS (Syntactically Awesome Style Sheets). SASS es un lenguaje «extendido» de CSS, para que nos hagamos a la idea es un CSS vitaminado.
La principal diferencia es que SASS tiene una sintaxis totalmente distinta a CSS, mientras que SCSS tiene todas la ventajas de SASS pero con la sintaxis de CSS. Si nunca has trabajado con SASS empezar con SCSS es una buena idea.
Para convertir nuestro código SCSS en CSS plano utilizaremos Gulp
¿Qué es BrowserSync?
BrowserSync es un paquete de Node ideal para desarrollar web, permite ver los cambios que realicemos en tiempo real (tanto a nivel de contenido como de estilos) y testear nuestro proyecto local en otros dispositivos que se encuentren en nuestra misma red, ideal para ver nuestro proyecto en Smartphones, por ejemplo
Objetivo de este artículo
Conceptos básicos de SCSS
Un resumen rápido de los puntos fuertes de SASS/SCSS sobre CSS
Variables
En SCSS podemos definir variables para utilizarlas posteriormente ¿Cuantas veces has tenido que buscar/reemplazar tu código css por un valor y reemplazarlo por otro?
Con SCSS puedes hacer:
$body-background: #fefefe;
$body-color: #444;
body {
[ws]background-color: $body-background;
[ws]color: $body-color;
}
Anidamiento o nesting
Para mantener el código limpio y legible podemos anidar selectores de elementos que van dentro de otros, de esta forma nuestro código queda mucho más reducido y entendible
.header {
[ws]background-color: #fff;
[ws].brand {
[ws][ws]height: 50px;
[ws][ws]a {
[ws][ws][ws]display: block;
[ws][ws]}
[ws]}
}
Imports y partials
Con el objetivo de estructurar bien nuestro código podemos separar los distintos elementos en archivos diferentes y importarlos en otros, esto también nos es muy útil a la hora de poderlo reutilizar. Un archivo partial tiene la misma extensión .scss
pero debe empezar con _ para que los procesadores sepan que es un partial
@import layout/header
@import layout/footer
En el momento de importar un archivo en otro la ruta debe ser relativa, podemos obviar la extensión y el _
«Extensión» de classes
Otra funcionalidad muy potente de SCSS es el extend, para ahorrarnos reescribir todo el rato el mismo código, podemos hacer referencia a una clase definida anteriormente para aplicar los mismos estilos
.button {
[ws]background-color: $primary-color;
[ws]color: #fff;
[ws]border-radius: 3px;
[ws]padding: 10px 20px;
}
[ws]
#comment-form input[type=»submit»] {
[ws]@extend .button;
}
Mixins
Un mixin es parecido a un extend, pero en este caso podemos pasarle parámetros, se ve más claro en el ejemplo:
@mixin button($bg, $color, $radius) {
[ws]background-color: $bg;
[ws]color: $color;
[ws]border-radius: $radius;
[ws]padding: 10px 20px;
}
[ws]
#comment-form input[type=»submit»] {
[ws]@include button($primary-color, #fff, 3px);
}
Funciones
SCSS incluye funciones muy útiles para realizar operaciones, por ejemplo:
.button {
[ws]background-color: $primary-color;
[ws]color: lighten($primary-color, 15%);
[ws]border: 1px solid darken($primary-color, 10%);
}
Puedes ver un listado completo de las funciones en este enlace
Operaciones
Podemos realizar operaciones matemáticas directamente dentro de SCSS
$button-padding: 10px;
.button {
[ws]background-color: $primary-color;
[ws]padding: $button-padding;
[ws]&.large {
[ws][ws]padding: $button-padding*2;
[ws]}
}
El &
que precede a la clase .large hace referencia a su antecesor, es decir en este caso estamos definiendo las reglas para un elemento que tenga tanto la clase button
como la clase large
Instalación de Gulp.js
Gulp funciona sobre Node.js, si no lo tienes instalado en tu ordenador puedes bajar Node.js de su página web
Vamos a instalar el comando de gulp, abrimos el terminal y escribimos
npm install –global gulp-cli
Navegamos a la raíz de nuestro proyecto (Este paso varía según el Sistema Operativo y donde este el proyecto) en mi caso:
cd Sites/gulptest
Ahora instalamos Gulp como dependencia de nuestro proyecto
npm install –save-dev gulp
Como en nuestro caso queremos Gulp para procesar SCSS, instalamos también la extensión de SASS
npm install –save-dev gulp-sass
Estructura de nuestro proyecto
Crearemos dos carpetas en nuestro proyecto, en la carpeta assets pondremos todo nuestro código SCSS, la carpeta static la dejamos vacía ya que el CSS lo generaremos automáticamente
root
├── assets
| ├── scss
| └── app.scss
├── static
| ├── css
├── index.html
Creando el archivo gulpfile.js
En la raíz del proyecto creamos un archivo gulpfile.js
, toda la configuración la añadiremos aquí dentro
Gulp funciona con un sistema de tareas, vamos a crear una tarea llamadastyles
que procese nuestro SCSS:
var gulp = require(‘gulp’);
var sass = require(‘gulp-sass’);
gulp.task(‘styles’, function() {
[ws]return gulp.src(«./assets/scss/**/*.scss»)
[ws][ws].pipe(sass())
[ws][ws].pipe(gulp.dest(«./static/css»));
});
¿Fácil no? La tarea dice: Coge cualquier archivo.scss
dentro de /assets/scss
, procesarlo como.css
y guardalo en/static/css
Para probarlo escribimos en la terminal
gulp styles
Esto genera el archivoapp.css
dentro de/static/css
Automatizando las tareas en Gulp
Ahora que tenemos la tarea creada, vamos a añadir otra, que esté «mirando» los archivos.scss
y cuando detecte un cambio en ellos ejecute la tareastyles
, vamos a crear la tareaserve
gulp.task(‘serve’, function() {
[ws]gulp.watch(‘./assets/scss/**/*.scss’, [‘styles’]);
});
¡Listo! Ahora escribimos en la terminal:
gulp serve
Mientras el proceso esté activo cada vez que editemos el archivo
.scss
Gulp lo procesara y creará el archivo.css
correspondiente, si queremos finalizar el proceso pulsamos Cmd + C en Mac o Ctrl + C en Windows
Creando el index.html
Ahora que ya generamos un archivo .css
vamos a poner una estructura básica en nuestro index.html
que lo cargue
<!DOCTYPE html>
<html lang=»es»>
<head>
[ws]<meta charset=»UTF-8″>
[ws]<title>SCSS & Gulp</title>
[ws]<link rel=»stylesheet» href=»/static/css/app.css»>
</head>
<body>
[ws]<h1>Probando Gulp con SCSS!</h1>
</body>
</html>
Complicándolo un poco
Vamos a instalar unos cuantos paquetes adicionales para darle más funcionalidades a nuestra tareastyles
:
npm install –save-dev gulp-autoprefixer gulp-clean-css gulp-rename
Que queremos hacer con los esto:
- Autoprefixer: Hacer que nuestro css venga prefijado (donde haga falta) para maximizar la compatibilidad con los navegadores
- Clean CSS: Comprimir CSS
- Rename: Cambiar el nombre de los archivos .css
Primero declaramos los nuevos paquetes en la parte superior del archivo Gulp:
var autoprefixer = require(‘gulp-autoprefixer’);
var rename = require(«gulp-rename»);
var cleanCSS = require(‘gulp-clean-css’);
Y editamos nuestra tarea styles de la siguiente forma:
gulp.task(‘styles’, function() {
[ws]return gulp.src(«./assets/scss/**/*.scss»)
[ws][ws].pipe(sass())
[ws][ws].pipe(autoprefixer({
[ws][ws][ws]browsers: [‘last 2 versions’],
[ws][ws][ws]cascade: false
[ws][ws]}))
[ws][ws].pipe(cleanCSS())
[ws][ws].pipe(rename({
[ws][ws][ws]suffix: «.min»,
[ws][ws]}))
[ws][ws].pipe(gulp.dest(«./static/css»));
});
Volvemos a ejecutar la tarea para ver los cambios:
gulp serve
Ahora nuestro CSS está prefijado y comprimido
Recordad de cambiar el nombre del archivo css en el index.html
ya que ahora es app.min.css
Último paso: Añadiendo BrowserSync
Primero descargamos BrowserSync:
npm install –save-dev browser-sync
Inicializamos BrowserSync:
var browserSync = require(‘browser-sync’).create();
Seguidamente vamos a modificar nuestra tarea serve, queremos que cada vez que modifiquemos nuestro archivo
.html
el navegador refresque automáticamentegulp.task(‘serve’, function() {
[ws]browserSync.init();
[ws]gulp.watch(«./assets/scss/**/*.scss», [‘styles’]);
[ws]gulp.watch(«./**/*.html»).on(‘change’, browserSync.reload);
});
También queremos refrescar el navegador cuando se ejecuta la tarea
styles
, para hacerlo añadimos una linea extra al final:gulp.task(‘styles’, function() {
[ws]return gulp.src(«./assets/scss/**/*.scss»)
[ws][ws].pipe(sass())
[ws][ws].pipe(autoprefixer({
[ws][ws]browsers: [‘last 2 versions’],
[ws][ws]cascade: false
[ws]}))
[ws].pipe(cleanCSS())
[ws].pipe(rename({
[ws][ws]suffix: «.min»,
[ws]}))
[ws].pipe(gulp.dest(«./static/css»))
[ws].pipe(browserSync.stream());
});
¡Listo! Ahora al ejecutar:
gulp serve
Se nos abre una ventana con la ruta
http://localhost:3000
, podemos hacer la prueba que al editar elscss
o elhtml
los cambios se reflejan
También podemos acceder a nuestro proyecto desde otro dispositivo (conectado a la misma red) poniendo la url local de nuestro ordenador con el puerto de BrowserSync, en mi caso http://172.26.0.50:3000
Conclusión
Este artículo es solo una pequeña introducción a lo que se puede hacer con scss o gulp, más adelante me gustaría profundizar más en otros ámbitos como crear tareas para scripts, incluir un Framework de CSS como Bootstrap o Foundation en nuestro Gulp o una pequeña introducción a BEM y SCSS