Computer Magic Logo
Mixins

Sunday, June 7, 2015

Published by Aristotelis Pitaridis

The mixins are formats that have been defined as a class and can be applied to another class by using parameters. Below we can see an example:

.rounded-corners (@radius: 10px) {
    border-radius: @radius;
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
}

#header {
    .rounded-corners;
}

#footer {
    .rounded-corners(15px);
}

The result of the above code after the compilation is the following:

#header {
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}
#footer {
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
}