Stuck at @include stripes($stripe-properties...);


#1



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


I've entered the code correctly and even copied someones completed code into the sass file and I keep getting the following 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?

My version of code added below:

$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 {
      @include stripes($stripe-properties...);
      width: 100%;
      height: 100%;
            
      .photo {
        width: 60%;
        margin: 0px auto;
      }
    }
  }
}

Help would be greatly appreciated!


#2

Nothing is learned by this. Either by us or by you. Start over and concentrate on the instructions. We can get through this. Others have. So we are confident you will too.


#3

A post was split to a new topic: Did you include the $stripes mixin and pass in a list defining the arguments


#4

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