【WEB制作×勉強】Day23～24:SCSS
SCSSって何ってところから始まりました。
やっとCSS慣れてきたと思ったら新しい言語😂
javaScriptもまだ習得途中だし復習が追い付かない～💦
最初の記述等はついていけたけど、メディアクエリらへんから？？？
でもここがSCSSの醍醐味というか、便利ポイントみたいだから、
しっかり使いこなせるようにならねばね。
これから副業できる力をつけるためには通らねばならない道だし、
頑張るぞー！！
VSC拡張機能 Live-sass-Compilerの使い方
practice
┣ index.html
┣ css
┃ ┗ xxx.css（自動生成されるcssファイル）
┣ sass
┃ ┗ xxx.scss（記述していくscssファイル）
┣ js
┗ img
①この構成でフォルダを作る
②scssファイルを保存する
→「Live Sass Compiler」により自動でコンパイルされたCSSファイルが「css」フォルダ内に作成される。
③作成されたCSSファイルをHTMLから読み込む
入れ子の記述
子要素のスタイルを親要素のクラスの中に｛｝で入れ子形式で書くことができる。孫要素もさらに｛｝で入れ子の記述をして書くことができる！！
すぐCSSに反映されるからすごい！しかも必要なものを補完してくれる！
疑似要素・classの書き方
＆でそれまでのセレクタを継承できる。（この場合だと.lists li a）
＆を使えばhover時やクラスがついたものを特定して指示できる
SCSSで変数を使う
よく使いそうなカラーやフォントサイズに変数を使うことで、後々変更も一括ででき、保守性も高くなる。
①まず変数を定義する $変数名：変数（カラーやフォントサイズ）
②プロパティー値に変数を記述する
＊変数に四則演算も可能！！（.active:font-size参照）
@extend:定義したスタイルを使いまわす
指示したいセレクタに@extend:使いまわしたいスタイルのセレクタ名を記述することで【使いまわしたいスタイルのセレクタ名】のスタイルをそのまま使うことができる。今回は,buttonのスタイルを.activeクラスに使いまわす。
＠mixin:定義したスタイルを引数も作って使いまわす
スタイルを型として一部を変更して使える
＠mixin:タグ名（＄変数名）｛
スタイル定義
｝
＠include:タグ名（指定したい引数）；
→指定した引数だけ変更したスタイルが引き継がれる
@mixinを使ってメディアクエリを出力する
＠mixinを使うことで要素ごとに指定できるのでわかりやすいコードになる
（メディアクリエだと別のブロックでまとめて記述していた）
①まずマップ型変数を定義する キー（変数名）：値
分割したいブレークポイントに応じて作る
②＠mixinで①で設定したキー（今回はSP用orPC用）を呼び出す
(今回の場合の記述は @mixin mq($breakpoint: sp)｛ ）
↑初期値をSPにしている
③@includeで呼び出す@mixinを定義する
（今回の場合の記述は
@media #{map-get($breakpoints, $breakpoint)}
＝＠mediaでPCかSPのどちらの値をよんでくる という意味
@content; =呼び出し元の中身 ）
④＠includeで呼び出したい変数値を出力する
＠include mq( 呼び出したい変数名 今回ならPCかSP) ｛
height：60px =③で定義した呼び出し元の中身にあたる
この記事が参加している募集
この記事が気に入ったらサポートをしてみませんか？