マネーフォワードでフロントエンドの開発をしています頼本です。

今回は、マネーフォワードがフロントエンドで採用していますHaml、Sassの基礎をご紹介します。

「Haml/Sassってなんぞや？」という方にへザックリ簡単に説明すると、Haml/SassとはHTML/CSSを効率的に書くための記法です。

百聞は一見にしかず！ということで、実際にコードを比較してみましょう。

完成形

※説明のためにブロックとテキストを分けて記述します。

▼HTMLの場合

    

        テキストが入ります。
    

▼Hamlの場合

#hoge
  %p.fuga テキストが入ります。

コンパイルすると出力される内容は同じですが、Hamlの場合は記述するコードがたったこれだけです！！
閉じタグ、id=”XXX”、class=”XXX”は基本的に書く必要がありません。
divタグもid、classを使う場合は省略できます。

どの表記が何の役割を果たしているかは以下の通り

では次にSassを見てみましょう。
※当社ではSCSS表記を採用しているため、SCSS表記でご紹介します。

▼CSSの場合

#hoge{
    border: 1px solid #ef7f1a;
}
#hoge .fuga{
    color: #ef7f1a;
}

▼SCSSの場合

$mf_color : #ef7f1a;
#hoge{
  border: 1px solid $mf_color;
  .fuga{
    color: $mf_color;
  }
}

Sassでは子セレクタを親セレクタにネストして記述することができます。

また、CSSを書いているときに「こんな風に書けたらいいのに…」と思った事の大半が実現できます。（変数、演算、mixin、if、each、for…などなど）

CSSの「こんな風に書けたらいいのに…」の実現

では、「こんな風に書けたらいいのに…」のSass（SCSS）での実装について、一部ご紹介します。

変数

予め文字列を変数として定義する事ができます。
上記のように「$mf_color」に「#ef7f1a」を変数として定義して、border、colorで使用しています。

演算

四則演算に対応しており、演算を書けば自動計算してくれます。

▼SCSS

.hoge{
  width: 100px - 10;
  padding: 5px;
}

▼CSS

.hoge{
  width: 90px;
  padding: 5px;
}

mixin

コーディングをしていると何度も使うようなスタイルが数多く出てきます。
そのような場合は、予めmixinを定義しておく事で、テンプレートのようにしてスタイルを使えます。
@mixinで名前を定義し、@includeで定義したmixinを読み込みます。

▼SCSS

@mixin box-set{
  margin-bottom: 10px;
  padding: 10px;
}
.hoge{
  @include box-set;
  border: 1px solid #000;
}

※mixinを定義するだけでは、スタイルとして使用できません。必ず@includeして定義したmixinを読み込みましょう。

▼CSS

.hoge{
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #000;
}

mixin（引数）

mixinは引数を渡す事ができます。引数を使う事でカスタマイズ性、効率が一気に上がります。
また、引数はデフォルト値をセットする事もできます。セットしておくと、mixin読み込み時に省略できます。

▼SCSS

@mixin box-set($mb,$padding:10px){
  margin-bottom: $mb;
  padding: $padding;
}
.hoge{
  @include box-set(20px);
  border: 1px solid #000;
}

▼CSS

.hoge{
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid #000;
}

以上が基礎部分のほんの一部分です。

私自身は、もう素のHTMLもCSSも書きたくありません…。そう思ってしまうくらいHaml、Sassは効率が格段に違います。

次回はさらに便利な点を案内しつつ、マネーフォワードではどのように使用しているかを紹介をします。