Guest User

Untitled

a guest
May 21st, 2018
89
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.93 KB | None | 0 0
  1. ...
  2. .span5 {
  3. width: 5%;
  4. }
  5.  
  6. .span4 {
  7. width: 4%;
  8. }
  9.  
  10. .span3 {
  11. width: 3%;
  12. }
  13.  
  14. .span2 {
  15. width: 2%;
  16. }
  17.  
  18. .span1 {
  19. width: 1%;
  20. }
  21.  
  22. @iterations: 5;
  23. .span-loop (@i) when (@i > 0) {
  24. .span-@{i} {
  25. width: ~"@{i}%";
  26. }
  27. .span-loop(@i - 1);
  28. }
  29. .span-loop (@iterations);
  30.  
  31. .span-5 {
  32. width: 5%;
  33. }
  34. .span-4 {
  35. width: 4%;
  36. }
  37. .span-3 {
  38. width: 3%;
  39. }
  40. .span-2 {
  41. width: 2%;
  42. }
  43. .span-1 {
  44. width: 1%;
  45. }
  46.  
  47. .custom-loop( @base-value:@n ; @n ; @unit : px; @j : 1 ;@_s:0 ; @step-size:1 ; @selector:~".span-"; @property : width)
  48. when not(@n=0) {
  49.  
  50. @size : @base-value+@_s;
  51. @{selector}@{j}{
  52. @{property} : ~"@{size}@{unit}";
  53. }
  54. .custom-loop(@base-value , (@n - 1), @unit , (@j + 1) , (@_s+@step-size) , @step-size, @selector, @property);
  55. }
  56.  
  57. .custom-loop(@n:3);
  58.  
  59. .span-1 {
  60. width: 3px;
  61. }
  62. .span-2 {
  63. width: 4px;
  64. }
  65. .span-3 {
  66. width: 5px;
  67. }
  68.  
  69. .custom-loop( @n: 3 , @base-value:1, @unit: '%', @property:font-size, @selector: ~".fs-", @step-size: 2);
  70.  
  71. .fs-1 {
  72. font-size: 1%;
  73. }
  74. .fs-2 {
  75. font-size: 3%;
  76. }
  77. .fs-3 {
  78. font-size: 5%;
  79. }
  80.  
  81. @iterations: 100;
  82.  
  83. // helper class, will never show up in resulting css
  84. // will be called as long the index is above 0
  85. .loopingClass (@index) when (@index > 0) {
  86.  
  87. // create the actual css selector, example will result in
  88. // .myclass_30, .myclass_28, .... , .myclass_1
  89. (~".span@{index}") {
  90. // your resulting css
  91. width: percentage((@index - 1) *0.01);
  92. }
  93.  
  94. // next iteration
  95. .loopingClass(@index - 1);
  96. }
  97.  
  98. // end the loop when index is 0
  99. .loopingClass (0) {}
  100.  
  101. // "call" the loopingClass the first time with highest value
  102. .loopingClass (@iterations);
  103.  
  104. .loopingClass (@index) when (@index > 0){
  105. .span_@{index}{
  106. width: @index px;
  107. }
  108. .loopingClass(@index - 1);
  109. }
  110. .loopingClass(5);
  111.  
  112. .span_100 {
  113. width: 100 px;
  114. }
  115. .span_99 {
  116. width: 99 px;
  117. }
  118. .span_98 {
  119. width: 98 px;
  120. }
  121. .span_97 {
  122. width: 97 px;
  123. }
  124. .span_96 {
  125. width: 96 px;
  126. }
  127. .span_95 {
  128. width: 95 px;
  129. }
  130.  
  131. and e.t.c.
Add Comment
Please, Sign In to add comment