freeCodeCamp Challenge Guide: Create Reusable CSS with Mixins

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 border-radius($radius){
    -webkit-border-radius:$radius;
    -moz-border-radius:$radius;
    -ms-border-radius:$radius;
    border-radius:$radius;
  }

  #awesome {
    width: 150px;
    height: 150px;
    background-color: green;
    @include border-radius(15px);
  }
</style>

<div id="awesome"></div>

Code Explanation

  • Code explanation goes here

Relevant Links

9 Likes