FLOCSSでSass設計

Sassとは

Sass（英: Syntactically Awesome Stylesheets）は、ハンプトン・キャトリンが設計しネイサン・バイゼンバウムが開発したスタイルシート言語である。
後にSassファイルに用いられる単純なスクリプト言語である SassScript 用の拡張が加えられた。
Sass は Cascading Style Sheets (CSS)で解釈される2種類の構文で構成されたスクリプト言語であり、SassScript はスクリプト言語自体を示す。
はじめにできた「インデント構文」では、Hamlと同様にコードブロックや改行コードを分離する際に字下げを活用している。単にSassと言ったらインデント構文のことを指す場合も多い。
新しい構文である「SCSS」は、CSSのようなブロックの書式を使用し、ブロック内の別々の行にブロックとセミコロンを示すため波括弧を用いている。
CSS3はグループルールを適用するセレクタ及び擬似セレクターの一群で構成されている。
SASSは伝統的なプログラミング言語、特にオブジェクト指向言語で利用可能ないくつかの仕組みで、CSS3にはないものを提供することでCSSを拡張している。
SassScript の解釈時には、Sass ファイルで定義された様々なセレクタとして、CSSルールのブロックが作成される。 Sass インタプリタが SassScript をCSSに変換する。
sass か scss の保存時に Sass がこれらを監視し、CSS出力変換を行っている。 CSS用の単純な糖衣構文でもある。
引用：wikipedia

最近のフロントエンドで、流行っているcssの拡張言語であるSass。
記述方法さえ理解してしまえば効率よくコーディングができる。

//-------------------------------
//scss記法
//-------------------------------

.hoge{
    //左右中央寄せ
    margin: {
        right: auto;
        left: auto;
    }
    .hoge__container{
        //想定外の値にならないようにショートハンド記述禁止
        //4方向指定する場合は時計回りに指定
        padding: {
            top: 20px;
            right: 40px;
            bottom: 20px; 
            left: 40px;
        }
        .hoge__container__item{
            list-style: none;
            .hoge__container__item__icon{
                @include make_arrow(10);
            }
        }
    }
}

//-------------------------------
//sass記法
//-------------------------------

.hoge
    margin: 
        right: auto
        left: auto
    .hoge__container
        padding:
            top: 20px
            right: 40px
            bottom: 20px 
            left: 40px
        .hoge__container__item
            list-style: none
            .hoge__container__item__icon
                +make_arrow(10)

上記は構文の一例。
他にも 条件分岐、ループ、配列、関数など存在するが割愛。

FLOCSSとは

FLOCSS（フロックス） は、OOCSSやSMACSS、BEM、SuitCSSのコンセプトを取り入れた、モジュラーなアプローチのためのCSS構成案です。
MCSSのレイヤー構成にも大きな影響を受けています。
引用：https://github.com/hiloki/flocss

cssの構成案ではあるが、Sassを採用した場合も相性がよい。
cssで構成する場合はディレクトリ構成が主になるが、
Sassの場合はそれに加えてSassファイル内の記述をどのように分割して
どのような命名規則にするかが重要になる。

レイヤーとは

FLOCSS設計においてディレクトリをレイヤーと表現し、
それぞれのレイヤーでは抽象度や詳細度が異なる。

asset
  ├ css　//出力先
  │  └ style.css　//出力ファイル
  └ scss
     ├ style.scss　//@importを使って全部まとめるためのファイル　
     │
     ├ 1.Foundation // セレクタはidやclassを使わずに、プロパティを上書きしやすくする
     │  ├ _bootstrap.css //フレームワークなどを利用するときはこのレイヤー
     │  ├ _reset.scss //ノーマライズやリセットなどがこれ
     │  ├ _base.scss //font-sizeやcolor inputなどを共通化しておく。
     │  ├ _color.scss //プロジェクト内で利用する色コードを変数化して一元管理するファイル
     │  ├ _mixin.scss //各ファイルに散らかりがちなmixinを一元管理するファイル。
     │  └ _var.scss　//プロジェクトで利用するfont-sizeやmargin、z-indeなどを変数化して一元管理するファイル
     │
     ├ 2.Layout //サイト全体のブロックを定義する。
     │  ├ _header.scss //クラス名は .l-header__xxx
     │  ├ _main.scss //クラス名は .l-main__xxx
     │  ├ _side.scss //クラス名は .l-side__xxx
     │  └ _footer.scss //クラス名は .l-footer__xxx
     │
     ├ object
     │  ├ 3.component // サイト内で使用されるオブジェクト(モジュール)で汎用性が高いもの 
     │  │  ├ _radio.scss //クラス名は .c-radio__xxx
     │  │  ├ _input.scss //クラス名は .c-input__xxx
     │  │  ├ _step.scss //クラス名は .c-step__xxx
     │  │  ├ _button.scss //クラス名は .c-button__xxx
     │  │  ├ _table.scss //クラス名は .c-table__xxx
     │  │  ├ _modal.scss //クラス名は .c-modal__xxx
     │  │  ├ _slider.scss //クラス名は .c-slider__xxx
     │  │  ├ _head_title.scss //クラス名は .c-head_title__xxx
     │  │  ├ _label.scss //クラス名は .c-label__xxx
     │  │  ├ _validation_msg.scss //クラス名は .c-validation_msg__xxx
     │  │  ├ _image_trimer.scss //クラス名は .c-image_trimer__xxx
     │  │  │
     │  │  more...
     │  │
     │  └ 4.project(もしくはpages) //ページ単体でのみ使用されるオブジェクト(モジュール)で汎用性が低いもの
     │     ├ sitemap.scss //クラス名は .p-sitemap__xxx
     │     ├ sitepolicy.scss //クラス名は .p-sitepolicy__xxx
     │     ├ contact_form.scss //クラス名は .p-contact_form__xxx
     │     │
     │     more...
     │
     └ 5.Utility //一時的な対処のために利用する
     　  　└ _utility.scss //クラス名は .u-"プロパティ"__”値”　ex) .u-margin__bottom__large