scss Sass Loops（scss）。 for循环，每个循环和有用的例子。

Posted 2021-05-18

//-------------------
// foor loop colors
//-------------------
$amarillo:          #fdb913;
$verde:             #0db14b;
$rojo:              #ed1a3b;
$naranja:           #f07e0c;
$morado:            #6b1aed;

$social-colours:    $verde,
                    $amarillo,
                    $naranja,
                    $rojo,
                    $morado;

// limited
@for $i from 1 through 5 {
    li:nth-child(#{$i}) a:hover {
      background: nth($social-colours, $i);
    }
}

//  infinite
@for $i from 1 through length($card-colours) {
  li:nth-child(#{length($card-colours)}n+#{$i}) {
    background: nth($card-colours, $i);
  }
}

//-------------------
// Sociall media name and color
//-------------------
$twitter:           #00aced;
$facebook:          #3b5998;
$youtube:           #bb0000;

$social:            (twitter,   $twitter),
                    (facebook,  $facebook),
                    (youtube,   $youtube);

@each $socialnetwork, $color in $social {
  .social-link--#{$socialnetwork} {
    background-color: $color;
    &:focus, 
    &:hover {
      background-color: darken($color,5%);
    }    
  }
}


// from list
$sizes: (
  sm: $sm,
  md: $md,
  lg: $lg
);

@each $name, $value in $sizes {
  .padding-top-#{$name} {
    @include padding($top: $value);
  }
}


//-------------------
// Animation Delay
//-------------------
@mixin prefix($property, $value, $prefixes: ()) {
	@each $prefix in $prefixes {
		-#{$prefix}-#{$property}: $value;
	}

	#{$property}: $value;
}
li {
  @for $i from 1 through 5 {
    &:nth-child(#{$i}) .simbolo {
      @include prefix(animation-delay, #{$i * .1s}, 'webkit');
    }
  }
}


//-------------------
// Sprites
//-------------------
$icons-activities: food,
                   snorkel,
                   binoculars,
                   boat,
                   tequila,
                   piramid,
                   swimm,
                   catamaran,
                   shell,
                   reef,
                   moto,
                   submarine,
                   dolphin;

  @each $icon in $icons-activities {
    $offset-x: -(index($icons-activities, $icon) - 1) * 47px;
    $offset-y: -47px;
    .icon__activities--#{$icon} {
      display: inline-block;
      height: 47px;
      width: 47px;
      background: url("../images/destinations/sprite__destinations.png") no-repeat 0 0 transparent;
      background-position: $offset-x 0;
    }
  }