テスト用の表示や遊び心で図形を描きたい、ということがたまにあります。そんな時にお絵かきソフトを使わずに CSS で図形を書くことはないでしょうか？わざわざ Photoshop を開くのも面倒だと感じてしまう方！ Sass でさっと図形を書いてしまいましょう。
今回のエントリーでやりたいことは、以前に作成したサポートするブラウザのパラメータ設定から、不要なベンダープレフィックスを割り出して表示させないようにすることです。できる限りユーザーが触れるパラメータは少ないにこしたことはありませんよね。
ライブラリの制作の方法については、以前のエントリである「Sassで未対応ブラウザへのCSS3使用は警告＆自動修正！」を参考にしてください。今回は、紹介しているトピックスをまとめたものをライブラリとして公開する旨のエントリーとなります。こんな感じでライブラリ作ってますよ！と言いたいだけなので、まだまだ完成とは言えるものではありません。
これまで、 Sass の記事を連投してきましたが、導入方法を説明するエントリーが概要のみとなってしまっていたので再度詳細を載せてみたいと思います。 Windows7 としていますが、 Ruby のインストール後は、 Mac でも同様です。これは、 Mac 製品は既に Ruby がインストールされているためです。
今回は計算がメインのエントリーとなります。RGBA 値のバラバラな値を、16 進数のカラーコードに変換してみます。
今回は変数名についてまとめてみました。変数名や@mixin名、@function名に使える名前には規則があります。名前についての実験と結果を載せていますので、参考になればと思います。
最近は通信速度も向上して、CSSの大容量化による WEB ページ表示速度の低下も問題視されなくなってきたと思います。実際に、CSS をスリム化する程度で本格的に構造自体を毎案件ごと手を付ける方も少なくなったのではないでしょうか。 WordPress を使用している方は最適化されたサーバーというものも存在しています。ここであえて、ms (ミリセック) を狩る狩人方には Sass をお勧めしたいと思います。
Sass の少し突っ込んだ使い方について、かなりの方が見てくださったようなので今回もちょっと変わった内容を紹介したいと思います。いまいち使い方の分からない @contetn について今回はスポットを当ててみたいと思います。
同じ色相で、様々な色のパターンを作るのに便利な HSLA という CSS3 の機能があります。 HSLA の指定を RGBA に変換する、なんてことも Sass ではできてしまいます。 HSLA に対応しているブラウザは以下となります。
