Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- ...
- .span5 {
- width: 5%;
- }
- .span4 {
- width: 4%;
- }
- .span3 {
- width: 3%;
- }
- .span2 {
- width: 2%;
- }
- .span1 {
- width: 1%;
- }
- @iterations: 5;
- .span-loop (@i) when (@i > 0) {
- .span-@{i} {
- width: ~"@{i}%";
- }
- .span-loop(@i - 1);
- }
- .span-loop (@iterations);
- .span-5 {
- width: 5%;
- }
- .span-4 {
- width: 4%;
- }
- .span-3 {
- width: 3%;
- }
- .span-2 {
- width: 2%;
- }
- .span-1 {
- width: 1%;
- }
- .custom-loop( @base-value:@n ; @n ; @unit : px; @j : 1 ;@_s:0 ; @step-size:1 ; @selector:~".span-"; @property : width)
- when not(@n=0) {
- @size : @base-value+@_s;
- @{selector}@{j}{
- @{property} : ~"@{size}@{unit}";
- }
- .custom-loop(@base-value , (@n - 1), @unit , (@j + 1) , (@_s+@step-size) , @step-size, @selector, @property);
- }
- .custom-loop(@n:3);
- .span-1 {
- width: 3px;
- }
- .span-2 {
- width: 4px;
- }
- .span-3 {
- width: 5px;
- }
- .custom-loop( @n: 3 , @base-value:1, @unit: '%', @property:font-size, @selector: ~".fs-", @step-size: 2);
- .fs-1 {
- font-size: 1%;
- }
- .fs-2 {
- font-size: 3%;
- }
- .fs-3 {
- font-size: 5%;
- }
- @iterations: 100;
- // helper class, will never show up in resulting css
- // will be called as long the index is above 0
- .loopingClass (@index) when (@index > 0) {
- // create the actual css selector, example will result in
- // .myclass_30, .myclass_28, .... , .myclass_1
- (~".span@{index}") {
- // your resulting css
- width: percentage((@index - 1) *0.01);
- }
- // next iteration
- .loopingClass(@index - 1);
- }
- // end the loop when index is 0
- .loopingClass (0) {}
- // "call" the loopingClass the first time with highest value
- .loopingClass (@iterations);
- .loopingClass (@index) when (@index > 0){
- .span_@{index}{
- width: @index px;
- }
- .loopingClass(@index - 1);
- }
- .loopingClass(5);
- .span_100 {
- width: 100 px;
- }
- .span_99 {
- width: 99 px;
- }
- .span_98 {
- width: 98 px;
- }
- .span_97 {
- width: 97 px;
- }
- .span_96 {
- width: 96 px;
- }
- .span_95 {
- width: 95 px;
- }
- and e.t.c.
Add Comment
Please, Sign In to add comment