[B! less] muyuuuのブックマーク

muyuuu id:muyuuu

lessに関するmuyuuuのブックマーク (4)

CSS3対応の為のLESSスニペットメモ - Mach3.laBlog
この記事は賞味期限切れです。（更新から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
muyuuu 2013/06/13
TIPS等

less
リンク
CSSをシンプルに書くことができるLESS使ってみた
Posted: 2011.12.13 / Category: HTML&CSS / Tag: LESS CSSはシンプルなのでとてもわかりやすい言語ではありますが、その分サイトが肥大化していくとメンテナンス性が悪くなりますね。 LESSを使えばプログラム的な書き方ができるので、ムダなく効率的に管理できるみたいです。ネスト（階層）化できるたとえばこんなCSSがあります。 css div.section { width: 500px; margin: 0 auto; border: solid 1px #999; padding: 1px; } div.section h3 { background: #999; font-size: 131%; padding: 10px; } div.section h3 a { color: #fff; } div.section h3 a:hove
muyuuu 2013/06/13
TIPS等

less
リンク
Getting started | Less.js
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
muyuuu 2013/06/13
TIPS等

less
リンク
「LESS - Leaner CSS」について | nagomu.me
- 2 users
- nagomu.me
- 学び
nagomu.me About Search 「LESS - Leaner CSS」について Dec 01, 2010 - @nagomu 今さらネタだったのですが、まあまあ外部リンクがあったので、一応、復活した記事です。 LESSは「ネストとかミックスインとか変数とか使ってCSSを書けるから色々便利です」的なもの（謎）で、Codaのプラグインがあったりもします。オリジナルが書かれたのは「Feb 13, 2010」みたいです参考サイトなど LESS - Learner CSS （本家） extends CSS ? LESS - Learner CSS（の和訳）（via kmxslog） Write Better CSS with Less （via sitepoint）概要使い方は参考サイトをご覧ください。「レス？リーナーCSSだし、リース？」といきなり名前がわからな。
muyuuu 2013/06/13
TIPS等

less
リンク
1