昨日の「Ruby初心者だけどゼロパディングするカスタムSassファンクションを作ってみた」に引き続き、文字列を置換するカスタムSass関数(custom Sass functions)を作ってみました。以前ヨモツネットの@yomotsuさんが「SVG GradientをSASS(LESS)で生成してCSS Gradientとして扱うmixin」の中で「SASSで文字列のreplaceができればいいのですが...。」と書かれていたので、需要があるかなと思った次第です。

• ※ "custom Sass functions"を昨日は「カスタムSassファンクション」と訳したのですが、今日からは「カスタムSass関数」と訳すことにします。「カスタムSass関数」の方が分かりやすく、しっくりくる気がするので...。

• 続きを読む

Twitterで「Sassを書いている時にゼロパディング（ゼロ埋め）したいんだけど...」という趣旨のツイートを見て（頻繁にありそうな話ですね）、次のようなコードを書きました。

• ※ width: 2em;はアテです。

// SCSS
$tmp: "";
@for $i from 1 through 3 {
	@if $i < 10 {
		$tmp: "0#{$i}";
	} @else {
		$tmp: $i;
	}
	.item-#{$tmp} { width: 2em; }
}

// CSS
.item-01{ width:2em; }
.item-02{ width:2em; }
.item-03{ width:2em; }

ただ、これだと汎用性・再利用性が悪いので、カスタムSassファンクションを考えてみました。

• 続きを読む

CSSのみでグラデーションが生成できるlinear-gradient関数は便利ですが、実際に利用しようとすると以下のような課題が発生します。

• ベンダープリフィックス（-moz-や-webkit-）を付けた記述をいくつか書かなければならない
• ビジュアルデザイン上（PSD上）で設定されたグラデーション設定（カラー・位置）を、色の数だけコピ＆ペーストしなければならない

これらの課題はグラデーションの数が増えれば増えるほど負担になってきます。そこで、SassとPhotoshopのスクリプトを利用して、クロスブラウザなCSS3グラデーションを簡単に実現する方法をご紹介します。

対応ブラウザ

• Internet Explorer(6〜10)
• Firefox
• Safari
• Google Chrome
• Opera

• ※ IE8以下はCSS3 PIEでサポート。

• 続きを読む

DreamweaverでSassを使う（SCSSを書く）時、Zen Coding for Dreamweaverを利用しようとしてもデフォルトでは上手く動作しません。調べてみると、.scssファイルを編集している際のドキュメント解析モードが「text」と判定されるためです。

そこで、Zen Codingのコアファイルをカスタマイズし、SCSSを書く際もZen Codingが利用できるようにする方法をご紹介します。

• 続きを読む

Less & Sass Advent calendar 2011の17日目は、@_hideki_aがSassの出力ソースをカスタマイズする方法について書かせていただきます。

3日目の「Sass を今すぐ実務で使おうよ！」ほか様々な記事で紹介されている通り、SassはCSSの設計を強力にサポートしてくれる素晴らしい言語です。しかしながら、学習コストや環境設定など多少のハードルがあり制作チーム全員がすぐに導入するのは難しいという場合や、納品後の運用はクライアントさんが行うためにSassの導入はしてもらえないという場合もあるのではないでしょうか。

そのようなことから、構築時はSassでCSSを設計し、運用ではSassで生成したCSSファイルを直接編集するという場面も想定されます。その際、「従来から決められている社内のCSS記述ルールに沿ったCSSを生成しなければならない」という問題に遭遇する可能性が考えられます。

• 続きを読む