6/9 List Arguements, not sure what I'm doing wrong


#1



https://www.codecademy.com/courses/learn-sass/lessons/mixins-and-parent-selector/exercises/mixins-ii?action=lesson_resume&link_content_target=interstitial_lesson


I ran my code a few times and received this message "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 already found some mistyped code but I'm still receiving the same message. Can anyone see what I'm missing?


@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-bisibility: $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;
}

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

.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

you spelled properties wrong. not sure this is the only issue though.. I tried running your code (I can not get mine working) and it is still not working.

edit: It might be codecademy.. I've been trying to just get the code when they offer it and each time I click it I get disconnected and my browser freezes.


#3

Thank you so much. That seems to have been the problem.

Thanks for the help!


#4

Hi,

I am having the same problem several weeks now.
And I reported it, with no response so far.


#5

Hi all,

Thank you for posting how you got past this issue. Between, this posting and another to use Opera got me past it. However, it doesn't make sense to me why the "$strip-properties: to bottom, 15%, blue, white;" can be placed outside the @mixin stripes section. Seems to go against the instructions as I understand them. If anyone can explain that, it would be appreciated. Or, it's just a bug in the lesson and it's fixed by improper usage of the @include?

I don't know just asking


#6

Same issue over here... Please help.


#7

I've got the same problem, it doesn't work


#8

Okay, so the code works, it has worked before but it keeps giving the error. I came back again today and it might, MIGHT, be fixed. I was able to move on to exercise 7. I don't know how. the only thing I changed was the typeo pointed out to me earlier. I'm sorry I couldn't be ofany more help at this time.


#9

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