scss Generovánícyklůzpole / lists

Posted 2021-05-18

/*! 1 zpusob pres lists a funkci nth */
.success {
  background-image: url(../images/success.png);
}

.error {
  background-image: url(../images/error.png);
}

/* 2 zpusob pomoci tzv. multiple assignment */
.puma-icon {
  background-image: url("/images/puma.png");
}

.sea-slug-icon {
  background-image: url("/images/sea-slug.png");
}

.egret-icon {
  background-image: url("/images/egret.png");
}

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

/*! 1 zpusob pres lists a funkci nth */

$flash_types: (success #d4ffd4), (error #ffd5d1);

@each $flash_def in $flash_types {
    $type: nth($flash_def, 1);
    $colour: nth($flash_def, 2);

    .#{$type} {
        background-image: url(../images/#{$type}.png);
    }
}

/* 2 zpusob pomoci tzv. multiple assignment */
$animals: (puma, black, default),
          (sea-slug, blue, pointer),
          (egret, white, move);

@each $animal, $color, $cursor in $animals {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}