freeCodeCamp Challenge Guide: Create Reusable CSS with Mixins

freeCodeCamp Community
1

Create Reusable CSS with Mixins

Problem Explanation

Mixin is one of the great features that let developers use SASS instead of plain CSS, as it allows you to have a Function inside your Stylesheet!

To create a mixin you should follow the following scheme:

@mixin custom-mixin-name($param1, $param2, ....) {
    // CSS Properties Here...
}

And to use it in your element(s), you should use @include followed by your Mixin name, as following:

element {
    @include custom-mixin-name(value1, value2, ....);
}

Relevant Links

Hints

Hint 1

Hint goes here

Hint 2

Hint goes here

Solutions

Solution 1 (Click to Show/Hide) 
<style type='text/scss'>
@mixin shape($w, $h, $bg-color) {
  width: $w;
  height: $h;
  background-color: $bg-color;
}

#square {
  @include shape(50px, 50px, red);
}

#rect-a {
  @include shape(100px, 50px, blue);
}

#rect-b {
  @include shape(50px, 100px, orange);
}
</style>

<div id="square"></div>
<div id="rect-a"></div>
<div id="rect-b"></div>

Code Explanation

  • Code explanation goes here

Relevant Links

28 Likes