プログラミング未経験おじさんの備忘録

本ブログはプログラミング未経験者の拙い学習の記録です。

学習[56]日目

本日の学習

フロント画面の実装(主にhamlとscssコードの見直し)

  • 命名について
  • 複数クラスの設定
  • 変数
  • 部分テンプレートの設定

命名について

命名に関してどのような名称が一般的であるかを少ししか理解していなかったため、それぞれの要素に対して記述したクラス名がその要素に適したものであるかが曖昧だったので見直しを行いました。

例えば、ブロックなどの親要素に関しては、containerやwrapperが主によく使用されるものであるように感じます。ブロックの子要素に関してはcontentやitemなどを使用すればいいなどがあります。

 

複数クラスの設定

変数にて複数のクラスの設定を行いたいhamlの場合にはクラス同士の間に.を入れてあげることによって複数のクラスを指定することが可能となる。

.header__box.hedder__item
#html
<div class="header__box hedder__item">
</div>

変数の定義

変数

#変数の定義
$default-color#38aef0;
 
#変数の呼び出し
.container {
  color$default-color;
}

部分テンプレートの設定

部分テンプレートの呼び出しに関しては下記のように行うことで実装出来ます。

#hamlにおける部分テンプレートの呼び出し
#messagesディレクトリ下にある_containerファイルを呼び出す
= render "messages/container"

 

以上、最後までお読み頂きありがとうございます。

 

参照:https://qiita.com/pugiemonn/items/eaa597b79fe59a1f1506

  :https://qiita.com/yukimura1227/items/a1cbf65ac9abd4d138e1

  :https://www.pikawaka.com/rails/partial_template

  :https://qiita.com/suimi34/items/8f04431954255f23b80c