【2nd】DAY26『Progate:Sass Ⅰ』

プログラミング

内容

今日は久しぶりにProgateをします。やることは「Sass」を学習します。

やってみて思ったこと

いままで、CSSで書いていたけどSassを使うことですごく記述量が少なくなるのは良いなと思いました。

使いこなせるようになるには時間がかかりそうですが、これから使っていこうと思います。

キーワード

Sass(サス)

「Sass(サス)」はCSSを効率的に書くことができる言語です。

SassはCSSを入れ子構造で書いていくので、コードを書く量が少なくなります。

また、コード(クラス名)を書き換えるときに上の階層の部分を書き換えるだけで下の階層にも適用させることができます。そのため、修正の時にも便利さを感じます。

「:hover」,「:active」,「要素.クラス名」

これらをSassで書きたいときには、入れ子で書くのは変わりません。しかし、ただ「:hover」といったように書くのではなく、直前に「&」を書く必要があります。

mixin

これを使えば、複数のコードを1つのまとまりとすることができて「mixin名」を書くだけで、中に書かれたCSSを適用させることができるすごく便利な機能です。

書き方は、「@mixin mixin名 { コード }」と書くことで定義することができます。

使うときには、「@include mixin名;」と書きます。

JavaScriptのように引数を指定できるので、2行で書いていたところを1行に減らすこともできます。

また、他のScssファイルを読み込みたいとき、読み込まれるファイルにはファイル名の1文字目を「_(アンダーバー)」で書き始めないといけないので、注意が必要です。

以上がDAY26でした。

コメント