Change:
# --description-- <del> In Sass, a <dfn>mixin</dfn> is a group of CSS declarations that can be reused throughout the style sheet. Newer CSS features take time before they are fully adopted and ready to use in all browsers. As features are added to browsers, CSS rules using them may need vendor prefixes. Consider `box-shadow`: </del> <ins> In Sass, a <dfn>mixin</dfn> is a group of CSS declarations that can be reused throughout the style sheet. The definition starts with the `@mixin` at-rule, followed by a custom name. You apply the mixin using the `@include` at-rule. </ins> ```scss <del> div { -webkit-box-shadow: 0px 0px 4px #fff; -moz-box-shadow: 0px 0px 4px #fff; -ms-box-shadow: 0px 0px 4px #fff; box-shadow: 0px 0px 4px #fff; </del> <ins> @mixin reset-list { margin: 0; padding: 0; list-style: none; } nav ul { @include reset-list; } ``` Compiles to: ```css nav ul { margin: 0; padding: 0; list-style: none; </ins> } ``` <del> It's a lot of typing to re-write this rule for all the elements that have a `box-shadow`, or to change each value to test different effects. Mixins are like functions for CSS. Here is how to write one: </del> <ins> Your mixins can also take arguments, which allows their behavior to be customized. The arguments are required when using the mixin. </ins> ```scss <del> @mixin box-shadow($x, $y, $blur, $c){ -webkit-box-shadow: $x $y $blur $c; -moz-box-shadow: $x $y $blur $c; -ms-box-shadow: $x $y $blur $c; box-shadow: $x $y $blur $c; </del> <ins> @mixin prose($font-size, $spacing) { font-size: $font-size; margin: 0; margin-block-end: $spacing; } p { @include prose(1.25rem, 1rem); } h2 { @include prose(2.4rem, 1.5rem); </ins> } ``` <del> The definition starts with `@mixin` followed by a custom name. The parameters (the `$x`, `$y`, `$blur`, and `$c` in the example above) are optional. Now any time a `box-shadow` rule is needed, only a single line calling the mixin replaces having to type all the vendor prefixes. A mixin is called with the `@include` directive: </del> <ins> You can make arguments optional by giving the parameters default values. </ins> ```scss <del> div { @include box-shadow(0px, 0px, 4px, #fff); </del> <ins> @mixin text-color($color: black) { color: $color; } p { @include text-color(); /* color: black */ } nav a { @include text-color(orange); </ins> } ``` # --instructions-- <del> Write a mixin for `border-radius` and give it a `$radius` parameter. It should use all the vendor prefixes from the example. Then use the `border-radius` mixin to give the `#awesome` element a border radius of `15px`. </del> <ins> Write a mixin named `shape` and give it 3 parameters: `$w`, `$h`, and `$bg-color`. Use the `shape` mixin to give the `#square` element a width and height of `50px`, and the color `red`. For the `#rect-a` element add a width of `100px`, a height of `50px`, and the color `blue`. Finally, for the `#rect-b` element add a width of `50px`, a height of `100px`, and the color `orange`. </ins> # --hints-- <del> Your code should declare a mixin named `border-radius` which has a parameter named `$radius`. </del> <ins> You should declare a mixin named `shape` with 3 parameters: `$w`, `$h`, and `$bg-color`. </ins> ```js <del> assert(code.match(/@mixins+?border-radiuss*?(s*?$radiuss*?)s*?{/gi)); </del> <ins> assert.match(code, /@mixins+shapes*(s*$w,s*$h,s*$bg-colors*)s*{/gi); </ins> ``` <del> Your code should include the `-webkit-border-radius` vendor prefix that uses the `$radius` parameter. </del> <ins> Your mixin should include a `width` property that uses the `$w` parameter. </ins> ```js <del> assert( __helpers.removeWhiteSpace(code).match(/-webkit-border-radius:$radius;/gi) ); </del> <ins> assert.match(__helpers.removeWhiteSpace(code), /width:$w;/gi); </ins> ``` <del> Your code should include the `-moz-border-radius` vendor prefix that uses the `$radius` parameter. </del> <ins> Your mixin should include a `height` property that uses the `$h` parameter. </ins> ```js <del> assert( __helpers.removeWhiteSpace(code).match(/-moz-border-radius:$radius;/gi) ); </del> <ins> assert.match(__helpers.removeWhiteSpace(code), /height:$h;/gi); </ins> ``` <del> Your code should include the `-ms-border-radius` vendor prefix that uses the `$radius` parameter. </del> <ins> Your mixin should include a `background-color` property that uses the `$bg-color` parameter. </ins> ```js <del> assert(__helpers.removeWhiteSpace(code).match(/-ms-border-radius:$radius;/gi)); </del> <ins> assert.match(__helpers.removeWhiteSpace(code), /background-color:$bg-color;/gi); </ins> ``` <del> Your code should include the general `border-radius` rule that uses the `$radius` parameter. </del> <ins> You should replace the styles inside the `#square` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width and height of `50px`, and the color `red`. </ins> ```js <del> assert( __helpers.removeWhiteSpace(code).match(/border-radius:$radius;/gi).length == 4 ); </del> <ins> assert.match(code, /#squares*{s*@includes+shape(s*50px,s*50px,s*reds*)s*;s*}/gi); </ins> ``` <del> Your code should call the `border-radius mixin` using the `@include` keyword, setting it to `15px`. </del> <ins> You should replace the styles inside the `#rect-a` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `100px`, a height of `50px`, and the color `blue`. </ins> ```js <del> assert(code.match(/@includes+?border-radius(s*?15pxs*?)s*;/gi)); </del> <ins> assert.match(code, /#rect-as*{s*@includes+shape(s*100px,s*50px,s*blues*)s*;s*}/gi); ``` You should replace the styles inside the `#rect-b` selector with a call to the `shape` mixin using the `@include` keyword. Setting a width of `50px`, a height of `100px`, and the color `orange`. ```js assert.match(code, /#rect-bs*{s*@includes+shape(s*50px,s*100px,s*oranges*)s*;s*}/gi); </ins> ``` # --seed--

Discussion:
Currently, the instructions within the module happen to be as follows: Newer CSS features take time before they are fully adopted and ready to use in all browsers. As features are to browsers, CSS rules using them may need vendor prefixes. Consider : For the sake of clarity, the above instructions should also explicitly point out which bits within the given code snippet are vendor prefixes, instead of just simply mentioning the word vendor prefixes within the instructions and expecting the users to figure out themselves as in which parts within the given code snippet are vendor prefixes. The instructions within the module should be as follows: Newer CSS features take time before they are fully adopted and ready to use in all browsers. As features are to browsers, CSS rules using them may need vendor prefixes ( , , etc ). Consider the property below: <img width="522" alt="image" src="https://user-"- Device: Laptop OS: macOS 13.0.1 Browser: Google Chrome Version: 107.0.5304.110 Would love to get some feedback from other members before I proceed ahead with making a PR for this issue. Thanks !
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.
Hey 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 property in this challenge and instead, use such a CSS property in the example, which requires vendor prefixing ( came across an 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: challenge is introducing an unnecessary topic of vendor prefixing. 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. Seed code, in plain CSS to help make the challenge less copy-pasty. Solution/requirements
Thanks for the suggestion 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 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: As per 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 example given by 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 suggestion with some add-ons. Tagging 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!