夜中に駐車場でキスしてる熟年カップルを見て表現できない気持ちになったKameです。
オレサスも第3弾でもう終わりでしょう…。僕自身全然使ったことのない領域に踏み込みます。
Functionsっつーのがあるらしい
ちょっと情報を掘ってみますとやっばいのが見つかりました。
色んな計算や処理をしてくれるFunctionsっていうのがあるみたいです。
詳しいことはhttp://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#darken-instance_methodを見てやってください。
とてもじゃないですが、覚えきれないです。
その中でこいつは使えそうだ！！と思った奴を紹介します。※めっさちっちゃい用途です。
色の調整
たまになんですが、デザインが上がってきた際にリンクの色は分かったのはいいけども、:hoverの時の色とか:visitedの時の色は指定されていない場合があります。
デザイナーさんに相談しろよというのは一旦おいといてもらって、そんな時に活躍できそうなFunctionです。
lighten(color, amount)
lightenは第1引数に色を指定して、第2引数に割合（％）を指定します。
すると第1引数の色の明度を第2引数分上げて出力してくれます。
:hoverを軽くやっちゃうならこれでもいいんでないかなと。Fireworks立ち上げなくてもいいですし。
- scss
-
a:hover{ color:lighten(#0000FF, 20%); } - css
-
a:hover { color: #6666ff; }
desaturate(color, amount)
darkenはlightenの逆で、第2引数の分だけ第1引数の色を暗くします。
無理やり臭いですが:visitedにどうでしょう。
（change_color(color, kwargs)っていうのを使って赤みだけ足すっていうのもあり？？？）
- scss
-
a:visited{ color:darken(#0000FF, 30%); } - css
-
a:visited { color: #000066; }
こんなmixin作ってみたり？
$link:#0000FF;
@mixin linkColor($color){
color:$color;
&:hover{
color:lighten($color, 20%);
}
&:visited{
color:darken($color, 30%);
}
}
a{
@include linkColor($link);
}
出力！
a {
color: blue;
}
a:hover {
color: #6666ff;
}
a:visited {
color: #000066;
}
見ての通り、リンクの元の色を指定すれば、明度を調整して:hoverと:visitedまで作ってくれます。
Sassには色に対してめちゃめちゃ幅広いFunctionsが用意されているので、自分好みにカスタマイズして使うのがいいと思います！
なんか使えそうなzip
まだはっきりと使用用途を見いだせていないのですが、これは覚えておいたらいつか使う時が来るんではないかと思ったのがzip(*lists)です。
複数のlists（配列）同士を統合して、1つの配列にするFunctionsです。ショートハンドを使うようなプロパティには使えるんではないかなと。
下はなんかやってみた例です。実用性はほぼゼロ。
$name:aaa,bbb,ccc;
$url:url('aaa.png'),url('bbb.png'),url('ccc.png'); // ここもうまいことやりたかったですが思いつかなかったorz
$repeat:no-repeat,repeat-x,repeat-y;
$position:0 0,50% 50%,100% 100%;
$bg:zip($url,$repeat,$position);
$i:1;
@each $id in $name {
##{$id}{
background:nth($bg,$i);
}
$i: $i + 1;
}
出力！！！！
#aaa {
background: url("aaa.png") no-repeat 0 0;
}
#bbb {
background: url("bbb.png") repeat-x 50% 50%;
}
#ccc {
background: url("ccc.png") repeat-y 100% 100%;
}
url、repeat、positionと部分別に書いて最後にまとめたりできるので、
ショートハンド使わずに書くのに慣れてる人が行数を減らせたり（？）。うーんなんかもっといい用途があるような気がするんですが。
Sassでひとつ紹介していなかったnth(list, n)というのを使ってます。
配列から指定した番号の変数を取り出します！JavaScriptとかよりは少し面倒ですね。
自分でも作れちゃう！！！
なんと自分でもFunctionが作れるみたいです。下記のような型です。
@function ファンクション名($引数...) {
@return 処理;
}
標準のFunctionsじゃ足りねえ！って言う時とかは自分で作れるんですから大したもんですよ全く。
こんな感じで自分たちで作ったやつをバンバン共有とかしていけたらいいですね！JavaScriptライブラリみたく。