Sass: Estilo levado à sério

28
Sass Estilo levado à sério

Transcript of Sass: Estilo levado à sério

SassEstilo levado à sério

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

Por que usar Sass?

Atualmente no CSS

● Muitos prefixos● Folhas de estilo muito longas● Repetição de valores e códigos

O que é o Sass?

O que é o Sass?

● Repara os problemas encontrados no CSS

● Pré-processador de folha de estilo

Pré-processadores

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 .scssPadrão de codificação

.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áveisSim, é isso mesmo!

Variáveis

SASS

$blue: #3bbfce;

body {background-color: $blue;

}

CSS

body {background-color: 3bbfce;

}

AninhamentoEvita a acumulação de prefixos

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;

}

OperadoresMatemática em seu CSS

Operadores

SCSS

p {$width: 1000px;width: round(1.5)/2;height: (500px/2);margin-left: 5px + 8px * 2;color: #01020f + #04ff06;

}

MixinsReuse o seu código

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

Funções Nativas

● lighten($color, 15%);● darken($color, 15%);● saturate($color, 15%);● desaturate($color, 15%);

E isso não é tudo

Criar suas própria funções

Utilizar estruturas de decisão

Repita elementos

Obrigado!

[email protected]

fb.com/biellnnunes@biellnnunes

+GabrielNuness