最近､ホームページ制作にはまっているわけですが､キャリアは長いです｡
自分で言うのも何ですが､中級者以上のレベルだと思っています（笑）｡
しかし､ちょっと物足りなくなってきて､｢そろそろSCSSを勉強しようか｣と｡
そして､サクッと勉強を始めました｡
今日は､@mixinについてです｡
サクッと行ってみましょう～｡
HTML
まずはHTMLを｡
<div class="Visual"></div><!-- /.Visual -->
何を書いているのかというと､ボックスを作って､｢Visual｣というクラス名を付けたって話です｡
空要素でSEO上問題ありかと思いますが､制作現場ではわりと使われている？
結構､毎日大量にたくさんのソースコードを見ますが､こういう場合もアリでして｡
それに､ぼくは今､色々と試せるサイトを1つ作って､ローカルで試しているのでSEOはどうでも良い（笑）｡
SCSS
SCSSは以下になります｡
@mixin bg($pad: 450px, $haikei) {
background-repeat: no-repeat;
background-position: center bottom;
background-size: cover;
padding-top: $pad;
background-image: url($haikei);
}
上のソースコードのうち､以下の3つはSCSSと関係ありません｡
CSSで書くのと同じです｡
background-repeat: no-repeat; background-position: center bottom; background-size: cover;
重要なのは以下｡SCSSの書き方です｡
@mixin bg($pad: 450px, $haikei) {
padding-top: $pad;
background-image: url($haikei);
}
@mixin bg｡bgは任意です｡分かりやすい物でOK｡
$padも任意｡初期値は450pxです｡
そして､その値を､｢padding-top: $pad｣で読み込み｡
なお､背景画像にする際､経験上､padding-topを指定しないと表示されません｡
なので､padding-topを使っています｡
$haikeiについて､こちらも名前は任意｡分かりやすい名前でよろしいかと｡
あとは､background-image: url($haikei);で先ほど書いた$haikeiを読み込み｡
流れとしてはこんな感じですね｡
今のところ､$マークが付いたのは2つ｡
この2つに値を読み込ませないと動作しません｡
なので､こんな感じで書きます｡
.Visual {
@include bg(300px, "../images/sora.jpg");
}
$padに｢300px｣､$haikeiに｢"../images/sora.jpg"｣を読み込んでねーって話です｡
$haikeiは､背景画像のパスを書かないとダメなので要注意｡
こんな感じで
よって､今日書いたSCSSは意味ないと思っています（笑）｡
ただ､CSSを使える人は､SCSSを使った方が良いと思います｡
楽ですよ｡最初は言い分からないですが（笑）｡
＠マークとか＄マークとか出てくるんで､｢うわー｣ってなりますが｡
もし､SCSSに興味がある方へ｡
ぼくはvscodeを使っていますが､SCSSを使えます｡プラグインが必要ですが｡
興味のある人は､｢vscode SCSS｣で調べてみてください｡
さいごに
mixinは慣れるとかなり便利になる？
今のところ､実感はありませんが､もう少し掘り下げて勉強したいと思います｡
