6. List Arguments I cann't get the code


#1



https://www.codecademy.com/en/courses/learn-sass/lessons/mixins-and-parent-selector/exercises/mixins-ii


I keep getting this error:
Did you include the $stripes mixin and pass in a list defining the arguments as to bottom, 15%, blue, white inside of .definition in main.scss?

I have tried to choose to get the code, but then I get an error saying:
Something went wrong.
It's located up where we have "Connected to Codecademy"

Please help, since I cannot find an error in my code and I cannot move on...

My code is:

$stripe-properties: to bottom, 15%, blue, white;

@mixin stripes($direction, $width-percent, $stripe-color, $stripe-background: #FFF) {
  background: repeating-linear-gradient(
    $direction,
    $stripe-background,
    $stripe-background ($width-percent - 1),
    $stripe-color 1%,
    $stripe-background $width-percent
  );
}

@mixin transform($transformation) {
  transform: $transformation;
  -webkit-transform: $transformation;
  -moz-transform: $transformation;
  -ms-transform: $transformation;
  -o-transform: $transformation;  
}

@mixin photo-content {
  object-fit: cover;
}

//Add your own mixins here
@mixin backface-visibility($visibility:hidden) {
  backface-visibility: $visibility;
  -webkit-backface-visibility: $visibility;
  -moz-backface-visibility: $visibility;
  -ms-backface-visibility: $visibility;
  -o-backface-visibility: $visibility;
}

@mixin transform-style($style){
   transform-style: $style;
  -moz-transform-style: $style;
  -o-transform-style: $style;
  -ms-transform-style: $style;
  -webkit-transform-style: $style;
}

@mixin transition($time){
  transition: $time;
  -webkit-transition: $time;
  -moz-transition: $time;
  -o-transition: $time;
}

.notecard {
  width: 300px;
  height: 180px;
  border: 1px solid black;
  display: inline-block;
  margin: 20px;
  font-family: Roboto, sans-serif;
  box-shadow: 1px 1px 2px 2px rgba(0,0,0,.2);
  @include transform-style(preserve-3d);
  @include transition(0.4s);
  
  &:hover{
      @include transform (rotatey(-180deg));  
    }    
  
  .front, .back {
    width: 100%;
    height: 100%;
    position: absolute;
    @include backface-visibility;
  }
  
  .front {
  z-index: 3;
  font-size: 20px;

    .word {
      display: block;
      text-align: center;
      position: relative;
      top: 40%;
    }    
  }
  
  
  .back {
  z-index: 1;
  word-wrap: break-word;
  line-height: 1.6;
  @include transform(rotatey(-180deg));  
    
    .definition {
      width: 100%;
      height: 100%;
       @include stripes($stripe-properties...);
      
      .photo {
        width: 60%;
        margin: 0px auto;
          
      }
    }
  }
}


#2

Update:
I now tried to change browser from Firefox to Safari - and without any change to the code, I could move on.


#4

I have the same problem on Firefox. I cant get the code or move on.
upd: I
ve just tried to pass this lesson in Chromium, and it works with the same code../


#6

@include stripes($stripe-properties...);
you're missing a hyphen


#7

sorry, my fault. I looked the wrong way


#8

I had the same problem, but I finally found the solution. There is one extra } at the end, that doesn't suit in there. If You click the arrow next to the .notecard class, it will minimize the code and then You can see that there is one extra }. Delete it and then press "Run" and it should be working :slight_smile:


#9

Firefox gave same issue, tried Chrome and it worked.


#10

I have the same problem. I contstanly get:

Did you include the $stripes mixin and pass in a list defining the arguments as `to bottom, 15%, blue, white` inside of `.definition` in main.scss?

I tried the tips i found here on the forum i remove the last curly bracket then i get a other error message then i tried other browser wich gives a different error message. whatever i do i can't move on

This is my code of main.scss
I don't see the problem.

$stripe-properties: to bottom, 15%, blue, white;

@mixin stripes($direction, $width-percent, $stripe-color, $stripe-background: #FFF) {
  background: repeating-linear-gradient(
    $direction,
    $stripe-background,
    $stripe-background ($width-percent - 1),
    $stripe-color 1%,
    $stripe-background $width-percent
  );
}

@mixin transform($transformation) {
  transform: $transformation;
  -webkit-transform: $transformation;
  -moz-transform: $transformation;
  -ms-transform: $transformation;
  -o-transform: $transformation;  
}

@mixin photo-content {
  object-fit: cover;
}

//Add your own mixins here
@mixin backface-visibility($visibility:hidden) {
  backface-visibility: $visibility;
  -webkit-backface-visibility: $visibility;
  -moz-backface-visibility: $visibility;
  -ms-backface-visibility: $visibility;
  -o-backface-visibility: $visibility;
}

@mixin transform-style($style){
   transform-style: $style;
  -moz-transform-style: $style;
  -o-transform-style: $style;
  -ms-transform-style: $style;
  -webkit-transform-style: $style;
}

@mixin transition($time){
  transition: $time;
  -webkit-transition: $time;
  -moz-transition: $time;
  -o-transition: $time;
}

.notecard {
  width: 300px;
  height: 180px;
  border: 1px solid black;
  display: inline-block;
  margin: 20px;
  font-family: Roboto, sans-serif;
  box-shadow: 1px 1px 2px 2px rgba(0,0,0,.2);
  @include transform-style(preserve-3d);
  @include transition(0.4s);
  
  &:hover{
      @include transform (rotatey(-180deg));  
    }    
  
  .front, .back {
    width: 100%;
    height: 100%;
    position: absolute;
    @include backface-visibility;
  }
  
  .front {
  z-index: 3;
  font-size: 20px;

    .word {
      display: block;
      text-align: center;
      position: relative;
      top: 40%;
    }    
  }
  
  
  .back {
  z-index: 1;
  word-wrap: break-word;
  line-height: 1.6;
  @include transform(rotatey(-180deg));  
    
    .definition {
      width: 100%;
      height: 100%;
      @include stripes($stripe-properties...);

      .photo {
        width: 60%;
        margin: 0px auto;
      }
    }
  }
}

#11

These are supposed to be expert coders and make such amateurish stuff. Really should think about if I should waste my time here.


#12

Oh come on. I am a little disappointed to I can't move on. But they do a great job here at codecademy giving us beginners courses for learning programming and markup languages for free. We are all people we al make mistakes even experts make mistakes. I was a bit angry to yesterday I understand why you feel this way. I think we should have a little patience will they fix things I hope :slight_smile:


#13

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