Curso de SASS🌈 de 0 a 100 [08.- Ciclos]

Video: https://youtu.be/8w8F9LDH3eY
programadornovato · Aug 6, 2019 · af28674 · af28674
1 parent 7d545f5
commit af28674
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 17 deletions.
diff --git a/rutaCss/estilo.css b/rutaCss/estilo.css
diff --git a/rutaCss/estilo.css.map b/rutaCss/estilo.css.map
diff --git a/rutaSass/_mixin.scss b/rutaSass/_mixin.scss
@@ -3,14 +3,28 @@
     width: $ancho;
     height: $alto;
 }
-$color:#333;
-$colores:(#333,#666,#888,#aaa);
-#rec1{
-    @include forma(nth($colores,4),300px,50px);
+$colores:(#333,#666,#888);
+
+@for $i from 1 through length($colores) {
+    @debug "Val de i="+$i;
+    #rec#{$i}{
+        @include forma(nth($colores,$i),300px,50px);
+    }        
 }
-#rec2{
-    @include forma($color*2,400px,20px);
-}
-#rec3{
-    @include forma($color*4,100px,50px);
-}
+
+// @each $color in $colores {
+//     $i:index($colores , $color );
+//     #rec#{$i}{
+//         @include forma($color,300px,50px);
+//     }            
+// }
+
+// #rec1{
+//     @include forma(nth($colores,4),300px,50px);
+// }
+// #rec2{
+//     @include forma($color*2,400px,20px);
+// }
+// #rec3{
+//     @include forma($color*4,100px,50px);
+// }