Pre vs Pos

Nath Paiva
Dev. Front-end @ GetNinjas
Twitter: @NathPaiva
Github: @NathPaiva
William Costa
Dev. Front-end @ GetNinjas
Twitter: @wilcosta_dev
Github: @williamcosta

O que é?
O Pre processador são programas que
recebem um valor de entrada, que passa
pelo processador que faz alterações no
conteúdo recebido entregando um outro
valor.
Basicamente com o pré processador no CSS
é a mesma coisa.
Escrevemos o nosso código na sintaxe que
é interpretada pelo nosso pré processador,
no qual após compilado nada mais é do que
o nosso velho e bom CSS.

// Sintaxe SCSS e LESS
body {
font: 100% $font-stack;
color: $primary-color;
}
// Sintaxe SASS
body
font: 100% $font-stack;
color: $primary-color;
// Sintaxe Stylus
body
font 100% $font-stack
color $primary-color

// Variâveis SCSS e SASS
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
// Variáveis LESS
@font-stack: Helvetica, sans-serif;
@primary-color: #333;
//Variáveis Stylus
font-stack = Helvetica, sans-serif;
primary-color = #333;
$font-stack = Helvetica, sans-serif;
$primary-color = #333;

nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}

@mixin border-radius($radius: 5px) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box-1 { @include border-radius(); }
.box-2 { @include border-radius(10px); }
.box-1 {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
}
.box-2 {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}

$grid-width: 40px;
$gutter-width: 10px;
@function grid-width($n) {
@return $n * $grid-width + ($n - 1) * $gutter-width;
}
#sidebar { width: grid-width(5); }
#sidebar {
width: 240px;
}

%message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
@extend %message;
border-color: green;
}
.error {
@extend %message;
border-color: red;
}
.warning {
@extend %message;
border-color: yellow;
}
.message, .success, .error, .warning {
border: 1px solid #cccccc;
padding: 10px;
color: #333;
}
.success {
border-color: green;
}
.error {
border-color: red;
}
.warning {
border-color: yellow;
}

Metodologias
Aqui temos as principais metodologias
para organizarmos nosso CSS:
OOCSS (Oriented Object CSS)
SMACSS
ITCSS
BEM
DRY CSS
Atomic

$lighten: #FFF;
$darken: #626262;
.header {
position: relative;
background-color: $lighten;
&__brand {
padding: 20px 0;
fill: $darken;
}
&--fixed {
position: fixed;
}
&--darken {
background-color: $darken;
.header__brand {
fill: $lighten;
}
}
}
.header {
position: relative;
background-color: #FFF;
}
.header__brand {
padding: 20px 0;
fill: #626262;
}
.header--fixed {
position: fixed;
}
.header--darken {
background-color: #626262;
}
.header--darken .header__brand {
fill: #FFF;
}

O que é?
O PostCss é uma ferramenta baseada
em plugins de JS que cria rotinas para
o CSS.
Sem a necessidade de escrever em uma
syntax diferente .
Basicamente o PostCSS transforma o
CSS em código que o JS consegue
interpretar, para dessa forma aplicar
modiﬁcações nele.

Como funciona?
parser
plugins
stringﬁer
.css

Autopreﬁxer
https://github.com/postcss/autopreﬁxer

$ npm install —-save-dev autoprefixer
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
gulp.task('postcss', function () {
return gulp.src('./style.css')
.pipe(postcss([autoprefixer]))
.pipe(gulp.dest('./prod'));
});

$ npm install —-save-dev postcss-cssnext
var cssnext = require('postcss-cssnext');
return gulp.src(‘./style.css')
.pipe(postcss([cssnext({browsers: ['last 1 version']})]))
});

$ npm install —-save-dev cssnano
var cssnano = require('cssnano');
.pipe(postcss([cssnano]))
});

Font Magician
https://github.com/jonathantneal/postcss-font-magician

$ npm install —-save-dev postcss-font-magician
var magician = require('postcss-font-magician');
.pipe(postcss([magician]))
});

PostCSS Nested
https://github.com/postcss/postcss-nested

$ npm install —-save-dev postcss-nested
var nested = require('postcss-nested');
.pipe(postcss([nested]))
});

Lost Grid
http://lostgrid.org/

$ npm install lost
var lost = require('lost');
.pipe(postcss([lost]))
});

E o futuro… é CSS
Temos o CSS4 vindo ai e algumas features que encontramos em Pré e Pós Processadores já
estarão presentes. Algumas que estão na nova versão do CSS:
:root {
--mainColor: #E5E5E5;
}
!ul > li {
background-color: red;
}
a[href='foo' i] {
}
:not() | :has() | ::matches()
:read-only | :read-write
:required | :optional
:column(selector) | :nth-column(n) | :nth-last-column(n)
Variáveis
Subject Selector
Attribute Case-Sensitivity
Pseudo Classes
Structural Pseudo Classes

Referências
• http://sass-lang.com/
• https://medium.com/@neysimes
• https://www.youtube.com/watch?v=hWNzhKIa34w&t=1s
• https://www.postcss.parts
• http://postcss.org/
• http://css4.rocks/
• https://drafts.csswg.org/selectors-4/#overview
• https://css4-selectors.com/selectors/

Sem perguntas certo?
valeu pessoal 😬

Pre vs Pos

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Pre vs Pos

Semelhante a Pre vs Pos (20)

Pre vs Pos