Rucksack - スタイルシートの面倒なところを簡単に
SassやLESSは一旦覚えてしまえば手軽に使えますが、最初の覚えるまでが面倒というイメージがあるかも知れません。また、デファクトがまだ定まっていない雰囲気もあり、どちらかだけを使っているとプロジェクトによっては別な方を選択する可能性もあります。 そこで試してみたいのがRucksackです。ほぼ素のスタイルシートながら、関数的に特定の書き方を展開してくれるツールです。
Rucksackの使い方
rucksackはいわばスタイルシート用の関数のようなものです。例えば文字サイズをレスポンシブにしたい場合は次のように記述します。
.foo {
font-size: responsive;
}
これは次のように展開されます。
.foo {
font-size: calc((12px - 420px * 0.010465116279069767) + 1.0465116279069768vw);
}
@media screen and (max-width: 420px) {
.foo {
font-size: 12px;
}
}
@media screen and (min-width: 1280px) {
.foo {
font-size: 21px;
}
}
さらに次のような展開も。
.foo2 {
position: absolute 0 20px;
}
↓
.foo2 {
position: absolute;
top: 0;
right: 20px;
bottom: 0;
left: 20px;
}
よくあるclear fixもコマンド化されています。
.foo3 {
clear: fix;
}
↓
.foo3:after {
content: '';
display: table;
clear: both;
}
面倒なレンジ入力もこの通り。
input[type="range"]::track {
height: 2px;
}
↓
input[type="range"]::-webkit-slider-runnable-track {
-webkit-appearance: none;
height: 2px;
}
input[type="range"]::-moz-range-track {
-moz-appearance: none;
height: 2px;
}
input[type="range"]::-ms-track {
height: 2px;
}
input[type="range"] {
-webkit-appearance: none;
}
input[type="range"]::-moz-focus-outer {
border: 0;
}
アルファ値を使いたい場合もRGB指定できるようになります。
.foo4 {
color: rgba(#fff, 0.8);
}
↓
.foo4 {
color: rgba(255,255,255, 0.8);
}
Web Fontの面倒くさい設定も手軽に。
@font-face {
font-family: 'My Font';
font-path: '/path/to/font/file';
}
↓
@font-face {
font-family: 'My Font';
src: url("/path/to/font/file.eot");
src: url("/path/to/font/file.eot?#iefix") format('embedded-opentype'),
url("/path/to/font/file.woff") format('woff'),
url("/path/to/font/file.ttf") format('truetype'),
url("/path/to/font/file.svg") format('svg');
}
aliasによってちょっとした変数もサポートされます。
@alias {
fs: font-size;
bg: background;
}
.foo5 {
fs: 16px;
bg: #fff;
}
↓
.foo5 {
font-size: 16px;
background: #fff;
}
RucksackはPostcssというツールの上で作られています。ほぼ素のCSSなので学習コストは低いです。また自分で拡張すればスニペット的に使うこともできるようになりそうです。
Rucksackはnode/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。