Embed Size (px)
DESCRIPTION
Overview dos principais pré-processadores (pre-process) de CSS. Less, Compass, Saas. Daniel Santos - Developer na Just Digital
Citation preview
Pré-processadores {CSS}
por: Daniel SantosDeveloper
Por que usar umPré-processador?
Pré-processadores❏ Mixins
❏ Extend❏ Variables
❏ Helpers❏ Operations
❏ Media❏ Functions
❏ Nesting❏ Importing
❏ Conditions❏ Color function
Qual pré-processador usar?
Compilando Less no tempo de execução
<link rel=”stylesheet/less” type=”text/css” href=”style.less” />
<script type=”text/javascript” src=”js/less-1.1.3.min.js”></script>
Compilando Less para um arquivo .css
$ sudo apt-get install npm
$ sudo apt-get install node-less
$ npm install -g less
$ lessc style.less > style.css
EXEMPLO Less
@import Mixins
Parametric MixinsNested
@import url("http://fonts.googleapis.com/css?family=Joti+One");
.radius (@radius) {-webkit-border-radius: @radius;-moz-border-radius: @radius;-ms-border-radius: @radius;-o-border-radius: @radius;border-radius: @radius;
}
.texto{text-align: center;font-family: 'Joti One';margin: 0;font-weight: bold;
}
@import "mixin.less";
.body{background: hardlight(#ff6600, #cccccc);margin: 0 auto;padding: 20px;width: 960px;height: 400px;.radius(100px 60px 10px 75px);
}
h1{.texto;color: negation(#ff6600, #cccccc);margin-bottom: 50px;font-size: 40px;
}
p{.texto;color: difference(#ff6600, #0000ff);font-size: 20px;
}
EXEMPLO Sass
@import$variables@Extend
@import url("http://fonts.googleapis.com/css?family=Underdog")$preto: #000$azul: #0000ff$rosa: #ff00cc
bodymargin: 0padding: 0background: $pretoh1
color: $azulfont-family: 'Underdog'font-weight: boldtext-align: centerfont-size: 60px
p@extend h1font-size: 20pxfont-weight: normalcolor: $rosa
@import url("http://fonts.googleapis.com/css?family=Underdog");body {
margin: 0;padding: 0;background: black; }body h1, body p {
color: blue;font-family: "Underdog";font-weight: bold;text-align: center;font-size: 60px; }
body p {font-size: 20px;font-weight: normal;color: #ff00cc; }
Algumas bibliotecas do Saas?
EXEMPLO Compass
@ImportHelpers
$VariablesOperations
@Mixin@if, @else if, @else
@for
@import url("http://fonts.googleapis.com/css?family=Averia+Sans+Libre")@import "compass/css3"
$black : #000$white : #fff$paragrafo : #a2c999 - 40
@mixin condicao($teste: true)@if $teste == false
font-family: 'Averia Sans Libre'font-size: 40pxcolor: $whitetext-align: centermargin: 0 0 35px 0
@else if $teste == 1font-size: 30pxcolor: $paragrafotext-align: centerfont-weight: normalfont-family: arialmargin: 0 0 35px 0
@elsefont-size: 70pxcolor: #0000ff + $paragrafofont-family: "Courier New"margin: 0
@import mixin
.contentbackground: $black+border-radius(25px 60px 0 40px)width: 960pxheight: 300pxmargin: 0 auto
h1+condicao(false)
p+condicao(1)
.paragrafo+condicao
@import url("http://fonts.googleapis.com/css?family=Averia+Sans+Libre");.content {
background: black;-webkit-border-radius: 25px 60px 0 40px;-moz-border-radius: 25px 60px 0 40px;-ms-border-radius: 25px 60px 0 40px;-o-border-radius: 25px 60px 0 40px;border-radius: 25px 60px 0 40px;width: 960px;height: 300px;margin: 0 auto;
}.content h1 {
font-family: "Averia Sans Libre";font-size: 40px;color: white;text-align: center;margin: 0 0 35px 0;
}.content p {
font-size: 30px;color: #7aa171;text-align: center;font-weight: normal;font-family: arial;margin: 0 0 35px 0;
}.content .paragrafo {
font-size: 70px;color: #7aa1ff;font-family: "Courier New";margin: 0;
}
@import url("http://fonts.googleapis.com/css?family=Averia+Sans+Libre")@import "compass/css3"
$branco : #fff$verde : #00ff00$circulo: #0000ff - 80
$class: teste_for !default@for $i from 1 through 2
.#{$class}_#{$i}width: 100%height: 40pxbackground: $circulomargin-bottom: 40px+border-radius(40px)
@import mixin
.contentbackground: $branco+box-shadow($verde 6px 6px 40px)width: 960pxheight: 400pxmargin: 0 autopadding-top: 30px
@import url("http://fonts.googleapis.com/css?family=Averia+Sans+Libre");.teste_for_1 {
width: 100%;height: 40px;background: #0000af;margin-bottom: 40px;-webkit-border-radius: 40px;-moz-border-radius: 40px;-ms-border-radius: 40px;-o-border-radius: 40px;border-radius: 40px;
}.teste_for_2 {
width: 100%;height: 40px;background: #0000af;margin-bottom: 40px;-webkit-border-radius: 40px;-moz-border-radius: 40px;-ms-border-radius: 40px;-o-border-radius: 40px;border-radius: 40px;
}.content {
background: white;-webkit-box-shadow: green 6px 6px 40px;-moz-box-shadow: green 6px 6px 40px;box-shadow: green 6px 6px 40px;width: 960px;height: 400px;margin: 0 auto;padding-top: 30px;
}
@import url("http://fonts.googleapis.com/css?family=Averia+Sans+Libre");.teste_for_1 {
width: 100%;height: 40px;background: #0000af;margin-bottom: 40px;-webkit-border-radius: 40px;-moz-border-radius: 40px;-ms-border-radius: 40px;-o-border-radius: 40px;border-radius: 40px;
}.teste_for_2 {
width: 100%;height: 40px;background: #0000af;margin-bottom: 40px;-webkit-border-radius: 40px;-moz-border-radius: 40px;-ms-border-radius: 40px;-o-border-radius: 40px;border-radius: 40px;
}.content {
background: white;-webkit-box-shadow: green 6px 6px 40px;-moz-box-shadow: green 6px 6px 40px;box-shadow: green 6px 6px 40px;width: 960px;height: 400px;margin: 0 auto;padding-top: 30px;
}
OBRIGADO!!!
Daniel SantosDeveloper
[email protected]+55(11)5181-5170
www.justdigital.com.brhttp://blog.justdigital.com.br
