5. Mixin Facts

[cactusking0]

<PLEASE USE THE FOLLOWING TEMPLATE TO HELP YOU CREATE A GREAT POST!>

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?
<Below this line, add a link to the EXACT exercise that you are stuck at.>
https://www.codecademy.com/en/courses/learn-sass/lessons/mixins-and-parent-selector/exercises/multiple-arguments?action=lesson_resume

<In what way does your code behave incorrectly? Include ALL error messages.>

``` @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.

<do not remove the three backticks above>

[mtf]

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.

[angelalukic]

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

[angelalukic]

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

[mtf]

&:hover{
@include transform
(rotatey(-180deg));
@include transform-style(preserve-3d);
@include transition(0.4s);
}

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

[cactusking0]

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.

[cactusking0]

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.

[angelalukic]

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

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

[cactusking0]

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.