I would be fine with it being more explicit. Not sure if it is really needed but it wouldn't hurt.

As an aside, using vendor prefixing to teach Mixins isn't a bad idea but the challenge just hasn't aged well. New features are now hidden behind feature flags and the standards have moved away from vendor prefixing. The box-shadow example seems very outdated.

https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix

Hey @lasjorg, thanks for sharing the article. After reading the article which you have shared, I can think of the following options:

• Get rid of vendor prefixing from this challenge ( since the main focus of this challenge is to educate the users about Mixins ) and create a separate challenge to teach users about vendor prefixing.
• Get rid of the box-shadow property in this challenge and instead, use such a CSS property in the example, which requires vendor prefixing ( came across an article that lists some CSS properties that require vendor prefixing as of 2021 )

Let me know what you think about it.

I wouldn't mind if this was rewritten but everything except parts of the challenge text would need to be changed (the challenge text, the example, the seed code, the requirements, the tests).

Motivation for rewriting the challenge:

1. The challenge is introducing an unnecessary topic of vendor prefixing.

2. The information about vendor prefixing is out of date.

Suggestion:

Give a simple example in the challenge text. The mixin will take a font size and a bottom margin, it will reset all other margins.

@mixin prose($font-size, $spacing) {
  font-size: $font-size;
  margin: 0;
  margin-block-end: $spacing;
}

p {
  @include prose(1.2rem, 1rem);
}

Seed code, in plain CSS to help make the challenge less copy-pasty.

<style type='text/scss'>
#square {
  width: 50px;
  height: 50px;
  background-color: red;
}
</style>

<div id="square"></div>

Solution/requirements

<style type='text/scss'>
@mixin shape($w, $h, $color) {
  width: $w;
  height: $h;
  background-color: $color;
}

#square {
  @include shape(50px, 50px, red);
}
</style>

<div id="square"></div>

Thanks for the suggestion @lasjorg, I'm happy to work on this issue. I will make a PR for this issue shortly, cheers 💫 !

You may want to wait with the PR until we get more consensus.

You can start working on it but I can't guarantee that it will be approved if others disagree with the change.

Thanks for letting me know @lasjorg, if that's the case, then I will wait and see what others think about the suggested change.

Let's go ahead and open this up, following lasjorg's suggestion above to rewrite the challenge.

The entire front-end libraries certification is pretty outdated, and next on our roadmap for a complete overhaul. But this is a pretty low-hanging fruit to hit now.

Hi there, first of all I just want to thank you for the opportunity. This is my first time contributing and I decided to have a go at this issue and this is my attempt: Link to a branch of my forked repo

As per @lasjorg's suggestions, I removed any references to vendor prefixing as they are unnecessary and outdated.

In this rewrite, I kept the general structure of the challenge text but modified to suit the new example code. However, I didn't use the @mixin prose example given by @lasjorg as I think it'll be better to build on the previous challenges. So I did my own simple example about individual styles on headings, which is covered in previous challenges.

As for the task itself, I used @lasjorg's suggestion with some add-ons.

Tagging @naomi-lgbt for visibility.

Thank you! :)

Please open a pull request if you'd like your changes reviewed.

Oh right, I have opened a pull request however, I haven't tested the new code at all.

Could someone point me to a guide on how to do that?

Hi, I've opened a new PR because I messed up my commit history and the previous PR got closed.

Very sorry for the inconveniences, please let me know if there's anything I need to fix.

Thank you!