| Learning Talk

Dito Learning Talk - Tannus Esquerdo

CSS with superpowersDito Learning Talk - Tannus Esquerdo

O que é Sass?

Dito Learning Talk - Tannus Esquerdo

Sass make CSS fun again..

“Sass is CSS, plus nested rules, variables, mixins, and more,

all in a concise, readable syntax.”

Hampton Catlin -

Dito Learning Talk - Tannus Esquerdo

● Sass foi criado por Hampton Catlin em 2006

● também inventor do Haml e Wikipedia Mobile

Dito Learning Talk - Tannus Esquerdo

Sass

Command Line and Run

gem install sass

Dito Learning Talk - Tannus Esquerdo

Porque Sass?

Dito Learning Talk - Tannus Esquerdo

Problemas do CSS

● Arquivos Super Longos

● Código repetitivo

● Manutenção difícil

● Arquivos desordenados

Dito Learning Talk - Tannus Esquerdo

Porque Sass?

● Sintaxe Simples

● Facilita Manutenção

● Mais fácil utilizar modulariazação

● DRY

● Diversos Plugins

Dito Learning Talk - Tannus Esquerdo

Features

● Nested Rules● Variáveis● Mixins● Extends● Color Palette● Funções● Import / Partials● Media Queries

Dito Learning Talk - Tannus Esquerdo

Nested Rules

Dito Learning Talk - Tannus Esquerdo

Nasted Rules

Dito Learning Talk - Tannus Esquerdo

- Sass permite que regras CSS seja aninhadas uma dentro da outra.

Nasted Rules

Dito Learning Talk - Tannus Esquerdo

Referencing Parent Selectors: &

Dito Learning Talk - Tannus Esquerdo

Nasted Properties

Dito Learning Talk - Tannus Esquerdo

- Basta escrever o namespace uma vez, o Sass já atribui para cada sub-propriedade dentro do ninho.

Nasted Properties

Dito Learning Talk - Tannus Esquerdo

- Basta escrever o namespace uma vez, o Sass já atribui para cada sub-propriedade dentro do ninho.

Variáveis

Dito Learning Talk - Tannus Esquerdo

Variables

Dito Learning Talk - Tannus Esquerdo

- Variáveis começam com o sinais de dollar, e são definidas como propriedades CSS .

Variables

Dito Learning Talk - Tannus Esquerdo

- Variáveis começam com o sinais de dollar, e são definidas como propriedades CSS .

- Variáveis só estão disponíveis dentro do nível de seletores aninhados onde estão definidos.

Mixins

Dito Learning Talk - Tannus Esquerdo

Mixins

Dito Learning Talk - Tannus Esquerdo

- Mixins permitem definir estilos que podem ser reutilizados em toda a folha de estilo.

Mixins

Dito Learning Talk - Tannus Esquerdo

- Mixins permitem definir estilos que podem ser reutilizados em toda a folha de estilo.

- Mixins são incluídas no documento com a directiva @include .

Mixins

Dito Learning Talk - Tannus Esquerdo

- Mixins permitem definir estilos que podem ser reutilizados em toda a folha de estilo.

- Mixins são incluídas no documento com a directiva @include .

Mixins Arguments

Dito Learning Talk - Tannus Esquerdo

- Ao definir um mixin , os argumentos são escritos como nomes de variáveis separados por vírgulas , tudo entre parênteses após o nome. Em seguida, quando se inclui o mixin , os valores podem ser passados em da mesma maneira .

Mixins Arguments

Dito Learning Talk - Tannus Esquerdo

- Ao definir um mixin , os argumentos são escritos como nomes de variáveis separados por vírgulas , tudo entre parênteses após o nome.

Extends

Dito Learning Talk - Tannus Esquerdo

Extends

Dito Learning Talk - Tannus Esquerdo

- Com o @extend Sass diz que um selector deve herdar os estilos de outro selector.

Extends

Dito Learning Talk - Tannus Esquerdo

- Com o @extend Sass diz que um selector deve herdar os estilos de outro selector.

Funções

Dito Learning Talk - Tannus Esquerdo

Functions

Dito Learning Talk - Tannus Esquerdo

- É possível definir suas próprias funções em Sass e usá-los em qualquer contexto valor ou script.

Functions

Dito Learning Talk - Tannus Esquerdo

- É possível definir suas próprias funções em Sass e usá-los em qualquer contexto valor ou script.

Media Queries

Dito Learning Talk - Tannus Esquerdo

@media

Dito Learning Talk - Tannus Esquerdo

- @media directivas em Sass se comportam exatamente como em CSS simples, com uma capacidade extra: eles podem ser aninhados em regras CSS .

@media

Dito Learning Talk - Tannus Esquerdo

- @media directivas em Sass se comportam exatamente como em CSS simples, com uma capacidade extra: eles podem ser aninhados em regras CSS .

Import / Partials

Dito Learning Talk - Tannus Esquerdo

Import / Partials- Sass fará um “merge” com o arquivo CSS principal, para

que você possa inserir um único arquivo CSS no seu Projeto.

Dito Learning Talk - Tannus Esquerdo

Sass Frameworks

Dito Learning Talk - Tannus Esquerdo

Dito Learning Talk - Tannus Esquerdo

Sass Frameworks

Tannus Esquerdo@tannusesquerdo