SASS本まとめ② ~@extendedと@mixと@each~

Web制作者のためのSassの教科書
Web制作者のためのSassの教科書

この本が素晴らしく有益で、また情報量が膨大であったので、未知だったものや、中でも特に今後使いそうだなと思ったものをメモ。
以下のサイトで、サンプルコードを参照することができる。
http://book.scss.jp/

@extended

 

http://book.scss.jp/code/c4/01.html
一度書いた中身をもう一度使用したい時に使えるってことですね。
@importで外部ファイルで書いたものを再利用できるし、コピペとは違ってコード量が減るので、可読性が上がりますね。

 

http://book.scss.jp/code/c4/01.html
プレースホルダーっていい方がわかりにくいけど、「%」を頭に置くことで、中身は継承するけど、セレクタ名は継承しないようにできる。
つまりモジュールを作るっていう発想なのかな。
要は「いろんなものを作る時に頻繁に使うcssのテンプレ」をモジュール化してしまって、毎回毎回同じことを書くんじゃなくて、そのファイルを読み込んで中身を継承することで、効率的にコードを書こうって発想なんですね。

しかしこの@extendには注意すべき点が合って、
・子孫セレクタ
・小セレクタ
・隣接セレクタ
・間接セレクタなど
複数のパターンで成り立つセレクタには使えないらしい。

@mixin

http://book.scss.jp/code/c4/02.html
この時点では@extendedとほぼ同じ、mixinを定義した時点では、何も起こらなく、@includeした時に初めて反映される。

http://book.scss.jp/code/c4/02.html
@extendedとの違いは引数を使うことができるという点。
ここでは定義する時に、($value: 3px) のように引数の初期値「3px」を設定しているが、($value)とだけ書いて初期値を省略することも可能

@each

scss↓

コンパイルされたCSS↓

scssの中でのforループ。
これは上手く使えば、いろんな場面で使えそう。
覚えておこう。

コメントを残す