sass: estilo levado à sério
Post on 18-Jul-2015
370 Views
Preview:
TRANSCRIPT
Gabriel Nunes● Graduando de Ciência da
Computação● Técnico em Informática● Núcleo de Tecnologia da
Informação - UFAL● Front-end Developer
Pré-processador
● É um programa que realiza conversões lexicas em seu código
● Permite adicionar ou substituir elementos
Pré-processador Sass
● Criado em 2007 por Hampton Catlin● RubyGem ● Facilita a codificação e a manutenção● Evita desorganização e repetição de código● CSS Dinâmico
Pré-processador Sass
● Assiste mudanças no seu arquivo● Exporta do Sass para CSS
sass --watch style.scss:style.css a
.sass or .scss
SASS
$blue: #3bbfce$margin: 16px
.border padding: $margin / 2 border-color: $blue
SCSS
$blue: #3bbfce;$margin: 16px;
.border {padding: $margin / 2;border-color: $blue;
}
Variáveis
SASS
$blue: #3bbfce;
body {background-color: $blue;
}
CSS
body {background-color: 3bbfce;
}
Aninhamento
SCSS
nav {li {
display: inline-block;}a {
display: block;padding: 6px 12px;
}}
CSS
nav li {display: inline-block;
}
nav a {display: block;padding: 6px 12px;
}
Operadores
SCSS
p {$width: 1000px;width: round(1.5)/2;height: (500px/2);margin-left: 5px + 8px * 2;color: #01020f + #04ff06;
}
Mixins
SCSS
@mixin new-font ($color, $style) {color: $color;font-style: $style;
}
.header-text {@include new-font(red, italic);
}
CSS
.header-text {color: red;font-style: italic;
}
Funções Nativas
● lighten($color, 15%);● darken($color, 15%);● saturate($color, 15%);● desaturate($color, 15%);
top related