LESSスタイルシートをテーマから読み込む
どの値をカスタマイズ可能にするか決める まず、どの値をカスタマイズ可能にするかを検討しましょう。まずいくつか適当に選んでください（あとで追加できます）。 テーマのメインカラーとして使われ値得るオレンジの色と、主なタイポグラフィ（フォントとフォント色）、それからチームセクションの背景色と背景画像をカスタマイズ可能にしてみましょう。 スタイルシートをLESSファイルに変換する 作成中のテーマのスタイルシートがCSSファイルの場合、まずLESSファイルに変換するところから始めましょう。それから、カスタマイズ可能にする値を切り分けます。 ファイル名を変更 拡張子をlessに変更します。例： templatemo_style.less. 設定ファイルを作成 カスタマイザーでデフォルトで使われる設定値を保存したファイルを作成する必要があります。css/presets/defaults.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
lessのコメントの書き方: /* foo */は出力され // barは出力されない - memo.yomukaku.net
公開日時: 2011-12-20 23:45 Lessでcssを生成する場合、元のlessの中で使えるコメントには/* ここがコメント */のようなCSSスタイルのコメントと// ここがコメントのような行頭にスラッシュを二つ重ねた形式のコメントの二種類が使えます。 2種類のコメント形式がありますが、前者はlessから生成されたcssの中に残る一方、後者はlessの中だけのコメントにとどまり、cssに出力されません。 cssに残るlessの中のコメントの例 /* header for splash screen */ header { &.splash { background: @grayLight; } } // 上のlessは以下のcssに変換されます。 // /* ... */ で書いたコメントがcssにも出力されます。 /* header for splash screen */
Lessをeclipseでいじろう！！
この投稿はCSS Preprocessor Advent Calendar 2012の１５日目の投稿です。このポストでCSS Preprocessor Advent Calendar 2012を知ったという方は一日目の投稿から読むことをお勧めします ここまでの１４日間のAdvent calendarでLessに興味を持ち、導入意欲も湧いてきたかと思いますが、私自身、初歩的な環境構築がわかっておらず。。。 そこで、家ではMac,仕事場ではWindows環境な私が両環境で共通で使えそうなEclipse上でLessを記述する方法例を書きます。（ハードル低くてすみませんｗｗ） 今回、作成したサンプルプロジェクトのソースはgithubに置いてあります。 内容： Lessとは SassよりLessって・・・ 開発環境 環境構築 Lessをいじる コンパイル まとめ （内容で、間違っていたら指摘してくだ
イマドキのIDE事情(132) CSSの作成を効率化! EclipseでLESSを編集するためのプラグイン
LESSとは? Webページにおいて、コンテンツをHTMLに、デザインをCSSに分離するという手法が一般的になって久しい。CSSはシンプルな記法を持つが、その反面、同じような記述を何度も行わなければならず、記述が冗長になりがちでメンテナンス性にも問題がある。LESSはこの問題を解決するために、CSSをプログラマティックに記述できるようにするものだ。 LESSを使用することで、変数や関数などを用いた共通化を行うことができる。また、LESSで記述したスタイルシートは、Webブラウザ上でJavaScriptを用いて動的にCSSに変換したり、lesscというコンパイラを用いて事前にCSSに変換しておくこともできる。スタイルの作成中など表示を逐次確認したい場合は動的に変換、実際にサイトを公開する際にはlesscで変換したCSSを使用するといった使い分けが可能だ。最近ではWebフレームワークでもLES
CSSをシンプルに書くことができるLESS使ってみた
CSSをシンプルに書くことができるLESS使ってみた CSSはシンプルなのでとてもわかりやすい言語ではありますが、その分サイトが肥大化していくとメンテナンス性が悪くなりますね。 LESSを使えばプログラム的な書き方ができるので、ムダなく効率的に管理できるみたいです。 投稿日2011年12月13日 更新日2011年12月13日 ネスト（階層）化できる たとえばこんな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
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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「WebMatrix」でLESS、Sass/SCSS、CoffeeScriptを利用可能に「OrangeBits Compiler」NOT SUPPORTED