educative.io

Educative

Mixin questions mistake?

Hi,

On the quiz “Writing Efficient CSS”, I think there is a mistake for Question 8 and 9.

  1. Which of the following symbol is used to define the mixins?
  • answer: " We use the @ symbol to create @mixins directives in the CSS code that can be reused throughout the website."
  • problem: @mixin is a part of Sass/SCSS and not CSS.
  1. Which of the following directive is used to add the mixin in the CSS code?
  • answer: “The @include directive is used to include a mixin in the CSS code.”
  • problem: @include is a part of Sass/SCSS and not CSS.

At-rules that are available in CSS:
https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule

Thanks!


Type your question above this line.

Course: https://www.educative.io/collection/10370001/4796942564458496
Lesson: https://www.educative.io/collection/page/10370001/4796942564458496/5085479687946240

Hello @Shawn2 ,
You are right about @ is the part of Sass, but the question 8 is how to define mixins in CSS. " A mixin is defined with the @mixin directive."
Same goes for the Question 9 “Which of the following directive is used to add the mixin in the CSS code?”

selector {   

        @include mixin-name;  
 }

Although @mixins and @include are part of Sass, but the question is how to use them in CSS as we can also use them .css

Hi there,
We can define and use “Sass mixin” in plain CSS.

Hi, thanks for the replies, @mixin and @include are ignored by standard CSS. They require a build step using Sass/Scss, for example through a webpack loader or directly through the sass command. The questions and the answers do not mention a preprocessor. They only mention CSS.

Here is an example that when run shows standard CSS ignoring the mixin. If you change from CSS to SCSS then it runs correctly.
https://jsfiddle.net/shawn1/yezuho0r/1/

Hello @Shawn2 ,
You were right. We have updated the quiz.
Thank you for pointing out.
Happy learning.