FAQ: Mixins and the & Selector - What is a Mixin?

This community-built FAQ covers the “What is a Mixin?” exercise from the lesson “Mixins and the & Selector”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Learn Sass

FAQs on the exercise What is a Mixin?

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

There are a few things I struggle to understand with this exercise, the first is the Note which mentions that hyphens and underscores can be used interchangeably, then shows an example which doesn’t contain any underscores.

Note: Mixin names and all other Sass identifiers use hyphens and underscores interchangeably. The following code:

.notecard {
.front, .back {
    width: 100%;
    height: 100%;
    position: absolute;
 
    @include backface-visibility;
  }
}  
is equivalent to the following CSS:

.notecard .front, .notecard .back {
  width: 100%;
  height: 100%;
  position: absolute;
 
   backface-visibility: hidden;
  -webkit-backface-visibility: hidden; 
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
}

The second part I don’t understand is that before I completed the lesson, the information about the Titanosaur extends outside the box, then when hovered over the text becomes back-to-front and is all inside the box. And at the end of the lesson the exact same output occured.

*** UPDATE ***

Resetting the lesson, an image of a titanosaur appeared along with some stripes on the screen. I believe this lesson may be a little buggy.

I’d appreciate some feedback on anything I’ve just mentioned.

Thanks all.

3 Likes

So I’m not sure if something is wrong on my end or on Codecademy’s, but this exercise doesn’t look right to me…

Am I missing something?

1 Like

It’s buggy. I have the same problem as the 2 people above. However after resetting the exercise, the image appears but most of the code in main.scss disappeared and I can’t get it back. I had to go to the previous exercise and copy and paste it and it still didn’t look right - the image disappeared again. I think this exercise is broken.

2 Likes

The examples in this lesson are not being explained. Just displayed

As previous mentioned; there must be a bug in this exercise. No image, no stripes and so on :slight_smile:

1 Like