Category: CSS

今回は変数名についてまとめてみました。変数名や@mixin名、@function名に使える名前には規則があります。名前についての実験と結果を載せていますので、参考になればと思います。

最近は通信速度も向上して、CSSの大容量化による WEB ページ表示速度の低下も問題視されなくなってきたと思います。実際に、CSS をスリム化する程度で本格的に構造自体を毎案件ごと手を付ける方も少なくなったのではないでしょうか。 WordPress を使用している方は最適化されたサーバーというものも存在しています。ここであえて、ms (ミリセック) を狩る狩人方には Sass をお勧めしたいと思います。

Sass の少し突っ込んだ使い方について、かなりの方が見てくださったようなので今回もちょっと変わった内容を紹介したいと思います。いまいち使い方の分からない @contetn について今回はスポットを当ててみたいと思います。

同じ色相で、様々な色のパターンを作るのに便利な HSLA という CSS3 の機能があります。 HSLA の指定を RGBA に変換する、なんてことも Sass ではできてしまいます。 HSLA に対応しているブラウザは以下となります。

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

案件によって不要なベンダープレフィックスの記述を無くしてしまいましょう。時には不要な記述となり、 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化を進めてきました。しかし、実はこのままでは問題があるのです。その可変長引数の問題とは「引数を指定しないとコンパイルエラーになる」です。引数を指定しないでも動作するよう汎用性を持たせていきましょう。