今日は、新しい企画(?)のコードを読む練習をしてみます！たいきさんがアップしていたSassのコードです。
こんにちは。Webコーダーのharuです。
2歳0歳の育児をしながら、22時〜2時にプログラミングを独学しています。2020.5.11~学習スタート2020.8.10~実務でコーディングしていますHTML/CSS(SCSS)/jQuery に加えWordPressの学習中です。
これからもっと知識をつけていきたく、インプット・アウトプットを続けています。
普段から学習していてわかったことや、気付きをログに残しています。
※認識の間違っている箇所があれば、ご教授いただけるとうれしいです！
【コードを読む練習vol.1】たいきさんのテンプレSass編
今回は、たいきさん(@tnk0501)のSassを読んでみました。
(元ツイート)
（その後のツイート）
これです！
わたしは、元ツイートの後、たいきさんに解説までいただきました><
まずcalcを使ったことがなかったのでcalcを学習しながらこのコードを読み解いていきたいと思います(;´д｀)
calcについて
正式にはcalcファンクションといい、レイアウトやサイズを指定するときに計算式を使うことができるものです。
小林さん(@pulpxstyle)のツイートをブクマしていました。
部分的に全画面表示にするには『calc』が便利。
文章の半分50%を全画面の半分50vwで引いて要素を広げます。
calc((50vw – 50%) * -1)
文章の外側部分のマージンを取得するため-1をかける。『calc(50% – 50vw)』でOK。現場で使えるのでぜひ試してみてください。
詳細→https://t.co/xO7szjDKUG pic.twitter.com/To90VyKFUe
— 小林 I Webデザイナー (@pulpxstyle) April 6, 2020
calc(50% – 50vw)のように、()内で異なる単位の計算式を使うことができます。便利！
(この小林さんのコード、次カンプでこのデザイン見つけたら絶対やってみる！)
・均等ボックスを可変サイズで、余白は固定にしたい
・左右に固定marginを付けつつ、要素を画面幅にしたい
など、固定と可変を組み合わせたいときに便利です。
これらを自分で計算せずに、自動で数値を出してくれます。
calc()の参考記事はこちらです
たいきさんのコード、完成物
こちら、いただいたものです。
BOXのwidthが、固定のmarginと画面幅によって決まるというもの。
HTMLコード
リストでitemを7つ並べてあります。
Sassコード
l-flexは、wrapの赤枠指定がされています。itemは7つのBOXのスタイル指定です。
ここに、冒頭ツイートのSassテンプレが@includeされていますね。
ちょっと詳しくみていきます。おそらく、数学とか苦手なタイプだったので、数式に拒否反応が出ているだけな気がしますw ゆっくり見ればわかりやすいはずw
・$num → BOXの数
・＄mr → margin-right
・$mt → margin-top
ですね！
・$margin-numと$row-numは、後ほど使うので変数化
・BOXはflexで横並び、wrapで回りこんで改行するように設定してあります。
・& > ＊ は、親要素の以下全てという意味。
・widthは、BOXのwidthですね
・画面100%から「margin-right」×「BOXの個数−1*」を引く
・それをBOXの個数で割る
→これにより、BOXのwidthが可変サイズで求められる
*-1なのは、margin-rightついているのが1行にBOX個数-1箇所だから。
・:nth-childは、指定番目の要素を指定するコード
・(:nth-child(#{$num}n))＝BOXの個数が3だった場合は、3nになる
→すなわち3の倍数の時＝それぞれの行の最後のBOXを表す
・これにnotがつくので、最後のBOX以外にmargin-rightをつけるの意。
・下のコードは、n + #{$row-num}＝BOXの個数が3だった場合は、n+4になる
→ここでn+4は2行目になるので、2行目以降の全てのBOXを表す
・2行目以降にmargin-topをつけるの意
以上のことから、mixinの引数に、BOX個数とmarginをそれぞれ入れることで、BOXのwidthを勝手に計算してくれるということがわかりました。
marginは固定なんですね。
余白を中心にしたBOX可変のレイアウトって作ったことなかったので勉強になりました！
コンパイル後のCSS
ご丁寧に、コンパイル後のCSSまでいただきました🙇♀️
コンパイル後の方が、calc()表示のところがわかりやすいですね！
（・画面100%から「margin-right」×「BOXの個数−1*」を引く
・それをBOXの個数で割る
→これにより、BOXのwidthが可変サイズで求められる）
あとがき
自分で引数を指定したmixinをあまり書く機会がないので、最初に拒否反応が起こったようですw
落ち着いてコードを見ればとてもわかりやすく、便利なmixinでした✨
わざわざ解説まで送ってくださったたいきさん(@tnk0501)に感謝です！ありがとうございました！大変勉強になりました🙇♀️
今日は以上です。
★Thanks：メンター「もりけんさん」(@terrace_tec)
もりけんさんのHPはこちら
★私が「実務プロジェクト」でお仕事をいただいているクライアントのあきらさん（@akira0727x)がYouTubeをはじめました！
Web制作で結果を出すためのノウハウを公開されています✨
