Sass Flashcards Preview

New Stack > Sass > Flashcards

Flashcards in Sass Deck (13):
1

O que é Sass

SASS é uma linguagem de extensão ao CSS que dá um controle mais profissional e dinâmico para suas folhas de estilo, utilizado como um framework para compor o design de uma página. O que podemos fazer com Sass

- Criação de variáveis
- Criar classes de maneira hierárquica (Nested)
- Quebrar arquivos em varias partes
- Importar varios arquivos
- Criação de Mixins (Trechos de códigos) reaproveitáveis
- Estender regras criadas em diferentes classes

2

Criação de Variáveis

$cor-padrao:red;

3

Comando e Instalação

-- Instalação --
sudo gem install sass

-- Converter para Css --
sass estilos.scss:estilos.css

-- Fica varrendo atualizações no Sass --
sass estilos.scss --watch estilos.css

4

Mixin

@mixin borda{
-webkit-border-radius: $raio;
border-radius: $raio;
}

5

Mixin com paramentos
@mixin borda($raio: 0.3em)

@mixin borda($raio: 0.3em){
-webkit-border-radius: $raio;
border-radius: $raio;
}

6

Importação css e scss

-- CSS --
@import url("estilos.css");

-- SCSS --
@import 'base/normalize';

7

Importação de Arquivos

@import 'nome-arquivo'

8

PlaceHolder

-- Criando PlaceHolder --
%sombra-padrao {
-webkit-box-shadow: 0.2px 6.65px 0.35px rgba(0, 0, 0, 0.3);
box-shadow: 0.2px 6.65px 0.35px rgba(0, 0, 0, 0.3);
}

**Mas o placeholder não funciona da mesma maneira que um mixin. Atualmente, ele não suporta variáveis.

9

Inserindo PlaceHolder

@extend %sombra-padrao;

Compilado para CSS
.destaque button{
-webkit-box-shadow: 0.2px 6.65px 0.35px rgba(0, 0, 0, 0.3);
box-shadow: 0.2px 6.65px 0.35px rgba(0, 0, 0, 0.3);
}

10

Estendendo a uma classe

-- Sass --
.erro {
background: #f00;
}

.alerta {
border-radius: 3px;
@extend .erro
}

-- Css --
.erro, .alerta {
background: #f00;
}

.alerta {
border-radius: 3px;
}

11

Utilizando Media Queries Internos

header .container{
position: relative;

@media (max-width: 980px) {
position: static
}
}

header {
border-top: 5px solid $cor-padrao;
background: rgba($cor-auxiliar, 0.8);
height: 90px;
width: 100%;
position: absolute;

@media (max-width: 980px) {
height: auto;

h1 {
max-width: 50%;
margin: 0 auto;

img {
max-width: 100%;
margin: .5em auto;
display: block;
} // fim do img
} // fim do h1
} // fim do media querie
} // fim do header

12

Media query como variável

Para concatenar o texto do media query, precisamos usar uma sintaxe diferente, com uma cerquilha (#) e chaves:

-- Arquivo Helpers --
$mq-mobile: "(max-width: 980px)";

-- Arquivo Scss Destino --
.container {
width: 940px;
margin: 0 auto;

@media #{$mq-mobile} {
width: 90%
}
}

13

Combine media queries

Se incomodar muito as media queries repetidas, você pode usar um plugin para o Grunt chamado 'Combine media queries' que as organiza: https://github.com/buildingblocks/grunt-combine-media-queries

Você pode aprender Grunt no curso aqui no Alura mesmo:

https://www.alura.com.br/curso-online-gruntjs