第2回 LESS記法を身につける（初級編） | gihyo.jp
最低限おさえておくべき6つの記法 前回はLESSが解決してくれる悩みと、less.jsの利用法をご紹介しました。 今回はいよいよ実際にLESSを書いていきましょう。 とはいえ、LESSの記法の中でもよく使われるものと、あまり使われないものがあります。今回は初級編として、LESSを使うなら必ず覚えておきたい記法と、その活用法、注意点などを見ていきましょう。 LESSで基本として押さえておくべきは下記6点です。 ネスト 変数 ミックスイン 演算 コメント インポート これだけでもCSSのコーディング速度が1.5倍くらいになり、十分にLESSの恩恵にあずかれます。 順番に見ていきましょう。 なお、コードの見かたは以下のとおりです。 ネスト ～CSSのセレクタを入れ子にする ネストとは、以下のようにCSSのセレクタをどんどん入れ子にして書いていくことです。 // LESS #header { h1
LESSをはじめようと思ったらとりあえずBootstrapのmixinsを入れておくと便利
LESSをはじめようと思ったらとりあえずBootstrapのmixinsを入れておくと便利 LESSにはMixinという複数のプロパティをまとめる機能があります。 例えばcss3のベンダープレフィックスなど設定しておけば、あとで１行で呼び出すことができます。 で、実際作成するにあたり一から作るより Twitter Bootstrap を利用すれば、よく使いそうな機能があらかじめまとまってるのでいいかもしれないです。 投稿日2012年04月17日 更新日2012年04月17日 css3プロパティ 準備ができたところで早速使ってみましょう。 最初はCSS3で追加された「border-radius」で角丸にしてみます。 たとえば「id="box1"」でマークアップした「div」があります。 html <div id="box1"></div> 通常のcssでしたら次のようになりますよね。 css
CodeKit - THE Mac App for Web Developers
All the Cool Kids Compile Sass, Less, Stylus, CSS, CoffeeScript, Pug, Slim, Haml, TypeScript, JavaScript, ES6, Markdown, JSON, SVG, PNG, GIF and JPEG right out of the box. Dead-Simple Configuration Want compressed CSS? Just check a box. Need to transpile JavaScript? Check a box. Every tool's options are available in a beautiful, clean UI. No more hacking build scripts. Bleeding-Edge Tools Autopref
LESS: CSSをよりシンプルに、パワフルに | CSS Radar | For Frond End Developers
CSS Radar For Frond End Developers Recent Articles LESS: CSSをよりシンプルに、パワフルに 03 Apr ワイヤフレーム 01 Apr HTML5 Boilerplate 15 Mar ターミナルを使いこなす 13 Feb Gitでバージョンコントロール 29 Jan Read More If it ain’t broken, don’t fix it. 壊れてないなら、直す必要はない。 CSSは追加してほしい仕様はあるけど、壊れている、とまでは感じない。プログラミングの何たるかをまったく理解していなかった私にも簡単に覚えられた。 SASSやLESSのようなCSSの拡張が完全に悪だとは思わないが、絶対に必要だとも感じない。 でも、知っておくともっとシンプルに、もっとパワフルに、もっと素早くCSSを書くことができる、プラスアルフ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
