![$ 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'));
});](https://image.slidesharecdn.com/pre-vs-pos-170929124226/85/Pre-vs-Pos-29-320.jpg)
![$ npm install —-save-dev postcss-cssnext
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var cssnext = require('postcss-cssnext');
gulp.task('postcss', function () {
return gulp.src(‘./style.css')
.pipe(postcss([cssnext({browsers: ['last 1 version']})]))
.pipe(gulp.dest('./prod'));
});](https://image.slidesharecdn.com/pre-vs-pos-170929124226/85/Pre-vs-Pos-32-320.jpg)
![$ npm install —-save-dev cssnano
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var cssnano = require('cssnano');
gulp.task('postcss', function () {
return gulp.src('./style.css')
.pipe(postcss([cssnano]))
.pipe(gulp.dest('./prod'));
});](https://image.slidesharecdn.com/pre-vs-pos-170929124226/85/Pre-vs-Pos-35-320.jpg)
![$ npm install —-save-dev postcss-font-magician
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var magician = require('postcss-font-magician');
gulp.task('postcss', function () {
return gulp.src('./style.css')
.pipe(postcss([magician]))
.pipe(gulp.dest('./prod'));
});](https://image.slidesharecdn.com/pre-vs-pos-170929124226/85/Pre-vs-Pos-38-320.jpg)
![$ npm install —-save-dev postcss-nested
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var nested = require('postcss-nested');
gulp.task('postcss', function () {
return gulp.src('./style.css')
.pipe(postcss([nested]))
.pipe(gulp.dest('./prod'));
});](https://image.slidesharecdn.com/pre-vs-pos-170929124226/85/Pre-vs-Pos-41-320.jpg)
![$ npm install lost
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var lost = require('lost');
gulp.task('postcss', function () {
return gulp.src('./style.css')
.pipe(postcss([lost]))
.pipe(gulp.dest('./prod'));
});](https://image.slidesharecdn.com/pre-vs-pos-170929124226/85/Pre-vs-Pos-44-320.jpg)
![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](https://image.slidesharecdn.com/pre-vs-pos-170929124226/85/Pre-vs-Pos-46-320.jpg)
Pre vs Pos
- 2. Nath Paiva Dev. Front-end @ GetNinjas Twitter: @NathPaiva Github: @NathPaiva William Costa Dev. Front-end @ GetNinjas Twitter: @wilcosta_dev Github: @williamcosta
- 4. 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.
- 5. Quais são?
- 7. Syntax
- 8. // 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
- 9. Variables
- 10. // 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;
- 11. Nested
- 12. 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; }
- 13. Mixin
- 14. @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; }
- 15. Function
- 16. $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; }
- 17. Extends
- 18. %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; }
- 19. Metodologia
- 20. Metodologias Aqui temos as principais metodologias para organizarmos nosso CSS: OOCSS (Oriented Object CSS) SMACSS ITCSS BEM DRY CSS Atomic
- 21. $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; }
- 23. PostCss
- 24. 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 modificações nele.
- 26. Alguns Plugins
- 29. $ 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')); });
- 32. $ npm install —-save-dev postcss-cssnext var gulp = require('gulp'); var postcss = require('gulp-postcss'); var cssnext = require('postcss-cssnext'); gulp.task('postcss', function () { return gulp.src(‘./style.css') .pipe(postcss([cssnext({browsers: ['last 1 version']})])) .pipe(gulp.dest('./prod')); });
- 35. $ npm install —-save-dev cssnano var gulp = require('gulp'); var postcss = require('gulp-postcss'); var cssnano = require('cssnano'); gulp.task('postcss', function () { return gulp.src('./style.css') .pipe(postcss([cssnano])) .pipe(gulp.dest('./prod')); });
- 38. $ npm install —-save-dev postcss-font-magician var gulp = require('gulp'); var postcss = require('gulp-postcss'); var magician = require('postcss-font-magician'); gulp.task('postcss', function () { return gulp.src('./style.css') .pipe(postcss([magician])) .pipe(gulp.dest('./prod')); });
- 41. $ npm install —-save-dev postcss-nested var gulp = require('gulp'); var postcss = require('gulp-postcss'); var nested = require('postcss-nested'); gulp.task('postcss', function () { return gulp.src('./style.css') .pipe(postcss([nested])) .pipe(gulp.dest('./prod')); });
- 44. $ npm install lost var gulp = require('gulp'); var postcss = require('gulp-postcss'); var lost = require('lost'); gulp.task('postcss', function () { return gulp.src('./style.css') .pipe(postcss([lost])) .pipe(gulp.dest('./prod')); });
- 46. 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
- 47. 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/
- 48. Sem perguntas certo? valeu pessoal 😬