html,css,sassによるアプリのビューをコーディングする際、便利な書き方

説明

本記事はbootstrapなしでSassを使ったコーディングの際に便利書き方に関する記事です。

前提条件

html,css,sassを使っている事、自分はバックエンドをrailsで開発していますが、他の言語でも差異はないと思います。

よく使うcolorを変数として定義しておく

:root {
  --main-bg-color: #f6fafa;
  --main-text-color: #A0A0AC;
  --main-color: #95c9c9;
}

まずapplication.scssファイルを作りapplication.cssをsassで書けるようにします。それからcolorを定義してのですが、各場所は必ず全てのcssに反映されるapplication.cssファイルの上部に記述してください。そうでないとせっかく定義した変数を使えません。上記の記述では3つ、背景色、文字の色、目立たせたい部分に使う色を定義してます。

body {
   background-color: var(--main-bg-color);
   color: var(--main-text-color);
 }

変数の使い方は上記コードのようにします。()内のに定義した変数名を書く事で使えます。この方法をする事で後から色を変更したい場合、application.scssファイルの変数部分を変えるだけで全てのvar()のcolorも変更されるので保守性が高まります。

listなどの複数の同じ要素で二つ目の要素からcssを当てる書き方

.tweet-list {
  background-color: #fff;
  margin-top: 20px;
  border: 1px solid #E4E4E4;
  border-radius: 3px;

  & + & {
    margin-top: 40px;
  }
}

上記コードのように& + &を入れ子構造で記載するとtweet-listの二つ目の要素からmargin-top: 40px;が効くようになります

レスポンシブ対応の書き方

@media (max-width: 767px) {

}

@media (max-width: 1024px) {

}

@media (min-width: 1025px) {

}

レスポンシブ対応では上記三つを使う事でPC版、タブレット版、スマホ版がかけます。記述の意味は一つ目が横幅が767px以下の時に効くという意味でスマホ表示用の記述を記載します。二つ目が1024px以下の時に効くという意味でタブレット表示の記述を書きます。最後は1025px以上の時効くという意味でPC版の表示を記載します。

まとめ

今回はコーディングの便利な書き方について記載しました。閲覧ありがとうございました。