Categories
CSS Sass

Sass:CSSで描く図形13種をたった一行で書けるようにしてみた

テスト用の表示や遊び心で図形を描きたい、ということがたまにあります。そんな時にお絵かきソフトを使わずに CSS で図形を書くことはないでしょうか?わざわざ Photoshop を開くのも面倒だと感じてしまう方! Sass でさっと図形を書いてしまいましょう。
 

 

Categories
CSS Sass

ベンダープレフィックス不要!Sassで自動設定する方法

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

 

 

Categories
CSS Sass

MTRLib α版 – Sassで未対応ブラウザへのCSS3使用は警告&自動修正!

ライブラリの制作の方法については、以前のエントリである「Sassで未対応ブラウザへのCSS3使用は警告&自動修正!」を参考にしてください。今回は、紹介しているトピックスをまとめたものをライブラリとして公開する旨のエントリーとなります。こんな感じでライブラリ作ってますよ!と言いたいだけなので、まだまだ完成とは言えるものではありません。

 

 
 

Categories
CSS Sass

Sass導入 – Windows7 + Sass

これまで、 Sass の記事を連投してきましたが、導入方法を説明するエントリーが概要のみとなってしまっていたので再度詳細を載せてみたいと思います。 Windows7 としていますが、 Ruby のインストール後は、 Mac でも同様です。これは、 Mac 製品は既に Ruby がインストールされているためです。

Categories
CSS Sass

SassでRGBA値を16進数のカラーコードに変換する – @function使い方

今回は計算がメインのエントリーとなります。RGBA 値のバラバラな値を、16 進数のカラーコードに変換してみます。

Categories
CSS Sass

Sassで使える変数名や@mixin名 – CSS3をオーバーラップする

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

Categories
CSS Sass

Sassで”不要なCSS”を出力しない – nullの使い方

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

 

Categories
CSS Sass

Sassの@contentの使い道とは? – @contentの実験と結果

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

 

Categories
CSS Sass

SassでHSLAをRGBAに変換する – JavaScriptの記述を減らす!

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

Categories
CSS Sass

Sassで未対応ブラウザへのCSS3使用は警告&自動修正!

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