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:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

@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; }

The resulting css should look something like this:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107

.zoom-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(1);   -moz-transform: scale(1);   -ms-transform: scale(1);   -o-transform: scale(1);   transform: scale(1); }   .zoom-90 {   -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(0.9);   -moz-transform: scale(0.9);   -ms-transform: scale(0.9);   -o-transform: scale(0.9);   transform: scale(0.9); }   .zoom-80 {   -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(0.8);   -moz-transform: scale(0.8);   -ms-transform: scale(0.8);   -o-transform: scale(0.8);   transform: scale(0.8); }   .zoom-70 {   -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(0.7);   -moz-transform: scale(0.7);   -ms-transform: scale(0.7);   -o-transform: scale(0.7);   transform: scale(0.7); }   .zoom-60 {   -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(0.6);   -moz-transform: scale(0.6);   -ms-transform: scale(0.6);   -o-transform: scale(0.6);   transform: scale(0.6); }   .zoom-50 {   -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(0.5);   -moz-transform: scale(0.5);   -ms-transform: scale(0.5);   -o-transform: scale(0.5);   transform: scale(0.5); }   .zoom-40 {   -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(0.4);   -moz-transform: scale(0.4);   -ms-transform: scale(0.4);   -o-transform: scale(0.4);   transform: scale(0.4); }   .zoom-30 {   -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(0.3);   -moz-transform: scale(0.3);   -ms-transform: scale(0.3);   -o-transform: scale(0.3);   transform: scale(0.3); }   .zoom-20 {   -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(0.2);   -moz-transform: scale(0.2);   -ms-transform: scale(0.2);   -o-transform: scale(0.2);   transform: scale(0.2); }