入社早々にやってたHaml / Sass記法について改めて調べてみた

こんばんは。

少し前まで、本を読むことが苦手で200pの書籍ですら読む前に挫折しそうだったのに、エンジニアになった今、400pそこらの技術本くらいなら、こんな顔ですぐ読めるようになりました。

f:id:hachimaki37:20200429142829j:plain — 読書以外の活用方法もあるみたいです

どうもハチマキです。

はじめに

エンジニアになり、入社早々にRailsアプリケーションを実装する際に、haml / sassのコーディングに取り組んでいました。

正直haml？sass？って何？から始まりましたが、月日が経ち、今ではある程度書けるようになり、ふと使用メリットとかあまり考えてなかったなぁと思い、この機会に改めて調べ、まとめてみました。

本日の概要 : Haml / Sass記法について改めて調べてみた

Hamlとは
Sassとは
使用メリット
簡単なコーディングをしてみた
まとめ
参考資料

Hamlとは

「HTML avstraction markup langage」の略で、
HTMLをより短いコードで綺麗に簡潔にコードを書くことができる記法（言語）です。

HTMLの記述例：<開始タグ>hogehoge<閉じタグ>

Hamlの記述例：%hogehoge
- ％タグを書くだけで、コンパイルされると<開始タグ>hogehoge<閉じタグ>に変換される

Sassとは

Sassは「Syntactically Awesome StyleSheet」の略で、
CSSに対して機能を拡張した言語で、より効率的に書けるようにした記法（言語）です。

使用メリット

haml
- タグが省略できるため記述が少ない
- Rubyが使える
- 変数、条件分岐、繰り返しも使える
- erbに比べ、書く量が圧倒的に少ないので、後から見直しやすく、修正しやすい

sass
- 作業効率がアップする
- メンテナンス性がアップする
- 入れ子（ネスト）できる
- 変数が使える
- 演算できる
- 関数で繰り返しを楽に書ける
- 継承（mixin）で楽に書ける
- ファイルを分割管理できる

簡単なコーディングをしてみた

作るのはこんなもの

f:id:hachimaki37:20200429123220p:plain — 自己紹介を作ってみましたが、序盤で挫折しました

構成はこんな感じです

f:id:hachimaki37:20200429130911p:plain — 構成

html.hamlファイル

.self-introduction
  .announce
    hachimakiとは？
  %br
  .content
    男
    %br
    9才
    %br
    嘘です
    %br
    出身東京
    %br
    外出が好き
    %br
    わたくしです
    %br
    サッカー大好き
    %br
    元事業責任者です
    %br
    ラーメン二郎が好き
    %br
    ラーメン二郎が大好き
    %br
    ラーメン二郎が大大好き
    %br
    ラーメン二郎が大大大好き
    %br
    ラーメン二郎が大大大大好き
    %br
    ラーメン二郎が大大大大大好き
    %br
    駆け出しエンジニアと繋がりたい
    %br
    途中あきらめたこと許してください
    %br
    ひょうげん方法は人それそれあります
    %br
    %br
  .btn
    %a{ href:  "リンク先（絶対パス）", alt: "もっと詳しい自己紹介", target: "_blank" , style: "color: #FFFFFF" }
      もっと詳しく
%br

css.sassファイル

.self-introduction
  .announce
    text-align: center
    border-bottom: 2px solid #ffa035
    border-top: 2px solid #ffa035
    padding: 10px 0 10px 0
    margin: 0 10px
    font-weight: bold
  .content
    margin: 10px 10px
    line-height: 1.5
  .btn
    font-size: 16px
    padding: 15px 45px
    background-color: #ffa035
    margin: 10px
    text-align: center
    border-radius: 25px
    white-space: no-wrap

まとめ

Haml記述だと、HTMLのように<開始タグ><閉じタグ>を記述せずに、より短いコードで綺麗に簡潔にコードを書くことができる
Sass記述だと、CSSで使用する.btn{プロパティ}のような記述が不要で、より効率的に書くことができる
記述に慣れると非常にメリットが多数あり

最近は、当たり前に使用してましたが、改めて調べてみると、新たな知識、確かに！みたいな気づきがたくさんありました。

参考資料

- - - - -

今回は、議事録的な感じでまとめてみました。
日々勉強ですね。
ぜひご参考にしてもらえれば幸いです。

以上、ハチマキでした。

気ままに気ままのエンジニアブログ

定期的に得た知見を気ままに発信中