技術ブログ開始

どうも。面白法人カヤックの田島です。

技術ブログと通常のブログの記事がごちゃまぜになったブログはかっこ悪いので、別々に分けることにしました。

技術ブログ・通常ブログともに毎日更新していきます。

さて、現在はマークアップ言語における便利なライブラリやツールを導入し、勉強しております。

具体的には、Sass , Compass, Gruntといったところです。

本日はSassとCompassを扱いながら勉強しました。

これらはCSSをより便利に記述できるメタ言語です。通常のCSSでは変数やif文など、プログラミング言語っぽい書き方ができないので不便なのですが、それらを使えるようにすることでより便利に直感的に書けちゃうってやつです。

今日はSass/Compassの中で便利な機能の一つであるプレースホルダーについて紹介します。

大規模なCSSを書いていると、同じ記述を何度も記述しなければならないことが多いです。そんなとき、プレースホルダーを使うことでエレガントに書くことができます。

【記法】

/*プレースホルダー*/

%hogehoge{

  /* CSSを記述*/

}

/*プレースホルダーを引用*/

#hoge{

  @extend %hogehoge; // プレースホルダーが展開される

}

clearfixやbefore、afterのスタイルを複数セレクタに対して適用しなければならない場合は頻繁にあります。そうしたとき、上記の方法を使えば同じスタイルを繰り返し記述したりすることなくセマンティックに記述できます。

ちなみに、Sassで書いた言語はブラウザ側で認識することはできないため、CSSにコンパイルして出力する必要があります。

その際、

sass --watch (出力元Sassファイル) : (出力先CSSファイル)

というコマンドを使えばSassファイルが上書きされる度に自動でCSS書き出しを実行してくれて便利。