Month: September 2012

今回のエントリーでやりたいことは、以前に作成したサポートするブラウザのパラメータ設定から、不要なベンダープレフィックスを割り出して表示させないようにすることです。できる限りユーザーが触れるパラメータは少ないにこしたことはありませんよね。

ライブラリの制作の方法については、以前のエントリである「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 に対応しているブラウザは以下となります。

Sass を使用するといかに便利に早く確実に案件をこなせていけるかは、十分に今までの記事でお分かりになられたかと思います。しかし、まだまだSass の力はこんなものではありません。未対応ブラウザに対する処置はどんなに小さい案件でもつきまとう「無駄な」作業です。これをできる限り自動で対処できるようにしたいと思います。
　

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