@import “helper/variables”

#1

Hi!

Here is a problem relatiing wirh @import (partials):

  1. My code:

@import "helper/variables";
@import url(https://fonts.googleapis.com/css?family=Pacifico);
@import "helper/placeholders";
@import "helper/mixins";

h1 {
  font-family: Roboto, sans-serif;
  @include center;
}

.banner {
  font-family: 'Pacifico', cursive;
  height: 400px;
  
  border: {
    top: $border;
    bottom: $border;
  } 

  .slogan {
    background-color: $translucent-white;
    border: 4px solid black;
    top: 200px;
    left: 25%;
    line-height: 200px;
    @include dimensions(50%, 200px);

    span {
      @include center;
      width: 40%;
      left: 30%;
    }
  }
}

.container {
  font-family: 'Pacifico', cursive;

  .icon {
    display: inline-block;
    margin: 2%;
    border: $border;
    @include dimensions(300px, 300px);
  }
}

  1. Error: "Did you import the variables in main.scss?"

  2. URL : https://www.codecademy.com/en/courses/learn-sass/lessons/sustainable-scss/exercises/partials?action=resume

Hope you can help find a solution.

@import "helper/variables"
#2

The only problem I'm seeing are the two lines which use:

@include center;

@include is used for mixins, but center in this case is actually a placeholder (look in the _placeholders.scss and _mixins.scss files to double check). The correct syntax for placeholders is:

@extend %placeholderName;

#3

I have the same issue and @include center is part of the code that we are originally given to work with. I am unable to resolve it by commenting out the @include center.

Is there any other way to resolve this?

#4

There is a bug in the code that the problem generates where it is checking for the next step in this one. The code below was generated for a bug in the next question posted in this forum by another user and copy and pasting it solves the problem.

Based off the admin reply below and what I can view here the difference is something that is not being asked for in the problem and could cause alot of problems for new users. And should be fixed soon. In the meantime try pasting this. 

@import url(https://fonts.googleapis.com/css?family=Pacifico); //CSS import
@import "helper/placeholders";
@import "helper/mixins";
@import "helper/variables";

.absolute{
      position: absolute
    }

h1 {
  font-family: Roboto, sans-serif;
}

.banner {
  font-family: 'Pacifico', cursive;
  height: 400px;
  background-image: url($lemonade-banner);
  border: {
    top: $border;
    bottom: $border;
  } 

  .slogan {
    background-color: $translucent-white;
    border: 4px solid black;
    top: 200px;
    left: 25%;
    line-height: 200px;
    @include dimensions
      (50%,200px);
    @extend .absolute;

    
    
    span {
      width: 40%;
      left: 30%;
      @extend .absolute;
    }
  }
}

.container {
  font-family: 'Pacifico', cursive;

  .icon {
    display: inline-block;
    margin: 2%;
    border: $border;
    @include dimensions(300px, 300px);
  }
}
#5

I am running into the same problem. Even if I paste the above code it still fails. I am unable to reset the code as code academy complains about an unknown problem.

Thanks,
Dennis

#6

That's weird the code I cut and pasted works for me. I'm sorry that it doesn't resolve your problem.

#7

I was using Safari but I used chrome and now if works properly.

#8

I am using chrome, and a common first step for me when stuff doesn't work is to hop over to firefox and try resubmission. I'm glad it worked out with chrome. I'd recommend always using it as a solid backup.

#9

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.