カテゴリー別アーカイブ: CSS

BootstrapのLESSで使われているループを応用してCSSユーティリティを作成

CSSでマージンをつけるだけのユーティリティ、みなさんも使用されていることがあるかと思います。

.mb10 {
margin-bottom: 10px;
}
.mb20 {
margin-bottom: 20px;
}

・・・これをまあ続けていくわけですけど、昔は画面の大きさもさほど大きくなかったしまあmb40とかmt40くらいまであればいいかなーと考えてましたが、最近は解像度もでかいし、デザイン性もいいサイトもいっぱいあったりして、マージンの使い方も美しいんですよね。

なもんで、最近は自分の場合は.mb100くらいまで用意します。
しかも5px刻みで。

なのでCSSをあらかじめ準備しとかないとイチから書いてると途方も無いことになる。(ってほどではないけど)

続きを読む

LESSのコンパイラ、「Koala」に変更しました

今までWinlessを使っていたのですが、
LESSでコンパイルされたCSSファイルの見た目を調整する」で書いたように、
コンパイル後にちょこちょこと書き換えないといけないわけです。

で、Winlessが一番キツイなー、と思ったのが、
「コメントアウトのテキストを一切コンパイルできない」
という点です。
※もしかしたら設定でできるようになるのかも知れませんが。

続きを読む

LESSでコンパイルされたCSSファイルの見た目を調整する

先日LESSを使用したコーディングの発表?をやって、
これをお仕事に活かさない手はない!と思い、LESSを実際に使用してみましたが…。

コンパイルされたCSS、全然改行されてねえ!
スペースも一切入ってねえ!

うーん、これではメンテナンス性が低過ぎる。
他の子たちはLESSなんてまだまだ使えないし。

続きを読む

WordBench Nagoya 5月

本日はWordBench Nagoya5月でした!

そしてな、なんと……初の発表をしてきました( ・w・)ノ
「LESSをがんばって使ってみた」です。
言うよりも見るがはやい、どうぞ、スライド共有します。

http://www.slideshare.net/kuma2515/less-21408807

続きを読む