Ruby初心者だけどゼロパディングするカスタム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ファンクションを考えてみました。

作成したカスタムSassファンクション

SeanColombo.comHow to make (and use) a custom SASS functionを参考に試行錯誤しながらコードを書いたところ、次のように仕上がりました。

require "sass"

module SkywardDesignFunctions
 def zeropadding(beam, i)
 assert_type beam, :Number
 assert_type i, :Number
 
 retVal = sprintf("%0" + beam.to_s + "d", i)
 Sass::Script::String.new(retVal)
 end
end

module Sass::Script::Functions
 include SkywardDesignFunctions
end

使用方法

  1. 上記コードを任意のディレクトリに任意の名前で保存するか、GitHubからダウンロードします(例:skyward_design.rb)。
  2. ゼロパディングしたい場面でzeropadding(変換後の桁数, 変換対象の値/変数)と記述します。例えば次のようなコードです。
    $tmp: "";
    @for $i from 1 through 3 {
    	$tmp: zeropadding(2, $i);
    	.item-#{$tmp} { width: 2em; }
    }
  3. 次のように-rオプションでカスタムSassファンクションのファイルを指定してコンパイルします。
    sass sample.scss sample.css -r skyward_design.rb

コマンドが長い...、という場合は「バッチファイル・シェルスクリプト」の出番です。「サイトのルートディレクトリをコマンドラインで簡単に開き、compassを実行する方法」の項が参考になると思います(compass watchをSassのコマンドに置き換えるだけです)。

Compassを使っている場合

Compassを使っている場合はconfig.rbに次のコードを追加します。後はいつものようにcompass watch(compass compile)でOKです。

require "./skyward_design.rb"

ダウンロード

zeropadding関数と(翌日の記事の)str-replace関数をまとめたモジュールをGitHubに置きましたのでご利用下さい。

  • 今後仕様が変更になる可能性があることを予めご了承下さい。
この記事のタグ