Post on 13-Aug-2015
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
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
Nasted Rules
Dito Learning Talk - Tannus Esquerdo
- Sass permite que regras CSS seja aninhadas uma dentro da outra.
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.
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 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
- 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.
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
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- 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