Dito Learning Talk - SASS

320 visualizações

Publicada em

Apresentando para o time DITO um pouco mais sobre o SASS.

0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
320
No SlideShare
0
A partir de incorporações
0
Número de incorporações
1
Ações
Compartilhamentos
0
Downloads
1
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Dito Learning Talk - SASS

  1. 1. | Learning Talk Dito Learning Talk - Tannus Esquerdo
  2. 2. CSS with superpowers Dito Learning Talk - Tannus Esquerdo
  3. 3. O que é Sass? Dito Learning Talk - Tannus Esquerdo
  4. 4. 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
  5. 5. ● Sass foi criado por Hampton Catlin em 2006 ● também inventor do Haml e Wikipedia Mobile Dito Learning Talk - Tannus Esquerdo
  6. 6. Sass Command Line and Run gem install sass Dito Learning Talk - Tannus Esquerdo
  7. 7. Porque Sass? Dito Learning Talk - Tannus Esquerdo
  8. 8. Problemas do CSS ● Arquivos Super Longos ● Código repetitivo ● Manutenção difícil ● Arquivos desordenados Dito Learning Talk - Tannus Esquerdo
  9. 9. Porque Sass? ● Sintaxe Simples ● Facilita Manutenção ● Mais fácil utilizar modulariazação ● DRY ● Diversos Plugins Dito Learning Talk - Tannus Esquerdo
  10. 10. Features ● Nested Rules ● Variáveis ● Mixins ● Extends ● Color Palette ● Funções ● Import / Partials ● Media Queries Dito Learning Talk - Tannus Esquerdo
  11. 11. Nested Rules Dito Learning Talk - Tannus Esquerdo
  12. 12. Nasted Rules Dito Learning Talk - Tannus Esquerdo - Sass permite que regras CSS seja aninhadas uma dentro da outra.
  13. 13. Nasted Rules Dito Learning Talk - Tannus Esquerdo
  14. 14. Referencing Parent Selectors: & Dito Learning Talk - Tannus Esquerdo
  15. 15. Nasted Properties Dito Learning Talk - Tannus Esquerdo - Basta escrever o namespace uma vez, o Sass já atribui para cada sub-propriedade dentro do ninho.
  16. 16. Nasted Properties Dito Learning Talk - Tannus Esquerdo - Basta escrever o namespace uma vez, o Sass já atribui para cada sub-propriedade dentro do ninho.
  17. 17. Variáveis Dito Learning Talk - Tannus Esquerdo
  18. 18. Variables Dito Learning Talk - Tannus Esquerdo - Variáveis começam com o sinais de dollar, e são definidas como propriedades CSS .
  19. 19. 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.
  20. 20. Mixins Dito Learning Talk - Tannus Esquerdo
  21. 21. Mixins Dito Learning Talk - Tannus Esquerdo - Mixins permitem definir estilos que podem ser reutilizados em toda a folha de estilo.
  22. 22. 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 .
  23. 23. 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 .
  24. 24. 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 .
  25. 25. 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.
  26. 26. Extends Dito Learning Talk - Tannus Esquerdo
  27. 27. Extends Dito Learning Talk - Tannus Esquerdo - Com o @extend Sass diz que um selector deve herdar os estilos de outro selector.
  28. 28. Extends Dito Learning Talk - Tannus Esquerdo - Com o @extend Sass diz que um selector deve herdar os estilos de outro selector.
  29. 29. Funções Dito Learning Talk - Tannus Esquerdo
  30. 30. 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.
  31. 31. 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.
  32. 32. Media Queries Dito Learning Talk - Tannus Esquerdo
  33. 33. @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 .
  34. 34. @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 .
  35. 35. Import / Partials Dito Learning Talk - Tannus Esquerdo
  36. 36. 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
  37. 37. Sass Frameworks Dito Learning Talk - Tannus Esquerdo
  38. 38. Dito Learning Talk - Tannus Esquerdo Sass Frameworks
  39. 39. Tannus Esquerdo @tannusesquerdo

×