Pré-processadores CSS

O que são pré-processadores?

Pré-processadores são programas que recebem uma entrada, normalmente um texto, efetuando conversões em seu conteúdo que podem incluir substituições e inclusões condicionais.

 

São basicamente ferramentas alternativas para escrever CSS de uma forma mais dinâmica, organizada e flexível. Facilitando a vida do desenvolvedor.

Mas porque usá-los?

O principal benefício dos pré-processadores é o ganho na produtividade, seja na criação ou manutenção de estilos, gerando aplicações com estilo organizado e sem duplicação de código.

NECESSIDADES!!!

Mas de onde surgiu a ideia?

Inicialmente o CSS foi projetado para ser uma linguagem simples para estilizar páginas web. Muitas vezes ela nos limita em algum aspecto, as tarefas do desenvolvedor front-end tem se tornado cada vez mais complexas, com uma infinidade de itens que precisam da nossa atenção, como por exemplo:

  • Vendor prefixes
  • Desenvolvimento de aplicações responsivas
  • Dar manutenções em projetos de larga escala
  • Reutilização de código
  • Etc...

​Para suprir essa necessidade surgiram os pré-processadores.

Utilidades

Com os pré-processadores é possível declarar variáveis, fazer operações matemáticas, criar condições para os estilos, e muito mais…

Variáveis

// scss
$color-base: #08f;

.box {
    background-color: $color-base;
}
// css
.box {
    background-color: #08f;
}

Operações

// scss
$font-default: 16px;

.big {
    font-size: $font-default * 2;
}

.small {
    font-size: $font-default - 4px;
}
// css

.big {
    font-size: 32px;
}

.small {
    font-size: 14px;
}

Mixins

// scss

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}

.box {
    @include border-radius(5px);
}
// css

.box {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px;
}

Herança

// scss

header {
    margin: 20px auto;
    text-align: center;

    h1 {
        font-size: 18px;
    }

    .top {
        border: 2px solid red;
        
        p {
            color: red;
        }
    }
}
// css

header {
    margin: 20px auto;
    text-align: center;
}

header h1 {
    font-size: 18px;
}

header .top {
    border: 2px solid red;
}

header .top p {
    color: red;
}

Pseudo-elementos

// scss

a {
    color: red;

    &:hover {
        color: blue;
    }
}
// css

a {
    color: red;
}

a:hover {
    color: blue;
}

Comentários

// scss
/* Esse comentário vai 
* aparecer no css gerado 
*/

// Esse não vai
//css
/* Esse comentário vai 
* aparecer no css gerado 
*/

Extends / Placeholders

// scss
%btn {
    border-radius: 5px;
    padding: 0;
}

.btn-primary {
    @extend %btn;

    background-color: red;
    font-size: 16px;
}

.btn-big {
    @extend .btn-primary;
    
    font-size: 22px;
}
//css
.btn-primary, .btn-big {
  border-radius: 5px;
  padding: 0;
  background-color: red;
  font-size: 16px;
}

.btn-big {
  font-size: 22px;
}

Funções nativas

// scss
$color-base : #08f;
$color-dark : darken($color-base, 10%);
$color-light: lighten($color-base, 10%);

a {
    background-color: $color-base;

    &:hover {
        background-color: $color-dark;
    }

    &:link {
        color: $color-light;
    }
}
//css
a {
  background-color: #08f;
}
a:hover {
  background-color: #006dcc;
}
a:link {
  color: #33a0ff;
}

E pra compilar?

sass --watch app/sass:public/stylesheets

Com o sass

E pra compilar?

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

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

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

Com o Gulp

gulp sass

gulp watch

Obrigado pela atenção

igorsousafront

Referências: http://matheusazzi.com/pre-processadores-css/

Dúvidas?

Made with Slides.com