HamlとSassを使ったフロントエンドの実装

スポンサーリンク
HamlとSassを使ったフロントエンド実装プログラミング

現在RubyとRuby on Railsを中心にプログラミングを勉強中。

日々の勉強のアウトプットとして、また備忘録としてブログを書いています。

スポンサーリンク

HamlとSassを使ったフロントエンドの実装

アイコンを使う時

FontAwasomeというサイトから好きなアイコンを使うことができる。

hamlで使う時は、ホームページに記載されている内容と少し記述を変えることで使用できる。

Google検証ツール

あるサイトのHTMLやCSSで書かれているコードの中身を知りたい時はGoogleの検証ツールを使う。

見本となるサイトのフォントやフォントサイズ、カラーだけでなく、要素同士の親子関係やpadding、marginがどのように使われているか見ることができる。

もし設計につまづいたら見本のサイトを見て参考にする。

HamlとSassの親子関係

Hamlは親子関係を明確にする際に字下げをするが、これが少しでもずれているとエラーがでてしまう。

記述が簡単になった分、インデントには気をつけないといけない。

BEM

ページを構成する要素をBlock, Element, Modifierの3つに分類する。

Blockはある要素の大元となるブロック要素。

ElementはBlockに属する子要素。

Modifierは上のどちらかに特別な修飾をする要素。

BEMは必ず使わなければならないものではなく、親子関係を明確にするためにあると便利な規則。この規則は会社や組織によってそれぞれ異なる。

例)Blockを命名するときに頭文字を大文字にする等。

Modifierはなかなか使うことはない。

アンパサンドも同様で必ず使わなければならないものではなく、あると便利な記述。

SassやHamlはネストを活用することで見やすく分かりやすいコードになる。

ただし、ネストも階層化しすぎるとかえって見にくくなるので3つくらいを目安にする。

画像投稿フォーム

画像を投稿する機能を実装したい場合、画像投稿用のフォームを使う

%input{type: "file"}

通常この記述だけだと「ファイルを選択」というボタンが表示される。これを隠してFontAwesomeのアイコンをクリックしてファイルを表示させたい場合、ラベルという記述をする。

その後scssで「ファイルを選択」をdisplay: none; にするとできはず。

まとめ

まとめ

HamlとSassを使ったコーディングに少しずつ慣れてきたが、paddingやmarginなどの基本的な使い方を忘れてしまっているので進むペースがかなり遅くなっている。

この記述に慣れればHTML、CSSの2倍早くコードが書けるらしい。

なんとか見本通りのサイトを作ることができたが、コードがぐちゃぐちゃで書いた人にしか分からないものになってしまっている。

もっと見やすいコードを書かなければ、、、

コメント