あなたの知らない less の世界 - Qiita
最近 prezto 入れたんですよ。prezto。そしたらいつものシェル世界が見違えるほど使いやすくなって身長も 3 メートルくらい伸びたんですが、それは余談でして、prezto 入れた後に less 使ってみたら余りの変わりっぷりに驚いたんです。 これを機に man page を読み直してみたら更に驚き。less ってこんなスゴイ物だったのか！みたいな。今回はそんな less の底力を紹介します。 環境変数 $LESS less には様々なオプションがあるのですが、これを予め環境変数 $LESS に設定しておくと、毎度 less ファイル名 と打つだけでそれが有効になります。更に、後述しますが、この設定は less 起動中にオン・オフして切り替えることが可能です。 # 最低限でもこれくらいは設定しておこう export LESS='-i -M -R' # 僕は後述の物を全部付けてます（-
bootstrap-generators gemを使う。 - tkymtk's blog
はじめに Railsでtwitter-bootstrapを使う方法はいくつかあります。gemを使って導入する場合、 lessで使いたいときは、twitter-bootstrap-rails sassで使いたいときは、bootstrap-sass を選択するのがほとんどだと思います。 twitter-bootstrap-railsにはジェネレータの機能がありますが、bootstrap-sassにはありません。 なので、sass環境でbootstrapのテンプレートを生成できる、bootstrap-generatorsというgemを使ってみたいと思います。 bootstrap-generators の特徴 sass テンプレートを生成できる。 インストール Gemfileに次のラインを追加: gem 'bootstrap-generators' bundle installを実行: bundl
LESSをはじめようと思ったらとりあえずBootstrapのmixinsを入れておくと便利
css3プロパティ 準備ができたところで早速使ってみましょう。 最初はCSS3で追加された「border-radius」で角丸にしてみます。 たとえば「id="box1"」でマークアップした「div」があります。 html <div id="box1"></div> 通常のcssでしたら次のようになりますよね。 css #box1 { width: 200px; height: 200px; background: #999; /* 角丸 */ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } Bootstrapのmixins.lessをインポートすれば次のように記述することができます。 less @import "mixins.less"; #box1 { width: 200px; he
LESS を使って Bootstrap をカスタマイズ | Web Design Leaves
LESS を使って Bootstrap をカスタマイズ CATEGORY: HTML/CSS | TAG: Bootstrap, LESS 2013年9月2日 Bootstrap(v3.0.0) には以下のようなボタンなどにあらかじめ用意されたオプション（クラス）がある。 btn-primary（青色） btn-success（緑色） btn-info（水色） btn-warning（オレンジ色） btn-danger（赤色） これらを独自のクラス名で使ったり、色を変更するなどのカスタマイズをする際のメモ。LESS のコンパイルには「Prepros」を使用。 準備 Bootstrap の LESS ファイルをダウンロード Bootstrap の「Getting started」ページの「Additional downloads」の下の「Download latest source code
CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較 - (DxD)∞
CSSを拡張するためのメタ言語として、代表的なものに「SCSS(Sass)」と「LESS」があります。今回、導入を検討するにあたり、両者を比較しました。 結果的には、「SCSS(Sass)」を導入することにしましたが、特に「SCSS(Sass)」を選択する決め手となった点に重点を置きつつ、両者の違いをまとめまてみました。 はじめに Webサイト、Webアプリケーションが大規模になるにつれて、CSSの設計・管理にもリソースを割かれるようになります。CSSのモジュール化、コンポーネント化による再利用性を考えたとき、現状のCSSを取り巻く状況は十分とは言えません。 一つの選択肢としてあがるのが「Blueprint」や「960 Glid System」等のCSSフレームワークの利用ですが、その再利用性と構造・表現の分離度はトレードオフです。 そこで、CSSの利点を活かしつつ、再利用性を高めるために
Emacsユーザーのための LESS 導入。 - 日々、とんは語る。
Emacsユーザーが快適に LESS を使えるようになるまでの導入記事です。 LESS とは何か。 LESSとは、CSSメタ言語と呼ばれるもので、LESS の他に Sass(SCSS) と呼ばれるものがあります（SassとSCSSはちょっとだけ文法の違う兄弟みたいなもの）。 LESS と Sass の違い 文法がわりと違います。詳しくははじめてのCSSメタ言語はLessがおすすめ！ « NAVER Engineers' Blogあたりを参照。 LESS の導入。 LESS は JS によるクライアントサイド（要するにブラウザ上）の変換（less->css）に対応しているので、てっとり早く試してみるのに向いています。 具体的には style.less ファイルと一緒に、lessサイトからダウンロードできる less.js を読み込むだけで使えます。 <link rel="stylesheet
CSSのみとSass/SCSS、Lessに対応したレイアウト系CSSフレームワークについて調べて表にしてみた | DevelopersIO
みなさまこんにちわ。 Webサイト高速化やSCSSの連載を書いている野中です。 そういえばGoogle Readerが終了するとのことでとても残念ですね。 読者のみなさまも次の引っ越し先ツール探しで忙しいところだと思います。 そこで、クラスメソッド開発ブログのRSSも忘れずに登録をお願いします。 とても更新頻度の高いブログということもあり、いろいろな切り口のRSSを用意しています。 本題 それでは本題ですが、レイアウト系のCSSフレームワークって色々ありますよね。 個人的にはHTML上のクラスにあまり意味のない文字列は入れたくないので使っていませんでした。HTMLも編集しなければならないので。 ふとSass/SCSSでExtendしたりMixinsで制御できるものであれば無駄なクラス指定を減らして可変でレスポンシブなグリッド制御ができるんじゃないか思って探してみたら色々とありました。 最初
LESS/Sass+Compass/Stylusなどをコンパイルするアレコレ – A Memorandum
知ってる限りでちょっとまとめておきました。LESSやSass+Compass、Stylusをコンパイルできる各種ツールです（それらのMixins集なんかは入れていません）。中には、HTMLのテンプレートエンジンなんかもあわせてコンパイルできるのも含まれています。何かのご参考になれば。 GUIでどうにかしたいあなたへ 1. CodeKit CodeKitは、有償のアプリケーションでOS Xでしか使えません。対応しているプリプロセッサやテンプレートエンジンの種類は圧倒的に多いのが特徴です。とりあえず使いそうなものをあげると、LESS、Sass/Compass（とそのmixinであるBourbon）、StylusといったCSSプリプロセッサの類、IEの4095個セレクタの問題を回避するBless。そしてHamlにJadeにSlimといったテンプレートエンジン、CoffeeScriptにNode.
CSS拡張メタ言語「LESS」の使い方
CSSを効率的に書くための拡張メタ言語「LESS」の使い方を紹介します。 LESS １．「LESS」でできること 簡単な例として、次のように変数「@xxx」を使って値を定義することができます。 @radius: 10px; @bg-color: #fff; @padding: 10px; .foo { background: @bg-color; padding: @padding; border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius; } .bar { background: @bg-color; padding: @padding; border-radius: @radius; -webkit-border-radius: @radius; -moz-border-ra
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Bootstrap Live Customizer
LESSでCSSを一つにまとめる - S.F. Page
IDEA * IDEA