8
respostas

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

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

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

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

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

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?

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.

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.

Opa.. .SIstea - windows 10

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!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software