https://github.com/rodrigo-dev7/firstsitesass
Pequena demontração de Sass
https://github.com/rodrigo-dev7/firstsitesass
Last synced: 27 days ago
JSON representation
Pequena demontração de Sass
- Host: GitHub
- URL: https://github.com/rodrigo-dev7/firstsitesass
- Owner: Rodrigo-dev7
- Created: 2020-05-14T21:49:54.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2020-05-14T21:52:26.000Z (almost 5 years ago)
- Last Synced: 2025-02-08T08:32:40.019Z (3 months ago)
- Language: CSS
- Size: 10.7 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
https://sass-lang.com/assets/img/logos/logo-b6e1ef6e.svg
# SASS
## ⭐️ Por que?
- [x] Simplificar e Organizar CSS
- [x] Manutenção
- [x] Rapidez e reuso de código
- [x] Maior compatibilidade com múltiplos navegadores
- [x] Programar: Variáveis, Funções, Repetições, IF/Else.
## O que é?
✅ "Syntactically Awesome StyleSheets"
✅ Um pré-processador CSS que irá dar poderes ao nossos estilos.
✅ Compila estrutura de código de `.scss` ou `.sass` para `.css`
## 🏄🏽♂️ Coding
Como usar?
1. OU: Instalar o sass globalmente `npm i -g sass`
2. OU: Instalar extensão no VSCode `live sass compiler`
- [x] Organizar arquivos/pastas
- [x] Importar: `@import`
- [x] Partials: `_name.scss`
- [x] Encadeamento
- [x] Variáveis: `$varname`
- [x] Escopos
- [x] Mixins: `@mixin @include` (agrupamento de declarações que poderão ser reusadas)
- [x] Condicionais: `@if @else if @else`
- [x] Repetições: `@for @each`
- [x] Funções: `ligthen()`
- [x] Herança `@extends`
- [x] Referencing `&:hover`
- [x] Fazer o arquivo ficar menor
# Referencia
📝 Docs
- [Aula Masterclass Rocketseat](https://www.youtube.com/watch?v=BaI8dHUthLA)