第5章 現場で使える実践Sassテクニック5-4 AIを活用したSassテクニックSample Code

1
#side {
2
  width: 240px;
3
}
4
body.top #side {
5
  width: 300px;
6
}
7
#side ul.bnr {
8
  margin-bottom: 10px;
9
}

1
以下のCSSをSassの機能を活用してSCSS形式に変換してください。
2
...（CSS省略）...

1
about, products, company, contact ...と複数のページが有り、
2
それぞれのページではbody要素にbody-[ページ名] のようなclassを割り振りしています。
3
そのclassを利用して、背景画像を変更するSass（SCSS形式）を
4
each等使って管理しやすいコードを書いてください。

1
Map型を使わずに、シンプルな配列で、ページ名と背景画像は同じパスの場合のコードをお願いします。

1
.body-about {
2
  background-image: url(../img/about-bg.png);
3
}
4
.body-products {
5
  background-image: url(../img/products-bg.png);
6
}
7
.body-company {
8
  background-image: url(../img/company-bg.png);
9
}
10
.body-contact {
11
  background-image: url(../img/contact-bg.png);
12
}

1
.box {
2
  &.-dog {
3
    --keycolor: #81bead;
4
  }
5
  &.-cat {
6
    --keycolor: #819fcd;
7
  }
8
  &.-rabbit {
9
    --keycolor: #e18aad;
10
  }
11
}

1
下記のSassのコードを効率的に書けないでしょうか？
2
...（Sass省略）...

1
@eachなども含めミックスインで管理したいです。
2
その際、ミックスインは、.boxのルールセット内で呼び出して使えるようにしたいです。

1
$marks: (
2
  1: 'mark_1.png',
3
  2: 'mark_2.png',
4
  3: 'mark_3.png',
5
);
6

7
@for $i from 1 through 3 {
8
  .mark-#{$i} {
9
    background-image: url(#{$img_path}/#{$marks[$i]});
10
  }
11
}

1
下記のSassがエラーになってしまいます。具体的にどう修正したら良いでしょうか？
2
...（Sass省略）...

1
$marks: (
2
  'mark_1.png',
3
  'mark_2.png',
4
  'mark_3.png',
5
);
6

7
$img_path: 'path/to/images'; // 画像のパスを指定
8

9
@for $i from 1 through 3 {
10
  .mark-#{$i} {
11
    background-image: url(#{$img_path}/#{nth($marks, $i)});
12
  }
13
}

1
@mixin link-color($normal, $hover) {
2
  color: $normal;
3
  &:hover {
4
    color: $hover;
5
    text-decoration: none;
6
  }
7
}
8

9
a {
10
  @include link-color(#f00, #00f);
11
}

1
以下のSassで書いたミックスインのそれぞれの処理に適切なコメントを付与してください。
2
...（Sass省略）...