Slide 1
Slide 1 text
Pre-processadores CSS
Sass - Stylus - Less
Slide 2
Slide 2 text
Olá!
Eu sou Willian!
@willian_justen
github.com/willianjusten
Slide 3
Slide 3 text
O que é pre-processador?
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
Escreve Código Compila Código Gerado
Processo
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
Qual é o melhor?
NENHUM!
Slide 10
Slide 10 text
Mas por quê?
• Cerca de 80% das funcionalidades tem em todos!!!
• A diferença é somente em opções mais avançadas
• O melhor é aquele que se encaixa no seu workflow
Slide 11
Slide 11 text
Como usar?
Slide 12
Slide 12 text
Sass
$ gem install sass
$ sass style.scss style.css
Slide 13
Slide 13 text
Less
$ npm install -g less
$ lessc style.less style.css
Slide 14
Slide 14 text
Stylus
$ npm install -g stylus
$ stylus style.styl
Slide 15
Slide 15 text
Sintaxe
Sass
$primary: #0899B1;
$secondary: #CE1413;
body {
background: $primary;
color: $secondary;
}
Less
@primary: #0899B1;
@secondary: #CE1413;
body {
background: @primary;
color: @secondary;
}
Stylus
primary = #0899B1
secondary = #CE1413
body
background primary
color secondary
Slide 16
Slide 16 text
Iniciante
Slide 17
Slide 17 text
Variáveis - Sass
$primary: #0899B1;
$secondary: #CE1413;
body {
background: $primary;
color: $secondary;
}
Slide 18
Slide 18 text
Variáveis - Less
@primary: #0899B1;
@secondary: #CE1413;
body {
background: @primary;
color: @secondary;
}
Slide 19
Slide 19 text
Variáveis - Stylus
primary = #0899B1
secondary = #CE1413
body
background primary
color secondary
Slide 20
Slide 20 text
Nesting - Sass
nav {
width: 400px;
ul {
list-style: none;
}
li {
background: #FF0000;
}
a {
color: #FFFFFF;
&:hover{
color: #CCCCCC;
}
}
}
nav {
width: 400px;
}
nav ul {
list-style: none;
}
nav li {
background: #FF0000;
}
nav a {
color: #FFFFFF;
}
nav a:hover {
color: #CCCCCC;
}
Slide 21
Slide 21 text
Nesting - Less
nav {
width: 400px;
ul {
list-style: none;
}
li {
background: #FF0000;
}
a {
color: #FFFFFF;
&:hover{
color: #CCCCCC;
}
}
}
nav {
width: 400px;
}
nav ul {
list-style: none;
}
nav li {
background: #FF0000;
}
nav a {
color: #FFFFFF;
}
nav a:hover {
color: #CCCCCC;
}
Slide 22
Slide 22 text
Nesting - Stylus
nav
width 400px
ul
list-style none
li
background #FF0000
a
color #FFFFFF
&:hover
color #CCCCCC
nav {
width: 400px;
}
nav ul {
list-style: none;
}
nav li {
background: #FF0000;
}
nav a {
color: #FFFFFF;
}
nav a:hover {
color: #CCCCCC;
}
Slide 23
Slide 23 text
Cuidado com a especificidade!!!
nav {
width: 400px;
ul {
list-style: none;
li {
background: #FF0000;
a {
color: #FFFFFF;
&:hover{
color: #CCCCCC;
}
}
}
}
}
nav {
width: 400px;
}
nav ul {
list-style: none;
}
nav ul li {
background: #FF0000;
}
nav ul li a {
color: #FFFFFF;
}
nav ul li a:hover {
color: #CCCCCC;
}
Slide 24
Slide 24 text
Import
@import "normalize";
@import "base";
@import "buttons";
@import “typo”;
Slide 25
Slide 25 text
Intermediário
Slide 26
Slide 26 text
Mixins - Sass
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box {
@include border-radius(10px);
}
.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
Slide 27
Slide 27 text
Mixins - Less
.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
border-radius: @radius;
}
.box {
.border-radius(10px);
}
.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
Slide 28
Slide 28 text
Mixins - Stylus
border-radius radius
-webkit-border-radius radius
-moz-border-radius radius
-ms-border-radius radius
border-radius radius
.box
border-radius 10px
.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
Slide 29
Slide 29 text
Extend - Sass
.box {
width: 200px;
height: 300px;
}
.box-red {
@extend .box;
background: #FF0000;
}
.box-blue {
@extend .box;
background: #0000FF;
}
.box, .box-red, .box-blue {
width: 200px;
height: 300px;
}
.box-red {
background: #FF0000;
}
.box-blue {
background: #0000FF;
}
Slide 30
Slide 30 text
Extend - Less
.box, .box-red, .box-blue {
width: 200px;
height: 300px;
}
.box-red {
background: #FF0000;
}
.box-blue {
background: #0000FF;
}
.box {
width: 200px;
height: 300px;
}
.box-red {
&:extend(.box);
background: #FF0000;
}
.box-blue {
&:extend(.box);
background: #0000FF;
}
Slide 31
Slide 31 text
Extend - Stylus
.box, .box-red, .box-blue {
width: 200px;
height: 300px;
}
.box-red {
background: #FF0000;
}
.box-blue {
background: #0000FF;
}
.box
width 200px
height 300px
.box-red
@extend .box
background #FF0000
.box-blue
@extend .box
background #0000FF
Slide 32
Slide 32 text
Placeholder + Extend- Sass
%box {
width: 200px;
height: 300px;
}
.box-red {
@extend %box;
background: #FF0000;
}
.box-blue {
@extend %box;
background: #0000FF;
}
.box-red, .box-blue {
width: 200px;
height: 300px;
}
.box-red {
background: #FF0000;
}
.box-blue {
background: #0000FF;
}
Slide 33
Slide 33 text
Placeholder + Extend- Stylus
.box-red, .box-blue {
width: 200px;
height: 300px;
}
.box-red {
background: #FF0000;
}
.box-blue {
background: #0000FF;
}
%box
width 200px
height 300px
.box-red
@extend %box
background #FF0000
.box-blue
@extend %box
background #0000FF
Slide 34
Slide 34 text
Avançado
Slide 35
Slide 35 text
Functions - Sass
@function calc-percent($target, $container) {
@return ($target / $container) * 100%;
}
.my-module {
width: calc-percent(650px, 1000px);
}
Slide 36
Slide 36 text
Functions - Less
.calc-percent(@target, @container) {
(@target / @container) * 100%;
}
.my-module {
width: .calc-percent(650px, 1000px);
}
Slide 37
Slide 37 text
Functions - Stylus
cp(target, container)
(target / $container) * 100%
.my-module
width cp(650px, 1000px)
Slide 38
Slide 38 text
Color Functions - Sass
rgba($color, $alpha)
hue($color)
saturation($color)
lightness($color)
lighten($color, $percentage)
darken($color, $percentage)
saturate($color, $percentage)
desaturate($color, $percentage)
grayscale($color)
complement($color)
invert($color)
Slide 39
Slide 39 text
Color Functions - Less
lighten(@color, @percentage)
darken(@color, @percentage)
saturate(@color, @percentage)
desaturate(@color, @percentage)
fadein(@color, @percentage)
fadeout(@color, @percentage)
fade(@color, @percentage)
spin(@color, @percentage)
Slide 40
Slide 40 text
Color Functions - Stylus
rgba(color, alpha)
hue(color)
saturation(color)
lightness(color)
lighten(color, percentage)
darken(color, percentage)
saturate(color, percentage)
desaturate(color, percentage)
invert(color)
Slide 41
Slide 41 text
Existem várias built-in
functions em cada um deles!
Procure na documentação!
Slide 42
Slide 42 text
Control Directives - Sass
@if
@else
@else if
@then
@for
@each
@while
Slide 43
Slide 43 text
Control Directives - Less
when
Slide 44
Slide 44 text
Control Directives - Stylus
if
else
else if
unless
for in
Slide 45
Slide 45 text
If, else - Sass
@mixin buttons($color, $type) {
@if $type == ‘flat' {
background-color: $color;
@else if $type == ‘gradient' {
background: linear-gradient($color, darken($color, 20%));
}
@else if $type == ‘glossy' {
background: linear-gradient($color, darken($color, 20%) 50%);
@else {
background-color: $color;
}
}
.button {
@include buttons(green, glossy);
}
Slide 46
Slide 46 text
when - Less
.buttons(@color, @type) when (@type == ‘flat’) {
background-color: $color;
}
.buttons(@color, @type) when (@type == ‘gradient’) {
background: linear-gradient($color, darken($color, 20%));
}
.buttons(@color, @type) when (@type == ‘glossy’) {
background: linear-gradient($color, darken($color, 20%) 50%);
}
.button {
.buttons(green, glossy);
}
Slide 47
Slide 47 text
if,else - Stylus
buttons($color, $type) {
if type == ‘flat'
background-color color
else if type == ‘gradient'
background linear-gradient(color, darken(color, 20%))
else if $type == ‘glossy'
background linear-gradient(color, darken($color, 20%) 50%)
else
background-color color
.button
buttons(green, glossy)
Slide 48
Slide 48 text
for loop - Sass
for $i from 1px to 5px {
.border-#{$i} {
border: $i solid #000;
}
}
.border-1px {
border: 1px solid #000;
}
.border-2px {
border: 2px solid #000;
}
.border-3px {
border: 3px solid #000;
}
.border-4px {
border: 4px solid #000;
}
.border-5px {
border: 5px solid #000;
}