Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
7
respostas

Utilização de variável com o compass

Referente ao curso Sass e Compass: Descomplicando o CSS, no capítulo Compass e atividade Atualizando placeholders

por Nayara
| 103.8k xp | 16 posts

Assim como foi feito com os media-queries

$media-querie-mobile: "(max-width: 980px)";

Onde foi criada essa variável no arquivo variaveis.scss e depois utilizada:

.destaque {
  background: url(../imagens/destaque.jpg) center bottom repeat-x;
  -webkit-background-size: cover;
  background-size: cover;
  color: white;
  height: 330px;
  padding-top: 10em;

  @media #{$media-querie-mobile} {
    font-size: 14px;
    height: 250px;
  }
}

É possível fazer isso também para o box-shadow que foi importado do compass? Pois, entretanto, é necessário ficar repetindo os valores em todos os locais que será utilizado:

.plano button {
  background: $cor-padrao;
  border: 0;
  color: $cor-branca;
  width: 210px;
  height: 38px;
  font-size: 1.2em;
  @include borda-arredondada;
  @include box-shadow(black 0 2px 10px);
  margin-left: 2em;
}

.contato button {
  margin: 0 auto;
  background: $cor-padrao;
  border: 0;
  color: $cor-branca;
  width: 210px;
  height: 38px;
  font-size: 1.2em;
  @include borda-arredondada;
  @include box-shadow(black 0 2px 10px);
}

.destaque button {
  margin-top: 1em;
  background: $cor-padrao;
  border: 0;
  padding: .6em;
  font-size: 1.2em;
  @include borda-arredondada(50px);
  @include box-shadow(black 0 2px 10px);
  font-weight: bold;
}

Tentei criar a variável:

$sombra-padrao: "box-shadow(black 0 2px 10px);";

E utilizar da seguinte forma (obs: colocando o @import "compass/css3"; lá no arquivo do mixins.scss e apagando o placeholder sombra-padrao que tinha):

@include #{$sombra-padrao};

Mas deu o seguinte erro:

 modified css/layout/destaque.scss
    error css/estilos.scss (Line 38 of css/layout/destaque.scss: Invalid CSS after "  @include ": expected identifier, was "#{$sombra-padrao};") 
modified css/layout/contato.scss
    error css/estilos.scss (Line 38 of css/layout/destaque.scss: Invalid CSS after "  @include ": expected identifier, was "#{$sombra-padrao};")
 modified css/layout/planos.scss
    error css/estilos.scss (Line 38 of css/layout/destaque.scss: Invalid CSS after "  @include ": expected identifier, was "#{$sombra-padrao};")

Tem outra forma de fazer?

7 respostas
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala ai Nayara, tudo bem? O include traballha com mixin e não variaveis.

Tente criar a variável assim:

$sombra-padrao: @include box-shadow(black 0 2px 10px);

E utilizá-la assim:

box-shadow: $sombra-padrao;

Espero ter ajudado.

por Nayara
| 103.8k xp | 16 posts

Tentei criar a variável como você disse, mas deu esse erro:

Error: Invalid CSS after "$sombra-padrao: ": expected expression (e.g. 1px, bold), was "@include box-sh..."
        on line 10 of D:/Documentos/Curso Alura/Sass e Compass/css/helpers/variaveis.scss
        from line 6 of D:/Documentos/Curso Alura/Sass e Compass/css/estilos.scss
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala Nayara, vamos mudar para mixin então, algo assim:

Criando:

@mixin sombra-padrao() {
    box-shadow: @include box-shadow(black 0 2px 10px);
}

Utilizando:

@include sombra-padrao;

Espero ter ajudado.

por Nayara
| 103.8k xp | 16 posts

Essa parte do código, no @include, dá erro também.

@mixin sombra-padrao() {
    box-shadow: @include box-shadow(black 0 2px 10px);
}
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala Nayara, ué, estranho.

Compartilha o projeto comigo, assim eu consigo simular o problema por aqui e analisá-lo com mais calma.

Pode compartilhar através do Github ou Google Drive (zipado).

Fico no aguardo.

por Nayara
| 103.8k xp | 16 posts

https://github.com/NayaraHolanda/Curso-Sass-e-Compass---Alura

solução!
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala Nayara, dei uma olhada no projeto e eu acabei falando errado para você, o mixin deveria ser assim:

@mixin sombra-padrao() {
  @include box-shadow(black 0 2px 10px);
}

Peço desculpas pelo erro e falta de atenção.

Espero ter ajudado.