Dito Learning Talk - SASS
•
0 gostou•357 visualizações
O documento discute as vantagens e recursos do pré-processador Sass para CSS. Sass permite aninhamento de regras, variáveis, mixins, extender seletores e funções para tornar os arquivos CSS mais organizados, reutilizáveis e fáceis de manter.
Mais conteúdo relacionado
Destaque
Dito Learning Talk - SASS
- 1. | Learning Talk Dito Learning Talk - Tannus Esquerdo
- 2. CSS with superpowers Dito Learning Talk - Tannus Esquerdo
- 3. O que é Sass? Dito Learning Talk - Tannus Esquerdo
- 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. ● Sass foi criado por Hampton Catlin em 2006 ● também inventor do Haml e Wikipedia Mobile Dito Learning Talk - Tannus Esquerdo
- 6. Sass Command Line and Run gem install sass Dito Learning Talk - Tannus Esquerdo
- 7. Porque Sass? Dito Learning Talk - Tannus Esquerdo
- 8. Problemas do CSS ● Arquivos Super Longos ● Código repetitivo ● Manutenção difícil ● Arquivos desordenados Dito Learning Talk - Tannus Esquerdo
- 9. Porque Sass? ● Sintaxe Simples ● Facilita Manutenção ● Mais fácil utilizar modulariazação ● DRY ● Diversos Plugins Dito Learning Talk - Tannus Esquerdo
- 10. Features ● Nested Rules ● Variáveis ● Mixins ● Extends ● Color Palette ● Funções ● Import / Partials ● Media Queries Dito Learning Talk - Tannus Esquerdo
- 11. Nested Rules Dito Learning Talk - Tannus Esquerdo
- 12. Nasted Rules Dito Learning Talk - Tannus Esquerdo - Sass permite que regras CSS seja aninhadas uma dentro da outra.
- 13. Nasted Rules Dito Learning Talk - Tannus Esquerdo
- 14. Referencing Parent Selectors: & Dito Learning Talk - Tannus Esquerdo
- 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. 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. Variáveis Dito Learning Talk - Tannus Esquerdo
- 18. Variables Dito Learning Talk - Tannus Esquerdo - Variáveis começam com o sinais de dollar, e são definidas como propriedades CSS .
- 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. Mixins Dito Learning Talk - Tannus Esquerdo
- 21. Mixins Dito Learning Talk - Tannus Esquerdo - Mixins permitem definir estilos que podem ser reutilizados em toda a folha de estilo.
- 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. 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. 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. 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. Extends Dito Learning Talk - Tannus Esquerdo
- 27. Extends Dito Learning Talk - Tannus Esquerdo - Com o @extend Sass diz que um selector deve herdar os estilos de outro selector.
- 28. Extends Dito Learning Talk - Tannus Esquerdo - Com o @extend Sass diz que um selector deve herdar os estilos de outro selector.
- 29. Funções Dito Learning Talk - Tannus Esquerdo
- 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. 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. Media Queries Dito Learning Talk - Tannus Esquerdo
- 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. @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. Import / Partials Dito Learning Talk - Tannus Esquerdo
- 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. Sass Frameworks Dito Learning Talk - Tannus Esquerdo
- 38. Dito Learning Talk - Tannus Esquerdo Sass Frameworks