lessでcssアニメーションを簡単に書く方法

lessを使ってる時にキーフレームアニメーションを簡単に書く方法がないか調べていたら教えてくれているページがあったのでメモ
 参考：LESS CSS でキーフレームアニメーションを楽に書く

view plainprint?

1. // 今回作ったのは、ピコピコ動くアニメーション  
2. // まずはmix-inでアニメーションを指定  
3. .pikopiko() {  
4.  @_r: 10deg;  
5.  from { .rotate(0); }  
6.  5% { .rotate(@_r); }  
7.  10% { .rotate(@_r * -1); }  
8.  15% { .rotate(@_r); }  
9.  20% { .rotate(@_r * -1); }  
10.  23% { .rotate(0deg); }  
11.  to { .rotate(0deg); }  
12. }  
13.   
14. //作ったアニメーションを各ブラウザ用にプレフィックスをつけて指定  
15. //現在、キーフレームアニメーションでプレフィックスが必要なのはwebkitだけらしい  
16. @keyframes pikopiko { .pikopiko(); }  
17. @-webkit-keyframes pikopiko { .pikopiko(); }  
18.   
19. // アニメーションを簡単に指定するmix-inも作成  
20. .animation(@name, @duration: 300ms, @delay: 0, @ease: ease) {  
21.  -webkit-animation: @name @duration @delay @ease;  
22.  -moz-animation: @name @duration @delay @ease;  
23.  -ms-animation: @name @duration @delay @ease;  
24.  -o-animation: @name @duration @delay @ease;  
25.  animation: @name @duration @delay @ease;  
26. }  
27.   
28. .animation-count(@count) {  
29.  animation-iteration-count: @count;  
30.  -webkit-animation-iteration-count: @count;  
31.  -moz-animation-iteration-count: @count;  
32.  -o-animation-iteration-count: @count;  
33.  -ms-animation-iteration-count: @count;  
34. }  
35.   
36. //アニメーションを設定する  
37. .element {  
38.  .animation(pikopiko, 4s);  
39.  .animation-count(infinite);  
40. }  

// 今回作ったのは、ピコピコ動くアニメーション
// まずはmix-inでアニメーションを指定
.pikopiko() {
 @_r: 10deg;
 from { .rotate(0); }
 5% { .rotate(@_r); }
 10% { .rotate(@_r * -1); }
 15% { .rotate(@_r); }
 20% { .rotate(@_r * -1); }
 23% { .rotate(0deg); }
 to { .rotate(0deg); }
}

//作ったアニメーションを各ブラウザ用にプレフィックスをつけて指定
//現在、キーフレームアニメーションでプレフィックスが必要なのはwebkitだけらしい
@keyframes pikopiko { .pikopiko(); }
@-webkit-keyframes pikopiko { .pikopiko(); }

// アニメーションを簡単に指定するmix-inも作成
.animation(@name, @duration: 300ms, @delay: 0, @ease: ease) {
 -webkit-animation: @name @duration @delay @ease;
 -moz-animation: @name @duration @delay @ease;
 -ms-animation: @name @duration @delay @ease;
 -o-animation: @name @duration @delay @ease;
 animation: @name @duration @delay @ease;
}

.animation-count(@count) {
 animation-iteration-count: @count;
 -webkit-animation-iteration-count: @count;
 -moz-animation-iteration-count: @count;
 -o-animation-iteration-count: @count;
 -ms-animation-iteration-count: @count;
}

//アニメーションを設定する
.element {
 .animation(pikopiko, 4s);
 .animation-count(infinite);
}

すげー記述量減った！ ありがたし。 自分1人で作業するならcompassを使うんだけど、黒い画面が苦手な人もいる場合はguiのあるlessで作業してる。

retina用画像のサイズ指定はwidth="50%"でいけそうだ。…と思ったら状況によるな

スマートフォンサイトを作ってるんだけど、もうretina用画像のみで作ってって話になった。

いちいち一個ずつ画像サイズを調べて、その半分のサイズを指定ってやるのが面倒だったので、
 <img src="file.png" width="50%">
って書いたら、うまく表示された。

 height="50%"もいれとくか。

 --add 2013.05.21 height="50%"を入れたら、表示がおかしくなった
さらにwidth="50%"でもおかしくなる画像もあった。

要は…状況による。
imgタグを囲ってる要素にサイズ指定があったりすると、その要素のサイズの50％ってなってしまうのかも。
 半分のサイズを指定するのが安全そうだ