5
respostas

Erro ao fazer o @include all-sprite-sprites;

Error: Undefined mixin 'all-sprite-sprites'. on line 70 of C:/Users/ferna/Google Drive/CURSOS ALURA/Sass/site-apeperia/css/layouts/planos.scss, in `all-sprite-sprites' from line 70 of C:/Users/ferna/Google Drive/CURSOS ALURA/Sass/site-apeperia/css/layouts/planos.scss from line 12 of C:/Users/ferna/Google Drive/CURSOS ALURA/Sass/site-apeperia/css/estilos.scss

5 respostas

Fala ai Fernando, tudo bem? Você fez as configurações e instalação do Compass conforme mostrado na aula? Parece que ele não está achando o mixin.

Espero ter ajudado.

Fiz sim, normal. Usei o arquivo de mixin normalmente. Achei estranho não ter q inserir nado no arquivo de mixin nessa aula, e sim o @include direto no arquivo planos.scss

Consegue compartilhar o projeto? 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.

Fala ai Fernando, tudo bem? Dei uma olhada no projeto, basicamente os problemas era por conta de ordem de @import.

Dentro do arquivo contato.scss no começo, tive que importar as variáveis e mixins:

@import '../helpers/variaveis';
@import '../helpers/mixins';

...

E por ultimo, no arquivo estilos.scss, tive que importar o sprite no começo também:

@import 'sprite/*.png';

Ambos completos ficam:

// contato.scss
@import '../helpers/variaveis';
@import '../helpers/mixins';

/** Contato **/
.contato input,
.contato button {
  display: block;
}

form {
  margin: 0 auto;
  width: 50%;
  @media #{$mq-mobile}{
  width: auto;
  }
}

.contato input,
textarea {
  width: 100%;
  margin-bottom: .8em;
  padding: 4px 8px;
 @include border-radius(10px);
  border: 2px solid #ccc;
}

.contato button {
  margin: 0 auto;
  background: $cor-padrao;
  border: 0;
  color: $cor-branca;
  width: 210px;
  height: 38px;
  font-size: 1.2em;
  @include border-radius(10px);
  @include box-shadow(black 0 2px 6.65px 0.35px);
}
// estilos.scss
$sprite-spacing: 5px;

@import 'sprite/*.png';

@import 'helpers/variaveis';
@import 'helpers/mixins';

@import 'base/normalize'; 

@import 'layouts/geral';
@import 'layouts/header';
@import 'layouts/destaque';
@import 'layouts/sobre';
@import 'layouts/planos';
@import 'layouts/blog';
@import 'layouts/contato';
@import 'layouts/footer';

Após essas alterações o comando compass compile compilou corretamente os arquivos .scss e gerou os respectivos .css.

Espero ter ajudado.