Webエンジニア目指して#12
どうも1日あたりの残業時間が強制的に１時間減らされてウキウキマンです。給料減るけど仕事終わりに対する1時間の比率がかなり大きいので助かります
本命の学習ですが、イベントが重なって全然できてませんでした...
勤務先でマクロ使い始めたのがその1つですが、同じことを繰り返すにはなかなか便利ですね...自動化しなかった作業で20時間ほどロスしてそうです
さてProgateやっていきます
HTML&CSSが終わってjsやろうかと思いましたがなんとなくSassやります。
短いしすぐ終わりそうですからね
というわけで早速書いていきましょう
Sassの利点
sass記法がかなり使いやすい
(progateはScss記法ですが...)
セレクタのネストができる。
・要素名の変更があったときにかなり楽になる
・:hoverなどを入れ子にするときは&:hoverと記述する
例：li{
&.sample{ }
}
css変換→.sample li{ }
Progateだとネストでできるところで&記法使ってますね...もしかしてSassについてはあんまり？なのか？どうなんだ？
変数を使用できる、カラーコードなどを格納できる
・多分どの言語でも共通ですが、上から処理するため変数宣言を先にする必要がある。
例:
$sample:#fff;
p{ color:$sample; }
・セレクタ内で宣言をした場合、そのセレクタ内でのみ存在する定義となる。
この適用される範囲の箱（？）をスコープというらしいです。jsを少し調べたときにこの単語出てきてよくわからなかったんで実例が出てきて助かりました
ただ、スコープのうまい使い方が思いつきませんね...別スコープで同じ名前使ってたら良くなさそうだし...
mixin機能
・スタイルをまとめて任意の文字列に定義できる。
@mixin sample{ color:#fff; background-color:#000; }
のように定義し、
.mihon{ @include sample; }
で呼び出す。
・mixinに引数を使う
上で書いたmixin sampleを.mihonで読み込み、さらにfont-sizeを指定するとしましょう。
普通ならそのままスタイルを記述しますが、
@mixin sample($size){
color:#fff;
background-color:#000;
font-size:$size;
}
.mihon{ @include sample(25px); }
と記述することで引数としてincludeごとにfont-sizeを指定できます。
関数を使用できる
なんと関数まであるとは
Progateで出てきたのは色の関数でした
色を暗くする color:darken($sample,50%)
明るくする color:lighten($sample,50%)
もう機能のオンパレードですね。最高
外部ファイルの読み込み
同ディレクトリ内に「_sample.scss」というファイルを用意し、
@import "sample"; と記述することで読み込めます。
ファイル名のアンダーバーは必須。
読み込む際はアンダーバーと拡張子の省略が可能。
そして、読み込んだscssの中に変数が定義されていれば、その変数を使うことができます。
これ、パレットみたいな感じで結構使えそうですね。むしろ変数は全部外に出しとけばいいかな？
こんなところです。かなり便利そうですね。メンテ性も上がるしsassがcssの完全上位互換ってのがよく言われるのがわかります。メタ言語だから当たり前ですが
目標物の制作に入ったのでこの辺にします。ではでは
