この記事は賞味期限切れです。（更新から1年が経過しています） 角丸やグラデーションをCSS3で表現しようとする時、 どうしても各々の環境への対応のおかげで長いCSSになってしまいますね。 そんな時便利なのがLESSのMixin機能です。 以前も軽くとりあげたLESSですが、 繰り返し出て来る表現にはMixinを使うと大変楽です。（要するに、関数のようなものです） 何度も同じ記述を繰り返さずに済みますし、汎用性のある物ならば使い回しも容易です。 こんな感じに。 角丸 .roundrect(@r:10px){ -webkit-border-radius:@r; -moz-border-radius:@r; border-radius:@r; } 引数にはborder-radiusのサイズを入れてあげましょう。 使い方 .normalBlock{ width: 320px; height: 24
こんにちは、NAVER UIT つしまです。 Less & Sass Advent calendar 2011の8日目です。 これまでのAdvent calendarの記事で、SassやLessの概要、活用法などが見えてきました。 今回は、「Lessは機能不十分そうだし、Sassオシ多いし、Sassを使いはじめようかな・・」と思っている方に向けてはじめてのCSSメタ言語はLessがおすすめというおはなしです。 Lessって？ 既にCSSとフレームワークとメタ言語(2日目記事)やLESS初心者向けのナニカ(4日目記事)でも紹介があったとおり、LessはCSSを記述するためのメタ言語です。 ただ後発であるにも関わらず、SassにあるのにLessにない機能は結構あって、例えば、ifやforなどの制御文、extendが使用できなかったり、cssへの出力形式がSassほど選べなかったり・・
It's CSS, with just a little more. Use with Node.js: npm install -g less > lessc styles.less styles.css Or the browser: <link rel="stylesheet/less" type="text/css" href="styles.less" /> <script src="https://cdn.jsdelivr.net/npm/less" ></script> Or try the online playground ! 🆕 Less (which stands for Leaner Style Sheets) is a backwards-compatible language extension for CSS. This is the official do
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
