LessにおけるMixin活用法 - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） Less & Sass Advent calendar 2011 の15日目です！ 今日はLessにおけるMixInの活用法について書いてみようと思います。 LessのMixinについて LessにおけるMixinというのは、簡単に言うと関数のようなもので、 どこかで宣言しておけば、セレクタの中で呼び出すことが出来、 結果としてその中身がセレクタ内に展開されます。 ごちゃごちゃとわかりづらいので、公式の例を拝借します。 .rounded-corners (@radius: 5px) { border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius; } こんな感じに宣言しておきます。()の中身は引数と初期値です。 セレクタ内
LESSにextendを実装してみた - hokaccha memo
Less & Sass Advent calendar 2011の14日目です。LESSにextendを実装したので紹介。 LESSはSassに比べて機能が少ないです。その中でもよくLESSにはextendがないのが困るというのを聞くので実装してみました。 SassのextendについてはAdvent Calendarでも後ほど誰かが紹介してくれると思いますが、こんな感じです。 Sassの@extendでCSSとHTMLをシンプルに - あと味 LESS版はこんな感じで書けます。 .foo { width: 100px; } .bar { +.foo; /* この + ってのがSassでいうところの @extend */ } これをコンパイルするとこうなります。 .foo, .bar { width: 100px; } いいですね。よく使いそうなのがclearfix的なやつだと思います。
Node.jsでLESSファイルを動的にコンパイルする :: 5509
「Less & Sass Advent calendar 2011」9日目のです。 流れをぶった切ってしまってあれなのですが、Node.jsとあわせてLESSファイルを動的にコンパイルするようなやつ書きます。 みなさんご存知の通りLESSはJSで書かれているので、Node.jsを使ったアプリでは動的にLESSファイルをコンパイルできます。 ところがLESSのサイトに書いてある方法は var parser = new(less.Parser); parser.parse('.class { width: 1 + 1 }', function (err, tree) { if (err) { return console.error(err) } console.log(tree.toCSS()); }); ・・・やさしくない！ まあでも早い話、parse(hoge, func)のhogeにL
LessでCSSはもっと楽になる！（第1.5回Yokohama.js） - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） 昨日行なわれた第1.5回Yokohama.jsで喋らせて頂いたお題です。 使ったプレゼンテーションスライドの紹介など。 スライド ざっくりとした内容 Lessってなに？ 公式 : LESS « The Dynamic Stylesheet language Lessだと何が幸せなのか？ Lessの記法いろいろ 変数 ミックスイン（関数のようなもの） 演算子 セレクタの入れ子 Lessの使い方 クライアントサイドでコンパイルする node.jsで実行する GUIクライアント for Mac : LESS.app For Mac OS X GUIクライアント for Win : TitaniumデスクトップでLESS.jsのフロントエンドをこさえてみた LESSTESTERの紹介 LESSTESTER – Online Compil
CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較 - (DxD)∞
CSSを拡張するためのメタ言語として、代表的なものに「SCSS(Sass)」と「LESS」があります。今回、導入を検討するにあたり、両者を比較しました。 結果的には、「SCSS(Sass)」を導入することにしましたが、特に「SCSS(Sass)」を選択する決め手となった点に重点を置きつつ、両者の違いをまとめまてみました。 はじめに Webサイト、Webアプリケーションが大規模になるにつれて、CSSの設計・管理にもリソースを割かれるようになります。CSSのモジュール化、コンポーネント化による再利用性を考えたとき、現状のCSSを取り巻く状況は十分とは言えません。 一つの選択肢としてあがるのが「Blueprint」や「960 Glid System」等のCSSフレームワークの利用ですが、その再利用性と構造・表現の分離度はトレードオフです。 そこで、CSSの利点を活かしつつ、再利用性を高めるために
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://atnd.org/events/21919
820035’s gists
