「コーディングのスピードをあげたいな〜」と思っていてTwitterを何となくみたらこんなツイートがありました。
scssって本当便利なんだな、、、書いてるときは慣れないから思わなかったけどw修正ラクダ🐫
— natu@webでぃれくたー (@natu99056348) November 30, 2019
「ん、scss？」と思いすぐググったらありました、cssを短縮して書く方法です。
目次
コーディングでの私が思うscssの使い方
scssは何度も使う色や横幅や縦幅のサイズを変数として宣言できたり他のファイルから変数を持ってきたりできます。
ですがLPを作るときに変数の宣言や他のファイルから変数を持ってくるのは必要ないと思うので使わなくていいと思うし私は使っていません。
必要になったら使えばいいです。
だから私が必要と思う書き方だけ説明しますがprogateでscssの使い方を解説している内容は使う機能はそんなにないので見なくても大丈夫です。
親要素と子要素の関係を見やすくする
見慣れたcssだと親要素と子要素の関係が見えにくいです。
また私はよくやっていたのですがセレクタに対するcssを指定したのに下の方でまた同じセレクタに指定していました。
cssの2度付けです。
でもscssで書いてからは親要素と子要素の関係が見えやすいのでどこにcssをつけているかが分かり同じセレクタにcssの2度付けをすることがなくなりました。
子要素にcssを当てる時ですが親要素の中に書くので子要素が増えれば増えるほどコードが減ります。
親要素の直下の子要素やnth-childを使う時は↓になります。
scssを使うときの注意点
親要素に対して子要素はインデントしないとcssが反映されないので注意しましょう、↓とします。
scssをどうやって使えるようにするか
使い方は↓で説明しています。
scssを使う時に困ったこと
HTMLファイルにscssを読み込むための記述をしないといけないのですがネットで見つけることができなくて悩んだ結果「もしかしてcssと同じでは？」と思いやってみたらうまくいきました。
私はcssフォルダの中にstyle.scssとstyle.cssを置いています。
scssの拡張子ですが「style.scss」みたいになります。
クラスの命名規則をつけるとコーディングスピートが上がるしコードの保守性も上がる
クラスの付け方のルール(命名規則)でBEMというのがありますがこれをすると最初は慣れてないせいでコーディングが遅いですがすぐにもっとコーディングスピートが上がります。
BEMとscssの組み合わせはこういう時にご利益を実感できる
それとコーディングしている時はクラスを見たらどこに付けたクラス名か分かりますが数ヶ月経つと忘れますよね。
その時に「これはどこに対して付けたクラス名だろう？」と悩む時間が減るしscssだとかたまりで書かれているので編集も楽になります。
実務でLPのコーディングをするとキャンペーンで割引するからコードを少し変えたりscssの編集をしないといけない時にありがたさがよく分かります。
LPが長い時に特に便利さを実感できるはずです。
コーディングスピードが上がるのとcssがすっきりして見やすくなるのでcssを使っている人はぜひscssを使って下さい。
「エディタはvscodeを使ってないけど」という人もいるはずですがこの機会にエディタを変えてみてはどうでしょうか？
vscodeのシェア率は圧倒的です。
2019年度のJavaScriptを使う人のエディタランキングですが飛び抜けてますよね
拡張機能もあるし無料だし使いやすいからだと思います。
YouTubeでもおすすめ動画があります。
