Mixing: With mixing you can include or add  “a bunch of properties” from one rule-set into another rule-set.

For Example:

/* Mixing */
.little-box{
    border:2px solid red;
    border-radius:5px;
    font-size:16px;
    margin-bottom:5px;
    padding:5px;
}
.big-box{
    .little-box;
    font-size:32px;
}

Output:

********  PARAMETERS IN MIXINS: **************

Another cool thing mixins can do is receive parameters. In the following example we add an argument for the width and height of our circles, with a default value of 25 pixels.

/* Mixing */
.circle(@size:25px){
    border: 2px solid red;
    border-radius: 100%;
    height: @size;
    width: @size;
    margin: 10px;
    float: left;
}
.small-circle{
   .circle; 
}
.big-circle{
    .circle(50px);
}
Advertisements