Category: Sass

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化してまとめてしまいます。記述をまとめてしまうことでコピー＆ペーストが減るので楽ができますね。では早速以下のソースを見てみましょう。

今回のエントリでは、Sass を使用するとどれくらいコードが分かりやすくなるのかを実際のソースで比較してみることにしましょう。まずは当サイトで使用しているソーシャルネットワークサービスのアイコンを見てください。サイト右上にあるアイコンですね。このように右側から順にアイコンを配置するという機能を作ります。画像は使用しませんが、 a タグをブロック化してクリックできるようにしましょう。ではまず CSS から作成します。

前回、「Sassを使って2カラムのサイトを簡単に作ろう」で作成したソースをForkし、3カラムのサイトを作ります。では実際に作成したものを見てみましょう。前回から新たに追加した処理部分はハイライトしています。

いきなりですが、Sassのソースと実行結果を見てみましょう。

今回のエントリーでは、前回紹介したSassを利用して簡単に2カラムのサイトを作ってみます。SassはCSSをプログラミングのように組める言語となっていて、変数が使用できます。その変数を利用することで2カラムサイトが簡単にできてしまいます。では実際に出来上がったものを見てもらいましょう。

結構前から話題になっているSassを導入してみましたので、その手順をまとめてみました。分かりやすいサイトは複数あるので、私自身の備忘録として 残したいと思います。