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


Hint 1

Hint goes here

Hint 2

Hint goes here


Solution 1 (Click to Show/Hide)
<style type='text/scss'>

  @mixin border-radius($radius){

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

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

Code Explanation

  • Code explanation goes here

Relevant Links