Scssの配列

基本の配列

$nameList : top, about, contact;

@each $name in $nameList{
    .sample-#{$name}{
        background: url("../img/bg_#{$name}.png");
    }
}

.sample-top {
  background: url("../img/bg_top.png"); }

.sample-about {
  background: url("../img/bg_about.png"); }

.sample-contact {
  background: url("../img/bg_contact.png"); }

List型の多次元配列

nth($list, $n)関数を使用します。（指定したリストのうち、n番目にある値を返します。）

$bgList : top red, about blue, contact green;// (top red)(about blue)(contact green)と記述もOK

@each $bg in $bgList{
    .sample-#{nth($bg, 1)}{
        background: url("../img/bg_#{nth($bg, 2)}.png");
    }
}

.sample-top {
  background: url("../img/bg_red.png"); }

.sample-about {
  background: url("../img/bg_blue.png"); }

.sample-contact {
  background: url("../img/bg_green.png"); }

Map型の連想配列

$sns:(
    twitter: red,
    fasebook: blue,
    insta: green,
);

@each $key, $value in $sns{
    .sns_#{$key}{
        background: url("../img/#{$key}.png");
        color: $value;
    }
}

.sns_twitter {
  background: url("../img/twitter.png");
  color: red; }

.sns_fasebook {
  background: url("../img/fasebook.png");
  color: blue; }

.sns_insta {
  background: url("../img/insta.png");
  color: green; }

連想配列で値が複数の時

値はそれぞれシングルクォーテーションで囲む必要があります。そして、nth($list,$n)関数で取得します。

$sns:(
    twitter: 'red' '01.jpg',
    fasebook: 'blue' '02.jpg',
    insta: 'green' '03.png',
);

@each $key, $value in $sns{
    .sns_#{$key}{
        background: url("../img/#{nth($value,2)}.png");
        color: nth($value,1);
    }
}

.sns_twitter {
  background: url("../img/01.jpg.png");
  color: "red"; }

.sns_fasebook {
  background: url("../img/02.jpg.png");
  color: "blue"; }

.sns_insta {
  background: url("../img/03.png.png");
  color: "green"; }

ネストしたMap型の配列

ネストしたMap型の値を取得するにはmap-get関数を使います。

$sns:(
    colors:(
        twitter: red,
        fasebook: blue,
        insta: green,
    ),
    sizes:(
        sm:25%,
        md:50%,
        lg:75%,
    )
);

@each $name, $color in map-get($sns, 'colors'){
    .sns_#{$name}{
        background: url("../img/#{$name}.png");
        color: $color;
    }
}
@each $size, $width in map-get($sns, 'sizes'){
    .#{$size}{
        width: $width;
    }
}

.sns_twitter {
  background: url("../img/twitter.png");
  color: red; }

.sns_fasebook {
  background: url("../img/fasebook.png");
  color: blue; }

.sns_insta {
  background: url("../img/insta.png");
  color: green; }

.sm {
  width: 25%; }

.md {
  width: 50%; }

.lg {
  width: 75%; }