Month: September 2012

Sass を使った CSS のテクニックの蓄積について、今回は検証を行なってみました。@importについては「SassでCSSテクニックを蓄積する – @importを使う」にて解説しています。 @import は必要だとして !default はどうなのか？という Tips となります。
　

コードを分かりやすく、見やすく、短くするためにSassの機能を使ってきました。アイコンを並べるという単純なコードですが、CSSのままより改良の余地がまだまだあることを知っていただければSassの強みも分かって頂けるかと思います。ではアイコンを並べる処理を更に改良していきましょう。今までのアイコンを並べる記事は以下になります。
「Sassを使うとコードが分かりやすくなる？ – ネスト化を利用しよう」
「Sassを使って面倒なCSS3を簡単に書いてしまう – プロパティ名にも変数を使おう」

SassでCSSのテクニックやアイデアを蓄積してきましたが、CSSで直接管理していることと大きな違いがあります。CSSだと、テクニックを蓄積したファイルを読み込むと今回のWEBサイト制作には必要ないものも記述されてしまいますよね。絶対使うテクニックは1つのファイルにまとめるとしても、たまに使うものはどうでしょうか。その度に、自分用のテクニック集からコピー＆ペーストしていませんか？はたまた、テクニックを全て読み込んでファイル量が多いことに悩んだことはありませんか？面倒だと感じたことはないでしょうか？
　
Sassはこの悩みを解決できます。
　

以前に、「Sassでbox-shadowを@mixin化する – 可変長引数を使おう」にて可変長引数を使用した@mixin化を進めてきました。しかし、実はこのままでは問題があるのです。その可変長引数の問題とは「引数を指定しないとコンパイルエラーになる」です。引数を指定しないでも動作するよう汎用性を持たせていきましょう。