5. Mixin Facts

#1



Okay I don't think I am doing anything wrong, but I am struggling to get through Sass for some reason. I have tried Firefox, Chrome, and Exploder, but nothing is working for me. If I have something wrong in my code please tell me what it is so that I can fix it. I have tried everything from switching browsers to switching computers to copy-pasting the code directly into the box. I somehow managed to get to the third exercise by a miracle and now nothing is working. One other thing that I have noticed is that nothing has actually moved the word Titanosaur to be on the actual card before I hover over it and then it is backwards. Any clue as to what the deal is?

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


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

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

@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 backface-visibility($visibility: hidden) { // Backface properties
  backface-visibility: $visibility;
  -webkkit-backface-visibility: $visibility;
  -moz-backface-visibility: $visibility;
  -ms-backface-visibility: $visibility;
  -o-backface-visibility: $visibility;
}

@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
.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));
    @include transform-style(preserve-3d);
    @include transition(0.4s);
  }
  
  .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%;
            
      .photo {
        width: 60%;
        margin: 0px auto;
          
      }
    }
  }
}



Replace this line with your code.

#2

Without going over the instructions, my completed exercise has, backface-visibility, transform-style, transition, and, hover-color all below the line, 

//Add your own mixins here

Could it be that order matters? Do some mixin's need to appear before others? Not a rhetorical question, but one that needs to be followed up.

#3

Not sure if the @include transform-style(preserve-3d); and @include transition(0.4s); are meant to be inside the &:hover{ selector. I put them directly within the .notecard{ selector.

This is what I used which allowed me to pass through Chrome:

.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));  
    }
#4

My completed exercise has backface-visibility, transform-style and hover-color under this line but transition right at the top above stripes.

#5

We have hit upon it, thanks to @angelalukic. The latter two includes belong outside of the hover rule, as standalone properties.

#6

I will do that when I get the chance this morning, if I get the chance that is. I was watching the other thread and you said something about prompting for the code. I'd like to say that I have no idea what you are talking about. I have never seen a prompt that says 'here is the correct code' for anything in any exercise that I have done and I've done numerous exercises. I would also like to point out that you are probably right about the exercise being bugged. I tried it on my mac last night and I had no varying results. I still could not pass it for the life of me. Thanks for all the help guys.

#7

Okay I have some time this morning surprisingly. I did what you said and the damned thing still won't work for me. I changed the code that you told me to change and that finally put Titanosaur on the card, but angelalukic's advice did not work for me.

#8

This is what is meant to appear if you click 'Run' enough times and are still getting the incorrect answer:

https://codecademy-discourse.s3.amazonaws.com/original/4X/6/c/4/6c4e7224945511d54c925e8defff28adad6e1480.gif

It wouldn't pop up for me at all on Firefox during this task for some reason when it has done elsewhere.

#9

I have NEVER seen that pop up before and as a reply to your other post in the other thread, I have noticed that it works out that way. I tried to do a few things in firefox to see if it is just firefox. I personally figure that it is firefox that doesn't let it work nicely. I'm guessing that it is a bug in Codecademy programming that makes the exercises hate firefox.

#10

2 posts were split to a new topic: How to fix it?

#11

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