HamlとSCSS

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

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

 

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

今までは、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;

    }

  }
}