Author: admin

案件によって不要なベンダープレフィックスの記述を無くしてしまいましょう。時には不要な記述となり、 CSS のファイル容量を増やしてしまう原因にもなります。
　

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化を進めてきました。しかし、実はこのままでは問題があるのです。その可変長引数の問題とは「引数を指定しないとコンパイルエラーになる」です。引数を指定しないでも動作するよう汎用性を持たせていきましょう。

Sassでの可変長引数の機能は、ver.3.2.0から追加された機能です。まだ何ができて何ができないのかがよく分かりません。実験して気づいたテクニックなどを記載していますので、是非参考にしてください。サンプルとして以下の記事でも記述していますので、見て頂けたらと思います。

「Sassでbox-shadowを@mixin化する – 可変長引数を使おう」

以前に記載した、「Sassで角丸の矩形を超簡単に記述する方法」をForkして、影を落とすbox-shadowにも対応してみましょう。では実際に動いているものを見てみます。

Sassでは@mixinの他に、@functionという処理をまとめる機能があります。しかし、通常SassではCSSの機能をまとめることがほとんどであるため使う頻度は少ないかもしれません。@mixinと@functionの違いをざっくりとまとめてみます。

数あるCSSのテクニックの一つで、三角形と四角形を組み合わせて矢印を書いてみます。実際に描いているものから見てみましょう。

前回のエントリで「Sassを使うとコードが分かりやすくなる？ – ネスト化を利用しよう」を書きましたが、今回はCSS3を利用してhover時のアニメーションや、角丸、hover自体の記述をmixin化してまとめてしまいます。記述をまとめてしまうことでコピー＆ペーストが減るので楽ができますね。では早速以下のソースを見てみましょう。