Sass

Question 1

O que é Sass

Answer 1

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

Question 2

Criação de Variáveis

Answer 2

$cor-padrao:red;

Question 3

Comando e Instalação

Answer 3

– 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

Question 4

Mixin

Answer 4

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

Question 5

Mixin com paramentos

@mixin borda($raio: 0.3em)

Answer 5

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

Question 6

Importação css e scss

Answer 6

– CSS –
@import url(“estilos.css”);

– SCSS –
@import ‘base/normalize’;

Question 7

Importação de Arquivos

Answer 7

@import ‘nome-arquivo’

Question 8

PlaceHolder

Answer 8

– 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.

Question 9

Inserindo PlaceHolder

Answer 9

@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);
}

Question 10

Estendendo a uma classe

Answer 10

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

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

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

.alerta {
border-radius: 3px;
}

Question 11

Utilizando Media Queries Internos

Answer 11

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

Question 12

Media query como variável

Answer 12

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%
}
}

Question 13

Combine media queries

Answer 13

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