Atualização da Palestra - Conheça o Sass, mehor amigo do seu CSS - Nayara Felix
•
0 gostou•51 visualizações
O documento apresenta uma introdução ao Sass, ferramenta que permite escrever CSS de forma mais organizada e produtiva através de recursos como variáveis, mixins, importação de arquivos e compilação. É explicado como instalar o Sass, como escrever o primeiro arquivo .scss, como utilizar variáveis, mixins e importar arquivos para manter o código limpo e reutilizável.
Recomendados
Recomendados
Mais conteúdo relacionado
Semelhante a Atualização da Palestra - Conheça o Sass, mehor amigo do seu CSS - Nayara Felix
Semelhante a Atualização da Palestra - Conheça o Sass, mehor amigo do seu CSS - Nayara Felix (20)
Atualização da Palestra - 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/
- 5. O melhor amigo do seu CSS Conheça o
- 6. O QUE É SASS
- 7. CSSSASS
- 8. PORQUE USAR
- 9. ➢ Fácil de escrever. ➢ Reduz a repetição. ➢ Código mais limpo. ➢ Fácil manutenção. ➢ Auxilia na produtividade.
- 11. COMO INSTALAR
- 12. $ sudo apt-get install ruby OU https://rubyinstaller.org/downloads/
- 13. APLICATIVOS LINHA DE COMANDO https://sass-lang.com/install NODE = $ npm install -g sass CHOCOLATEY = $ choco install sass BREW = $ brew install sass/sass/sass ● CodeKit ● Compass.app ● Ghostlab ● Hammer ● Prepros ● LiveReload ● Koala ● Scout-App
- 15. .SASS .SCSS + PARECIDO COM CSSSEM PONTUAÇÃO
- 16. COR PADRÃO DE UM SITE
- 18. VARIÁVEIS
- 19. Nome da variável Valor da variável Cifrão SINTAXE DE UMA VARIÁVEL
- 22. TROCA DA COR PADRÃO
- 25. MIXINS
- 26. Nome do mixin Arroba e mixin SINTAXE DE UM MIXIN SIMPLES
- 27. USANDO UM MIXIN SIMPLES Nome do Mixin Arroba include
- 28. ALTERAÇÃO NO LAYOUT Antes Depois
- 32. CRIANDO MIXIN COM PARÂMETRO Parâmetro
- 35. MIXIN COM VÁRIOS PARÂMETROS Variáveis Valores
- 36. MIXIN COM VALOR PADRÃO NO PARÂMETRO Valor Padrão
- 37. MIXIN COM VALOR PADRÃO NO PARAMETRO Vai retornar o valor padrão do mixin
- 38. LAYOUT DO MENU PRINCIPAL #menu
- 40. ANINHAMENTO
- 43. CUIDADO PARA NÃO PRENDER SEU ESTILO EM UM ESCOPO HTML
- 44. B A G U N Ç A A A A A A :O
- 49. IMPORTANDO ARQUIVO Caminho do Arquivo Arroba Import
- 50. IMPORTANDO ARQUIVOS Caminho dos arquivos separados por vírgula Arroba Import Não precisa adicionar a extensão dos arquivos
- 54. 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
- 55. ITCSS // fontes e variáveis // mixins globais // reset e normalize // título e parágrafo // páginas // galeria de imagens // classes específicas
- 56. IT’S MAGIC !
- 57. COMPILAR O SASS $ sass nome-arq.scss:nome-arq.css
- 59. ASSISTIR O SASS $ sass --watch nome-arq.scss:nome-arq.css
- 61. CSS MINIFICADO $ sass --watch nome-arq.scss:nome-arq.css --style compressed
- 62. CSS MINIFICADO
- 64. BÔNUS
- 65. ➢ Alteração de cores com as funções lighten e darken; ➢ Evitar repetições com placeholder; ➢ Construção de media queries com a função @media (); ➢ Realizar operações matemáticas direto no valor; ➢ Criar e utilizar novas funções;
- 67. MUITO OBRIGADA