[B! Less] chimantareのブックマーク

chimantare id:chimantare

Lessに関するchimantareのブックマーク (5)

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
chimantare 2013/08/05
Less
リンク
LESSの習得 | 離島に住みたいFEブログ
less,sassやcompassが最近話題なので、以前入れておいたlessについてしっかり学ぼうと思います。 lessはsass,compassに比べて簡易なようですが、全部の機能を見るとかなり使えそうな印象。機能もたくさんあるし。文法はネイティブCSSに近いので習得コストは低い。less以上の機能が必要になった時にsassやcompassを学べば良いし、まずはlessの全機能を把握して、実務に取り入れながら習得・効率化していこうと思います。変数プロパティの値を変数として扱うことができます。さらに数値の加減乗除ができます。 //.less @color : #5B83AD; #header { color:@color } //.css #header { color:#5B83AD } ※LESSの変数は正確には定数なので、一度値を挿入後は変更ができないです。 Mixin あ
chimantare 2013/08/02
Less

Mixin
リンク
[CSS] Lessに詳しく入門してみた - YoheiM .NET
Scssと同じくCSSの記述を100%サポートしつつ、入れ子構造やMixinなどの書き方も可能。lessファイルをそのままブラウザで読み込んで動的にコンパイルする仕組みがあったり、素のJSをCSS内に書けたりと、Scssよりプログラマ向けかも。それぞれ特徴がありますが、今回はLessを詳し目に入門することを書いていきたいと思います。２、Lessの特徴各種あるCSSプリプロセッサの中で、Lessの特徴は以下となるかと思います。 [メリット] lessファイルをHTMLで読み込んで、CSSとして反映することが出来る。開発中は便利。 [メリット] Lessに最初からwatch機能が付いていて、指定した時間ごとにlessを読み込み直してくれる。これも開発に便利。 [メリット] Less内にJSを記述することができる。例えばWindowの高さを取るとかできちゃう。 [デメリット] ScssのC
chimantare 2013/08/02
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
chimantare 2013/08/02
Less
リンク
Edge / BracketsでEmmetとかLESSを – A Memorandum
Adobeさんが出してる「Edge Code」、TextMateやSublime Text 2っぽいですよね（笑）。で、そのEdge Codeも公開されている拡張機能をインストールすることで、アプリケーションの機能を追加することができるようになっています。公開中の拡張機能は、Edge Codeの元になってるオープンソースプロダクト「Brackets」のGitHubページにリンクがまとまっています。 Edge Code / Brackets でEmmetを使う WebサイトのHTMLやCSSのコーディングをする際に「Zen-Coding」を使っている方もだいぶ増えました（おかげさまで謎）。しかしもうZen-Codingは開発終了で、次期バージョンの「Emmet」に置き換えられています。とまぁ、そうなるとより機能が拡充されたEmmetが必要になるわけですが、ちゃんとBrackets /
chimantare 2013/06/03
拡張機能

brackets

LESS
リンク
1