第5章現場で使える実践Sassテクニック5-1 管理／運用・設計で使えるテクニックSample Code

ネストが深すぎると生じる問題を把握して、バランスを見ながら利用する

1
#wrap {
2
  #wrapInner {
3
    #page {
4
      #contents {
5
        #contentsInner {
6
          #main {
7
            section {
8
              margin-bottom: 50px;
9
              .item {
10
                .image {
11
                  float: left;
12
                }
13
                .text {
14
                  overflow: hidden;
15
                  p {
16
                    margin: 0 0 1em;
17
                  }
18
                }
19
              }
20
            }
21
          }
22
        }
23
      }
24
    }
25
  }
26
}

1
#wrap #wrapInner #page #contents #contentsInner #main section {
2
  margin-bottom: 50px;
3
}
4
#wrap #wrapInner #page #contents #contentsInner #main section .item .image {
5
  float: left;
6
}
7
#wrap #wrapInner #page #contents #contentsInner #main section .item .text {
8
  overflow: hidden;
9
}
10
#wrap #wrapInner #page #contents #contentsInner #main section .item .text p {
11
  margin: 0 0 1em;
12
}

Dart Sassに移行するため@importを@use、@forwardに書き換える

同じ階層でファイルを分割していた場合

1
@import "setting";
2
@import "mixin";
3
@import "reset";
4
@import "module";
5
@import "main";

1
@use "reset";
2
@use "module";
3
@use "main";

1
@use "setting" as *;
2
@use "mixin" as *;
3

4
...（略）...

1
@forward "setting";
2
@forward "mixin";

1
@use "global" as *;
2

3
...（略）...

1
@use "reset";
2
@use "module";
3
@use "main";

1
@forward "setting";
2
@forward "mixin";

1
@use "global" as *;
2

3
...（略）...

複数階層でファイルを分割している場合

1
@use "../global" as *;
2

3
...（略）...

名前空間無しの指定について

1
@use "global";
2

3
.main {
4
  color: global.$color-main;
5
  background: global.$color-bg;
6
  li {
7
    @include global.list-reset;
8
  }
9
}

Migratorを使ってLibSassをDart Sassへ自動変換する

Migratorのインストールと使い方

1
npm install --save-dev sass-migrator

除算演算子（/）をmath.div()関数に変換する

1
npx sass-migrator division style.scss

1
$width: 100% / 3;

1
@use "sass:math";
2

3
$width: math.div(100%, 3);

@importを@use、@forwardに書き換える

1
npx sass-migrator --migrate-deps module style.scss

1
@import "module";
2

3
.test {
4
  width: $width;
5
}

1
@use "module";
2

3
.test {
4
  width: module.$width;
5
}

サイトの基本設定を変数にして一元管理する

1
// ===================================================================
2
// 設定
3
// ===================================================================
4

5
// ================================
6
// 幅関係の設定
7
// ================================
8
  // 全体
9
  $width-base: 1200px;
10

11
  // 最大幅
12
  $width-max: 1200px;
13

14
  // 最小幅
15
  $width-min: 300px;
16

17
  // メインエリアの幅
18
  $width-main: 800px;
19

20
  // サイドバーの幅
21
  $width-side: 360px;
22

23

24
// ================================
25
// フォント関係の設定
26
// ================================
27
  // ベースフォント
28
  $font-base: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", verdana, Sans-Serif;
29

30
  // 明朝
31
  $font-serif: Georgia, YuMincho, "Yu Mincho", 游明朝体, "ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif;
32

33

34
// ================================
35
// 色関係の設定
36
// ================================
37
  // サイトカラー
38
  $color-base: white;
39
  $color-main: #0062b2;
40
  $color-sub: #def1fa;
41

42
  // フォントカラー
43
  $color-font: #000;
44

45
  // リンクカラー
46
  $color-link: #ff8c28;
47
  $color-link_visited: #39f;
48
  $color-link_hover: #cc7020;
49
  $color-link_active: #00f;
50

51
  // ボーダーカラー
52
  $color-border: #d2d2d2;
53

54
// ================================
55
// ブレイクポイント
56
// ================================
57
  $breakpoints: (
58
    sp: "screen and (width < 600px)",
59
    pc: "screen and (width >= 600px)",
60
  );

コメントを活用してコードを分かりやすくする

1
/* ! ========================================
2
※※※※※※※※※※※※※※※※※※※※※※※※※※※
3
この CSS ファイルは Sass から生成されていますので、
4
編集しないようご注意ください。
5
※※※※※※※※※※※※※※※※※※※※※※※※※※※
6
========================================= */

大規模サイトで活用できるmeta.load-css()のネスト

1
#contents p {
2
  margin-bottom: 15px;
3
}

1
#uniqueID p {
2
  margin-bottom: 0;
3
}

1
@use "sass:meta";
2
#uniqueID {
3
  @include meta.load-css("_local.scss");
4
}

1
p {
2
  margin-bottom: 0;
3
}
4
.notes {
5
  font-weight: bold;
6
}

1
.notes {
2
  @at-root .w100 {
3
    width: 100%;
4
  }
5
  &__item {
6
    margin: 10px;
7
  }
8
  .box & {
9
    padding: 0;
10
  }
11
}

1
#uniqueID .w100 {
2
  width: 100%;
3
}
4
#uniqueID .notes__item {
5
  margin: 10px;
6
}
7
#uniqueID .box .notes {
8
  padding: 0;
9
}

SASS 記法も使ってみよう

1
@mixin mgn($value: 10px) {
2
  margin: $value;
3
}
4

5
.list {
6
  @include mgn(5px);
7
  li {
8
    display: inline-block;
9
    a {
10
      font-size: 1.2rem;
11
      color: green;
12
    }
13
  }
14
}

1
=mgn($value: 10px)
2
    margin: $value
3

4
.list
5
    +mgn(5px)
6
    li
7
        display: inline-block
8
        a
9
            font-size: 1.2rem
10
            color: green

&（アンパサンド）を活用してBEM 的な設計を快適に

1
.navigation {
2
  width: 100%;
3
}
4
.navigation__item {
5
  color: #666;
6
}
7
.navigation__item_state_active {
8
  color: #000;
9
}

1
.navigation {
2
  width: 100%;
3
  &__item {
4
    color: #666;
5
    &_state_active {
6
      color: #000;
7
    }
8
  }
9
}

1
.info {
2
  margin-bottom: 50px;
3
}
4
.info__body {
5
  background: #fafafa;
6
  border: 1px solid #aaa;
7
}
8
.info--new .info__body {
9
  border: 1px solid #d75893;
10
}

1
.info {
2
  margin-bottom: 50px;
3
  &__body {
4
    background: #fafafa;
5
    border: 1px solid #aaa;
6
  }
7
  &--new {
8
    .info__body {
9
      border: 1px solid #d75893;
10
    }
11
  }
12
}

1
.info {
2
  margin-bottom: 50px;
3
  &__body {
4
    background: #fafafa;
5
    border: 1px solid #aaa;
6
  }
7
  &--new {
8
    .info {
9
      &__body {
10
        border: 1px solid #d75893;
11
      }
12
    }
13
  }
14
}

1
.info {
2
  $block: &;
3
  margin-bottom: 50px;
4
  &__body {
5
    background: #fafafa;
6
    border: 1px solid #aaa;
7
  }
8
  &--new {
9
    #{$block}__body {
10
      border: 1px solid #d75893;
11
    }
12
  }
13
}

@keyframes をルールセット内に書いて関係性をわかりやすくする

1
.example {
2
  animation: anima-example 0.9s linear 500ms 1;
3

4
  @keyframes anima-example {
5
    0% {
6
      transform: translate(0%, -100%);
7
    }
8
    100% {
9
      transform: translate(0%, 0%);
10
    }
11
  }
12
}

1
.example {
2
  animation: anima-example 0.9s linear 500ms 1;
3
}
4

5
@keyframes anima-example {
6
  0% {
7
    transform: translate(0%, -100%);
8
  }
9
  100% {
10
    transform: translate(0%, 0%);
11
  }
12
}

エクステンドはスコープを決めて利用する

1
.btn {
2
  display: inline-block;
3
  margin-bottom: 15px;
4
  padding: 10px;
5
}
6

7
.btn--blue {
8
  @extend .btn;
9
  background-color: blue;
10
}
11

12
.btn--red {
13
  @extend .btn;
14
  background-color: red;
15
}

1
.local-nav__list {
2
  @extend .btn;
3
  color: black;
4
  background-color: #ccc;
5
}

コントラスト比を計算しWCAGの達成基準かどうかチェックする

1
@use 'sass:math';
2
@use 'sass:color';
3

4
// 相対輝度を計算する関数
5
@function calculate-luminance($color) {
6
  $r: math.div(color.channel($color, "red"), 255);
7
  $g: math.div(color.channel($color, "green"), 255);
8
  $b: math.div(color.channel($color, "blue"), 255);
9

10
  // 計算方法の参考： https://www.w3.org/TR/WCAG22/#dfn-relative-luminance
11
  $r: if($r < 0.04045, math.div($r, 12.92), math.pow(math.div(($r + 0.055), 1.055), 2.4));
12
  $g: if($g < 0.04045, math.div($g, 12.92), math.pow(math.div(($g + 0.055), 1.055), 2.4));
13
  $b: if($b < 0.04045, math.div($b, 12.92), math.pow(math.div(($b + 0.055), 1.055), 2.4));
14
  @return 0.2126 * $r + 0.7152 * $g + 0.0722 * $b;
15
}
16

17
// コントラスト比を計算する関数
18
@function contrast-ratio($color1, $color2) {
19
  $l1: calculate-luminance($color1);
20
  $l2: calculate-luminance($color2);
21
  @if $l1 > $l2 {
22
    // 計算方法の参考： https://www.w3.org/TR/WCAG22/#dfn-contrast-ratio
23
    @return floor-to-2decimals(math.div(($l1 + 0.05), ($l2 + 0.05)));
24
    } @else {
25
    @return floor-to-2decimals(math.div(($l2 + 0.05), ($l1 + 0.05)));
26
  }
27
}
28

29
// コントラスト比がWCAGの達成基準を満たしているかチェックする関数
30
@function success-criterion($contrast) {
31
  @if $contrast >= 7 { @return "AAA"; }
32
  @else if $contrast >= 4.5 { @return "AA";}
33
  @else if $contrast >= 3 { @return "AA (Large Text)"; }
34
  @else { @return "Fail"; }
35
}
36

37
// 小数点以下2桁で切り下げる関数
38
@function floor-to-2decimals($number) {
39
  $factor: 100;
40
  @return math.div(math.floor($number * $factor), $factor);
41
}
42

43
// ミックスインにまとめる
44
@mixin check-contrast($foreground, $background) {
45
  $contrast-ratio: contrast-ratio($foreground, $background);
46
  $accessibility: success-criterion($contrast-ratio);
47
  @debug 'コントラスト比:#{$contrast-ratio} #{$accessibility}';
48
}
49

50
// 使用
51
@include check-contrast(#ffffff, #bf4080); // 出力結果「コントラスト比:4.92 AA」

1
@debug:47
2
コントラスト比:4.92 AA

EditorConfig とstylelint でコーディングルールを統一する

1
root = true //プロジェクトルートであることを示す
2

3
[*] //すべての言語の設定
4
indent_style = space //インデントの種類（spaceかtab）
5
indent_size = 2 //インデントのサイズ
6
end_of_line = lf //改行コード
7
charset = utf-8 //文字コード

stylelint でコードを解析しエラーを表示する

1
npm install --global stylelint

1
{
2
  "rules": {
3
    "indentation": 2, //インデントのサイズ
4
    "string-quotes": "double", //ダブルクォーテーションを指定
5
    "number-leading-zero": "never", //1未満の小数点に0を使わない
6
    "declaration-block-trailing-semicolon": "never", //セミコロン必須
7
    "declaration-colon-space-before": "never", //コロンの前にスペース禁止
8
    "declaration-colon-space-after": "always", //コロンの後にスペース必須
9
  }
10
}

サンプルコード一覧へ

第5章 現場で使える実践Sassテクニック5-1 管理／運用・設計で使えるテクニックSample Code

ネストが深すぎると生じる問題を把握して、バランスを見ながら利用する

Dart Sassに移行するため@importを@use、@forwardに書き換える

同じ階層でファイルを分割していた場合

複数階層でファイルを分割している場合

名前空間無しの指定について

Migratorを使ってLibSassをDart Sassへ自動変換する

Migratorのインストールと使い方

除算演算子（/）をmath.div()関数に変換する

@importを@use、@forwardに書き換える

サイトの基本設定を変数にして一元管理する

コメントを活用してコードを分かりやすくする

大規模サイトで活用できるmeta.load-css()のネスト

SASS 記法も使ってみよう

&（アンパサンド）を活用してBEM 的な設計を快適に

@keyframes をルールセット内に書いて関係性をわかりやすくする

エクステンドはスコープを決めて利用する

コントラスト比を計算しWCAGの達成基準かどうかチェックする

EditorConfig とstylelint でコーディングルールを統一する

stylelint でコードを解析しエラーを表示する

第5章現場で使える実践Sassテクニック5-1 管理／運用・設計で使えるテクニックSample Code