Menu

Showing posts with label Html&CSS. Show all posts
Showing posts with label Html&CSS. Show all posts

Thursday, February 13, 2014

CSS class generator using SASS

Sass give us a lot of flexibility when we are building big web apps. One of my favorite function is to be able to create css classes by using a loop:


@mixin zoom($scale) {
    $scale: $scale / 100;
    -webkit-transform-origin: 50% 0;
    -moz-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    -o-transform-origin: 50% 0;
    transform-origin: 50% 0;
    
    -webkit-transform: scale($scale);
    -moz-transform: scale($scale);
    -ms-transform: scale($scale);
    -o-transform: scale($scale);
    transform: scale($scale);
}

$zoomFactor: 100;
@while $zoomFactor >= 20 {
    .zoom-#{$zoomFactor} {
        @include zoom($zoomFactor);
    }
    $zoomFactor: $zoomFactor - 10;
}