@mixin（ミックスイン）おさらい
Mixin（ミックスイン）はプログラミングの関数に近い。
関数というよりCSSスニペットに名前を付けていつでもどこでも呼び出せるというイメージ。
mixの呼び出しは@includeで呼び出す。
app.css
/*
ミックスイン
よく使うものをスニペットとして保存しておこう
*//*
ミックスインの作り方
頭に@mixinを付ける
@mixin 名前($変数1,$変数2,...){
プロパティ1:$変数1;
プロパティ2:$変数2;
プロパティ3:$変数1 $変数2 ...;
}
*//*
ミックスインの使い方
頭に@includeを付ける
@include 名前(値1,値2,...);
*/（例）@mixinbtn(){display:block;padding:20px30px;color:#fff;border-radius:6px;cursor:pointer;background-color:#20aee5;text:{decoration:none;align:center;}}.footer__sns__btn{@includebtn();//『@includeclass名()』で呼び出し}@contentの使い方
・ @mixinの中で@content;と記述するとコンテントブロックを渡すことができる
・ これにより1つのmixinで呼び出し側に合わせた処理が可能
例えば、mixin,scssというscssファイルに
スマートフォンでのレスポンシブを@mixin似て呼び出せるようにしておきます。
mixin.scss
@mixinsp{@mediascreenand(max-width:767px){@content;}}例.scss
.p-top-training{margin:60pxauto;padding-bottom:98px;position:reltive;@includesp{margin-top:.8rem;padding:0.2rem.6rem0;}&-content{background:url(/xxx/xxx.jpg)no-repeatcenter/cover;width:1120px;height:600px;padding:100px100px155px420px;@includesp{background:url(/xxx/xxx.jpg)no-repeatcenter/content;height:5rem;padding:.6rem.4rem.8rem;width:355px;}}&-background{background:url(/xxx/xxx.png)no-repeatcenter/contain;width:1276px;height:240px;position:absolute;right:0;bottom:-29px;z-index:-5;}&-title{font-size:60px;letter-spacing:6px;color:#fff;text-align:center;@includesp{font-size:.4rem;letter-spacing:.04rem;}}