Conheça o Sass, mehor amigo do seu CSS - Nayara Felix
•
1 gostou•123 visualizações
Conheça o Sass, mehor amigo do seu CSS - Nayara Felix A repetição de código e a difícil manutenção das folhas de estilo são alguns dos problemas vividos por quem desenvolve para a web. Foi para suprir essas deficiências que o pré processador mais utilizado atualmente nasceu. Nessa palestra vou te mostrar algumas das muitas vantagens que o SASS oferece para o desenvolvimento web. Quem é Nayara Felix? Entusiasta e desenvolvedora front end, sou desenvolvedora magento na FCamara, me formando em sistemas para internet na FIAP e fã incondicional de Harry Potter. Trabalhei com marketing digital, design e fotografia por alguns anos mas minha paixão sempre foram os códigos.
Recomendados
Recomendados
Mais conteúdo relacionado
Mais procurados
Semelhante a Conheça o Sass, mehor amigo do seu CSS - Nayara Felix
Semelhante a Conheça o Sass, mehor amigo do seu CSS - Nayara Felix (20)
Conheça o Sass, mehor amigo do seu CSS - Nayara Felix
- 1. Conheça o O melhor amigo do seu CSS
- 2. Manutenção + de 8 mil linhas
- 3. Seletores G I G A N T E S
- 4. NAYARA FELIX Estou me formando em Sistemas para Internet na FIAP. Trabalhei com marketing digital, design e fotografia por alguns anos, mas minha paixão sempre foram os códigos. Desenvolvedora Front End Magento na FCamara /nayarafelix/ /nayara302
- 5. O melhor amigo do seu CSS Conheça o
- 6. O QUE É SASS
- 7. LARANJAS ESPREMEDOR DE FRUTAS SUCO DE LARANJA PRÉ PROCESSADORES
- 8. CSSSASS
- 9. PORQUE USAR
- 10. Fácil de escrever. Reduz a repetição. Código mais limpo. Fácil manutenção. Auxilia na produtividade.
- 12. COMO INSTALAR
- 13. $ sudo apt-get install ruby OU https://rubyinstaller.org/downloads/
- 14. APLICATIVOS LINHA DE COMANDO https://sass-lang.com/install
- 16. H O M E G A L E R I A C O N T A T O LISTA DE LINKS COM HOVER
- 17. SELETORES CSS
- 23. Não prenda seu estilo no escopo do HTML!
- 24. ANINHAMENTO SCSS Todos os links do site com o mesmo estilo.
- 25. ANINHAMENTO SCSS
- 26. COR PADRÃO DE UM SITE Início ContatoFotografias Pesquisa Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores inventore labore facilis, deleniti minus ullam ad nostrum itaque voluptatem alias delectus quod quisquam deserunt molestiae provident, recusandae accusamus nobis.
- 28. Nome da variável Valor da variável Cifrão CRIANDOUMAVARIÁVEL
- 31. OPERADORES SCSS
- 32. OPERADORES SCSS + - * / soma subtração divisão multiplicação
- 33. OPERADORES SCSS
- 34. REPETIÇÃO DE ESTILO Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores inventore labore facilis, deleniti minus ullam nostrum itaque voluptatem alias delectus quod. INTRODUÇÃO GALERIA DE FOTOS
- 37. CRIANDOUMMIXIN SCSSNome do mixin Propriedade CSS Arroba e mixin Valor da propriedade
- 38. CRIANDOUMMIXIN
- 39. COMOUSARUMMIXIN SCSS Nome do Mixin Arroba Include Meu Seletor
- 40. COMOUSARUMMIXIN SCSS Depois de compilado . . .
- 45. MIXINCOMVALORPADRÃO SCSS Traz o valor padrão definido no mixin
- 46. B A G U N Ç A A A A A A :O
- 48. IMPORT CSS
- 49. IMPORT CSS
- 56. ESTRUTURADEPASTAS sass /abstracts/ / base/ /components/ /layout/ /pages/ /themes/ /utils/ /vendors/ main.scss GUIDELINE// variaveis.scss // reset.scss // botões.scss // header.scss // contato.scss // admin.scss // mixins.scss // bootstrap.scss
- 57. ESTRUTURADEPASTAS ITCSS // fontes e variáveis // mixins globais // reset e normalize // título e parágrafo // páginas // galeria de imagens // classes específicas
- 58. IT’S MAGIC !
- 59. COMPILAR O SASS $ sass nome-arq.scss:nome-arq.css
- 61. ASSISTIR O SASS $ sass --watch nome-arq.scss:nome-arq.css
- 63. CSS MINIFICADO $ sass --watch nome-arq.scss:nome-arq.css --style compressed
- 64. CSS INLINE
- 65. STYLE .CSS
- 71. MUITO OBRIGADA