第5章現場で使える実践Sassテクニック

5-1 管理 / 運用・設計で使えるテクニック

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

#wrap {
    #wrapInner {
        #page {
            #contents {
                #contentsInner {
                    #main {
                        section {
                            margin-bottom: 50px;
                            .item {
                                .image {
                                    float: left;
                                }
                                .text {
                                    overflow: hidden;
                                    p {
                                        margin: 0 0 1em;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

#wrap #wrapInner #page #contents #contentsInner #main section {
  margin-bottom: 50px;
}
#wrap #wrapInner #page #contents #contentsInner #main section .item .image {
  float: left;
}
#wrap #wrapInner #page #contents #contentsInner #main section .item .text {
  overflow: hidden;
}
#wrap #wrapInner #page #contents #contentsInner #main section .item .text p {
  margin: 0 0 1em;
}

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

@charset "UTF-8";
// ===================================================================
// 設定
// ===================================================================

// ================================
// 幅関係の設定
// ================================
    // 全体
    $width-base: 1200px;

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

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

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

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


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

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


// ================================
// 色関係の設定
// ================================
    // サイトカラー
    $color-base: white;
    $color-main: #0062b2;
    $color-sub: #def1fa;

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

    // リンクカラー
    $color-link: #ff8c28;
    $color-link_visited: #39f;
    $color-link_hover: #cc7020;
    $color-link_active: #00f;

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

// ================================
// ブレイクポイント
// ================================
    $breakpoints: (
        sp: "screen and (max-width:599px)",
        pc: "screen and (min-width:600px)",
    );

複数人で制作する場合は、各自のSass ファイルを用意する

// 制作者用のSassファイルをインポート
@import "_hirasawa";
@import "_morita";

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

@charset "UTF-8";
// ----------------------------------------------------
// style guide
// 基本的な考えは、FLOCSS( https://github.com/hiloki/flocss )ベース。
// 
// #命名規則
// BEMをベースに以下のルールで記載。
// block__element.-modifier
// Blockが複数単語になる場合は、「blockName」のようにキャメルケースにする。
// 大枠のレイアウトに属する場合のみ、id を許容する。#header など。
// 
// ----------------------------------------------------

@charset "UTF-8";
/*! ========================================
※※※※※※※※※※※※※※※※※※※※※※※※※※※
  このCSSファイルはSassから生成されていますので、
  編集しないようご注意ください。
※※※※※※※※※※※※※※※※※※※※※※※※※※※
========================================= */

大規模サイトで活用できる@import のネスト

#contents p {
  padding-bottom: 15px;
}

#uniqueID p {
  padding-bottom: 0;
}

#uniqueID {
    @import "_local.scss";
}

p {
    padding-bottom: 0;
}

.notes {
    font-weight: bold;
}

a {
    &:hover {
        text-decoration: none;
    }
}
.notes {
    &__item {
    margin: 10px;
    }
    .box & {
        padding: 0;
    }
}

#uniqueID a:hover {
  text-decoration: none;
}
#uniqueID .notes__item {
  margin: 10px;
}
.box #uniqueID .notes {
  padding: 0;
}

SASS 記法も使ってみよう

@mixin mgn($value: 10px) {
    margin: $value;
}

.list {
    @include mgn(5px);
    li {
        display: inline-block;
        a {
            font-size: 1.2rem;
            color: green;
        }
    }
}

=mgn($value: 10px)
    margin: $value

.list
    +mgn(5px)
    li
        display: inline-block
        a
            font-size: 1.2rem
            color: green

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

.navigation {
  width: 100%;
}
.navigation__item {
  color: #666;
}
.navigation__item_state_active {
  color: #000;
}

.navigation {
    width: 100%;
    &__item {
        color: #666;
        &_state_active {
            color: #000;
        }
    }
}

.info {
  margin-bottom: 50px;
}
.info__body {
  background: #fafafa;
  border: 1px solid #aaa;
}
.info--new .info__body {
  border: 1px solid #d75893;
}

.info {
    margin-bottom: 50px;
    &__body {
        background: #fafafa;
        border: 1px solid #aaa;
    }
    &--new {
        .info__body {
            border: 1px solid #d75893;
        }
    }
}

.info {
    margin-bottom: 50px;
    &__body {
        background: #fafafa;
        border: 1px solid #aaa;
    }
    &--new {
        .info {
            &__body {
                border: 1px solid #d75893;
            }
        }
    }
}

.info {
    $block: &;
    margin-bottom: 50px;
    &__body {
        background: #fafafa;
        border: 1px solid #aaa;
    }
    &--new {
        #{$block}__body {
            border: 1px solid #d75893;
        }
    }
}

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

.example {
    @keyframes anima-example {
        0% {
            transform: translate(0%, -100%);
        }
        100% {
            transform: translate(0%, 0%);
        }
    }

    animation: anima-example 0.9s linear 500ms 1;
}

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

@keyframes anima-example {
  0% {
    transform: translate(0%, -100%);
  }
  100% {
    transform: translate(0%, 0%);
  }
}

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

.btn {
    display: inline-block;
    margin-bottom: 15px;
    padding: 10px;
}

.btn--blue {
    @extend .btn;
    background-color: blue;
}

.btn--red {
    @extend .btn;
    background-color: red;
}

.local-nav__list {
    @extend .btn;
    color: black;
    background-color: #ccc;
}

.local-nav__list {
    display: inline-block;
    margin-bottom: 15px;
    padding: 10px;
    color: black;
    background-color: #ccc;
}

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

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

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

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

npm install --global stylelint

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