あいさつ
みなさん、こんにちは！
今週は小テストやら授業の課題やらで忙しくて投稿が遅くなってしまいました😨
最近は寒くなってきているので早すぎると思うけど裏毛タイツを履いています🫠
もう直ぐ家族が名古屋に来るので楽しみです！
今日はSCSSについて習ったので復習していこうと思います📖
復習
CSSプリプロセッサとはCSSをプログラミングに近い形で表現していままでのCSSよりも可読性や保守性を向上言語のことを言います。CSSにはない「ネスト（入れ子構造）」変数などがあり、簡潔にわかりやすく記述することができます。CSSプリプロセッサの中にはSass（SCSS）、PostCss、Less、Stylusがあり、学校ではSassを習いました。また、CSSの構築方法の一つである「BEM」とセットで使われることが多いらしいです。
SassとはSyntactically Awesome StyleSheeの略称で文法的にすごいスタイルシートという意味だそうです。Sassでできること「四則演算」、「変数」、「ネスト」、「親セレクタの参照」、「挿入（mixin）」の五つが代表的です。
「四則演算」
（例）
body{
line-height:(30/12);
}
/*()をつけないとそのままで出てしまう*/
body{
line-height:30/12;
}
/*単位をつけたいときは+か計算でつなぐ*/
body{
letter-spacing:(20/1000)+em;
letter-spacing:(20/1000)*1em;
}
/*%は+でつなぐとエラーになる*/
body{
letter-spacing:(20/1000)+%;「変数」
（例）
$color-main:#00ff00;
$color-bg:#220011;
/*宣言することでカラーを入力するときはカラーコードを入力するのではなく変数を入力する*/
body{
color:$color-main;
background-color:$color-bg;
}「ネスト」
（例）
/*親要素と子要素などの関係値を表現できる*/
/*unit*/
.unit{
.btn{
padding-top:30px;
}
}「親セレクタの参照」
（例）
/*HTMLでクラス名をunit__textなどにしている場合、CSSでunitというクラス名の中で&__textという形で記述することができる*/
/*footer*/
.footer{
&__copy{
font-weight:bold;
}
}「挿入（mixin）」
（例）
/*よく使うコードをmixin 名前 で宣言し、includeで名前を挿入する*/
@mixin inner(){
max-width:1000px;
width:90%;
margin-left:auto;
margbin-right:auto;
}
/*header*/
.header{
&__inner{
@include inner();
}
}「引数持った挿入（mixin）」
（例）
/*変わるかもしれない値を変数で宣言し代入する*/
@mixin inner($mw:1000px,$w:90%){
max-width:$mw;
width:$w;
margin-left:auto;
margin-right:auto;
}
/*header*/
.header{
&__inner{
@include inner();
/*@include inner(1000px,90%);*/
}
}
/*両方とも初期値の場合*/
@include inner();
/*一つ目の値のみ変更の場合*/
@include inner(1200px);
/*二つとも変更の場合*/
@include inner(1200px,100%);さいごに
この様に復習することで2度あたまにインプットされ覚えれる様になりました。これからも継続していこうと思います！JavaScriptもわからないところが減る様に復習していきたいと思います！
また、ひとり〇〇に興味が出てきたのでカラオケなど楽しもうと思います😊