2. What is a Mixin?: backface-visibility not working

#1



https://www.codecademy.com/en/courses/learn-sass/lessons/mixins-and-parent-selector/exercises/mixins?action=resume


As far as I can tell, I've followed the instructions exactly. I am receiving a persistent error message:

"Did you assign backface visibility to .front in main.scss?"

I have copied the mixin code directly from the instructions and added it below the "Add your own mixins here" comment:

@mixin backface-visibility {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
}

I have included that mixin inside the joint ".front, .back" selector, as instructed:

.front, .back {
    width: 100%;
    height: 100%;
    position: absolute;
    @include backface-visibility;
  }

So I don't know how to respond to the error message except to say to myself, "Yes, I did assign backface visibility to .front in main.scss." But obviously the interpreter doesn't hear me.

Can you help me address this error message? I can't get past the exercise, and so I'm stalled out on the entire course. My complete code is embedded below.


@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 {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
}

.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);
  
  &: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;
    
    .definition {
      width: 100%;
      height: 100%;
            
      .photo {
        width: 60%;
        margin: 0px auto;
          
      }
    }
  }
}

#2

here is what i've do,e

#3

sorry here is what i'vre done and it worked for me
hope it'll be helpfull

//Add your own mixins here
@mixin transition($time){
transition: $time;
-webkit-transition: $time;
-moz-transition: $time;
-o-transition: $time;
}

@mixin backface-visibility ($visibility:hidden){
backface-visibility: $visibility;
-webkit-backface-visibility: $visibility;
-moz-backface-visibility: $visibility;
-ms-backface-visibility: $visibility;
-o-backface-visibility: $visibility;
}

.notecard { &:hover{
@include transform (rotatey(-180deg));
}

@include transform-style(preserve-3d);
@include transition (0.4s);

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);

.front, .back {
width: 100%;
height: 100%;
position: absolute;

@include backface-visibility;
}

#4

I see that a few of the older topics on this same issue include that param ($visibility: hidden) in their mixin, and assign it to all the properties that way. I've copied and pasted directly from the instructions, which seem to have been updated from that format.

Since so many other folks have coded it that way, I tried it as well, but it hasn't changed anything for me.

Thanks for the suggestion.

#5

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