// .wd* => widh: * × 20px;
@for $i from 1 through 20 {
    .wd#{$i} {
        width: 20px * $i !important;
    }
}

// .wp* => widh: * × 10%;
@for $i from 1 through 10 {
    .wp#{$i} {
        width: 10% * $i;
    }
}

.fr {
    float: right;
}

.fl {
    float: left;
}

.clearfix {
    *zoom: 1;
}

.clearfix:after{
    display: block;
    content: "clear";
    height: 0;
    clear: both;
    overflow: hidden;
    visibility: hidden;
}

.red {
    color: $red-color !important;
}