説明
本記事はbootstrapなしでSassを使ったコーディングの際に便利書き方に関する記事です。
前提条件
html,css,sassを使っている事、自分はバックエンドをrailsで開発していますが、他の言語でも差異はないと思います。
よく使うcolorを変数として定義しておく
```application.scss :root { --main-bg-color: #f6fafa; --main-text-color: #A0A0AC; --main-color: #95c9c9; } ```まずapplication.scssファイルを作りapplication.cssをsassで書けるようにします。それからcolorを定義してのですが、各場所は必ず全てのcssに反映されるapplication.cssファイルの上部に記述してください。そうでないとせっかく定義した変数を使えません。上記の記述では3つ、背景色、文字の色、目立たせたい部分に使う色を定義してます。
application.scss
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版の表示を記載します。
まとめ
今回はコーディングの便利な書き方について記載しました。閲覧ありがとうございました。