HamlとSCSS

2019-04-20

スクールでは応用カリキュラムに入りました。

取り組んでいるアプリはチャットアプリです。

まずは、TOPページの実装ですが、約２日掛かりました。

今までは、HTML、CSSでマークアップをしていましたが、今回の実装ではHaml,

SCSSの使用を指示され、四苦八苦しながら取り組みました。

Haml

マークアップ言語ですが、HTMLよりも書きやすく、見た目がスッキリしているのが特徴です。

HTMLとの違い：

①%で開始タグと閉じタグを省略可

HTML

<p> ..........</p>

Haml

%p.........

②divはドット(.)で代替可&”class”は省略化

HTML

<div class =contents>

Haml

.contents

③インデントは必ず揃えなければならない

ネスト構造になると、HTMLでは見やすくするためインデント（行をずらす）を入れますが、Hamlも同じです。違うところは、Hamlでは必ず入れなければいけなしということ。そしてインデントが1pxでもずれていると反映されません（エラーが出ます）。

ここが難しいところで、自分もエラーが出て試行錯誤した挙句、結局インデントがずれているだけだったということがありました。

SCSS

①ネスト構造で記述可

HTML, Hamlはネスト構造でかけますが、CSSでは一つずつ分けて書いていました。

SCSSではHTML, Haml と合わせネスト構造で書けます。

CSS

.header {
background-color: #26d0c9;
color: #fff;
height: 90px;
}

.header-logo {
float: left;
font-size: 36px;
padding: 20px 40px;
}

.header-list li {
float: left;
padding: 33px 20px;
}

SCSS

.header {
background-color: #26d0c9;
color: #fff;
height: 90px;
　.header-logo {
　float: left;
　font-size: 36px;
　padding: 20px 40px;
　　.header-list li {
　　float: left;
　　padding: 33px 20px;

    }

  }
}