CSSの記述が3倍速くなる「LESS」の使い方 (1/2)
2012年02月09日 13時58分更新 文●斉藤祐也／<a href="http://css.studiomohawk.com/">CSS Radar</a> 最近のWebサイトは大規模傾向にあり、Webアプリケーションを構築する機会も増えてきました。jQueryやMooToolsなど、JavaScriptを手軽に利用できるようにするライブラリーが普及する一方、Webサイトの表示を担うCSSにも、「Blueprint」や「960 Grid System」に代表されるフレームワークが登場しています。 「LESS」や「Sass」のようなCSS拡張メタ言語は、こうしたフレームワークとは異なり、CSSの言語自体を拡張し、CSSには存在しない機能を追加するものです。CSS拡張メタ言語を利用することで、変数、ミックスイン、入れ子ルール、名前空間、四則演算、関数などの動的な処理をCSSに追加でき、CS
SassやLESSを導入するメリット | Good thinking
SassやLESSといったCSSを拡張するメタ言語がいろんなブログ記事などで取り上げられ、すでに導入しはじめている人も多いかもしれませんが、まだ導入していない人のために、本記事ではそのメリットを一部紹介します。 SassやLESSはCSSを拡張するためのメタ言語です。メタ言語というと小難しいような気もしますが、かなり大雑把に言ってしまえば、Ruby（Sass）、JavaScript（LESS）によって、CSSをより便利にする技術というところでしょうか。.sass,.scss (Sass)、.less（LESS）という拡張子のファイル上でスタイルを書き、それらをCSSにRuby,JavaScriptでコンパイル（変換）します。 いずれもプログラミング言語の要することで、普段HTML/CSS、JavaScriptはjQueryで、という人には「なんか便利そうだけど難しそう、導入が大変そう」と思
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
Sassよりラクチン，LESS.appで簡単CSSコンパイル生活！（Mac限定）
LESSとSassを比較していました LESS « The Dynamic Stylesheet language Sass - Syntactically Awesome Stylesheets ここ半年ぐらいの間に，名前を聞くようになったSassと，それに影響されて作られた後発のLESSを比較検討したところ，以下のような理由からLESSを使うことにしました． 今回は，自分の作業の効率化はもちろん，将来的にチームでシェアできる技術になり得るか，という観点から選択しています． LESSを選ぶ理由 LESS.appというGUIツールが存在する node.jsで動くWebフレームワークExpressがLESSに標準対応している(らしい) 文法がSassより素直＆シンプルで慣れてもらいやすそう この中でも，LESS.appの存在が一番の決め手となって，マイナーなはずのLESSに軍配が上がってしま
LESSでCSSを書いてみた - Toro_Unit
CSSのメンテナンス性の悪さは広く知られて居るとは思いますが、その解決策として、SASSとかSCSSなどがあります。今回はその仲間のLESSの導入記録です。 公式サイト:LESS « The Dynamic Stylesheet language LESSというのは、CSSのメタ言語で、コレをコンパイルすると、CSSが出力されます。 LESSを使うとこんなことが出来ます。 LESSを使うと出来ること ルールのネスト 変数 Mixin 四則演算などちょっとした関数 また、普通のCSSの記法も使えますので、リセット用のCSS等そのままコピペも可能です。 ルールのネスト（階層化） CSSのルールをネスト出来ます。いちいちセレクタをコピペしなくていいし、コードの視認性や、構造が非常にわかりやすくなります。親のセレクタを再利用するには、”&”を用います。 less [css] #header { h
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
はじめてのCSSメタ言語はLessがおすすめ！ « NAVER Engineers' Blog
こんにちは、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ほど選べなかったり・・
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ページを開く
stack3.com is for sale | HugeDomains