Entrar Ainda não tem acesso?
8
respostas

Interpolação de variável dando erro no SAS.

Referente ao curso Sass e Compass: Descomplicando o CSS

por Raul Guilherme Demonte Pontes
| 202.8k xp | 39 posts

Olá. Estou fazendo o curso do SASS, e encontrei um problema. Em uma video aula ele faz a interpolação de uma variável para texto, Abaixo o código :

a variavel SCSS

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

CSS

.container {
  width: 940px;
  margin: 0 auto;

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

Mas eu continuo recebendo o erro: Error: Invalid CSS after " @media ": expected media query (e.g. print, screen, print and screen), was "#{$mq-mobile} {" on line 10 of layout/geral.scss from line 5 of estilos.scss

Ele não está fazendo a interpolação da variavel, e não sei porque..

Versão Ruby - ruby 2.4.2p198

Versão Sass - Sass 3.5.2 (Bleeding Edge)

Compass - Compass 1.0.3 (Polaris) .

Alguem pode me dar uma luz? Estou usando o Microsoft Visual Code, mas acho que isso não tem nada ah ver.

8 respostas
por Raul Guilherme Demonte Pontes
| 202.8k xp | 39 posts

é alguma coisa com o SASS... quando mudei para o "Watch" do compass, ele funcionou bem.

por Wanderson Macêdo
| 3964.9k xp | 8086 posts
Instrutor Desenvolvedor

Oi Raul, Tudo bem? Então o problema foi resolvido?

por Raul Guilherme Demonte Pontes
| 202.8k xp | 39 posts

Resolvido não.. contornado.. ele devia ter funcionado pelo SASS, mas só funcionou pelo compass.. e não sei pq..

por Wanderson Macêdo
| 3964.9k xp | 8086 posts
Instrutor Desenvolvedor

Isso é estranho, Que versão do SASS está usando? A mais recente?

Na documentação, mostra que a interpolação é assim mesmo (http://sass-lang.com/documentation/file.SASS_REFERENCE.html#Interpolation_____)

Outra: Que sistema operacional e versão do Ruby está usando?

por Raul Guilherme Demonte Pontes
| 202.8k xp | 39 posts

Versão Ruby - ruby 2.4.2p198

Versão Sass - Sass 3.5.2 (Bleeding Edge)

..

Achei estranho mesmo ele dar esse problema... não consegui descobrir o pq. Compass resolveu.. mas não devia depender dele pra fazer isso.

por Wanderson Macêdo
| 3964.9k xp | 8086 posts
Instrutor Desenvolvedor

Isso pode ser questão do próprio Ruby mesmo, o processo de transpilação é bem complexo ao meu ver. Então pode ser um problema em qualquer parte do processo.

Você não me disse o sistema operacional.

por Raul Guilherme Demonte Pontes
| 202.8k xp | 39 posts

Opa.. .SIstea - windows 10

por Natan Souza
| 2101.7k xp | 3699 posts
Instrutor Product Design Lead

Oi Raul,

Possuo praticamente a mesma infra que voce, porem nao consegui reproduzir o erro. Se voce achar relevante pode subir o codigo no seu Github e me passar o link para eu tentar reproduzi-lo novamente.

Preparei o teste aqui da seguinte forma em um arquivo .scss:

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

.container {
  width: 940px;
  margin: 0 auto;
  background: red;    

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

O Sass ficou "watchando" normalmente:

Daria uma conferida na ordem dos imports no arquivo.scss responsável por isso, pois parece que o Sass nao está achando a media query no momento que ele precisa. O Compass deve tratar esses casos de uma forma mais dinâmica.

Abcs!