Sass Vs. Less | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! “Which CSS preprocessor language should I choose?” is a hot topic lately. I’ve been asked in person several times and an online debate has been popping up every few days it seems. It’s nice that the conversation has largely turned from whether or not preprocessing is a good idea to which one
Meteor.js - naoyaのはてなダイアリー
http://www.meteor.com/ で公開された Meteor.js を少し触ってみました。TechCrunch なんかでも話題になっていましたね。 Meteor.js は JavaScript によるウェブアプリケーションフレームワークですが、クライアントサイドでもサーバーサイドでもない、"Isomorphic" なフレームワークです。 コンセプトとしていくつか特徴があるのですが、その最たるものは "Reactive Programming" で、モデルやセッションなどのストレージを更新するとその更新内容がリアルタイムに、そのアプリケーションを開いている全クライアントに伝わるようなアプリケーションを簡単に作ることができます。 この辺は実例を見るのが早いです。 http://www.meteor.com/examples/leaderboard ここにある動画では、あるブラウザで
CSS Sprites Revisited — Smashing Magazine
I’m pretty confident that I won’t surprise anyone here by saying that CSS sprites have been around for quite a while now, rearing their somewhat controversial heads in the Web development sphere as early as 2003. I’m pretty confident that I won’t surprise anyone here by saying that CSS sprites have been around for quite a while now, rearing their somewhat controversial heads in the Web development
lesscで.lessを圧縮して.cssを作成する方法 - memo.yomukaku.net
公開日時: 2011-12-07 10:30 lessの書式で書いたスタイルシートはlesscコマンドでcssに変換することができます。この際に、--compressオプションをつけると出力されるcssを圧縮して容量を小さくすることができます。 以下のようにします。 まだlessc自体をインストールしていない場合はnpmを使用してlesscをインストールします。 [sudo] npm install -g less もし環境全体にインストールしたくない場合は以下のように-gオプションを外してインストールします。 npm install less これで例えば以下のような位置にlesscがインストールされます。 tune66:~ $ which lessc /usr/local/bin/lessc 次に、lesscコマンドを使ってlessファイルをcssに変換します。 lessc styl
Sassの存在意義への補足
Sassの存在意義の話があんまりうまく伝わってない感じなので、3の別々に書けてSassで関連付けられるということについて少しだけ書く。抽象的な概念の話なので具体的な説明というのもなかなか難しいけど、CSSフレームワークを使う時にどうなるかみたいなことを取り上げる。 Twitter Bootstrapを始めCSSフレームワークはいくつもあるが、それらはだいたいユニークなクラス名を持っている。例えばTwitter Bootstrapで2カラムレイアウトを作る場合は以下のようなHTMLにしなくてはならない。 <div class="row"> <div class="span4">...</div> <div class="span8">...</div> </div> div要素はsectionやaside要素などを使っても良いが、クラス名はこうでなくてはならない。Sass (やLESS)があ
はてなにおけるCSSメタ言語（CSSプリプロセッサ）の導入について - Hatena Developer Blog
こんにちは、id:tikedaです。数年前から登場して以来、利用されるケースが増え続けているCSSメタ言語（CSSプリプロセッサ）。近年、様々な大規模サービスへの導入が進む中、はてなのサービス開発においても導入を行うため、2012/3/6に勉強会を実施しました。その内容を公開いたします。CSSメタ言語そのものの説明よりも、社内導入の為に必要な内容が中心となります。 アジェンダ どんなものがあるか 導入の背景と目的 はてなでの選択 何がやれるか どう使うか 事例・実演 運用ルール 今後の展望 どんなものがあるか Sass(scss,sass) http://sass-lang.com/ Less http://lesscss.org/ Stylus http://learnboost.github.com/stylus/ Tass http://cho45.github.com/tasscs
Sass vs. LESS vs. Stylus: Preprocessor Shootout | Envato Tuts+
Wielding the true power of a CSS preprocessor is an adventure. There are countless languages, syntaxes, and features, all ready for use right now. In this article, we will be covering the various features and benefits of using three different preprocessors—Sass, LESS, and Stylus. Introduction Preprocessors produce CSS that works in all browsers. CSS3 preprocessors are languages written for the sol
LESS Elements: a collection of useful LESS mixins
A set of basic mixins for the LESS CSS pre-processor. Most of these mixins focus on consolidating cross-browser prefixes into single, concise declarations. LESS Elements is not an extensive mixin library — just the essentials. See the mixins in actions on the test page. To use: Download the "elements.less" file.Place it in the same folder with your other LESS files.Reference it at the top of your
LESS & Sass Advent Calendar 2011
.day1 { content: "Sassで行こう！"; voice-family: hell2u; } .day2 { content: "CSSとフレームワークとメタ言語"; voice-family: debiru; } .day3 { content: "Sass を今すぐ実務で使おうよ！"; voice-family: tacamy; } .day4 { content: "LESS初心者向けのナニカ"; voice-family: sigwyg; } .day5 { content: "スマートフォン向けサイト作成時のSass活用法"; voice-family: mattari_panda; } .day6 { content: "sassの抑えておきたいfunctionの使い方"; voice-family: a_t; } .day7 { content: "Sass実戦
日記 | ヨモツネット
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
LessにおけるMixin活用法 - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） Less & Sass Advent calendar 2011 の15日目です！ 今日はLessにおけるMixInの活用法について書いてみようと思います。 LessのMixinについて LessにおけるMixinというのは、簡単に言うと関数のようなもので、 どこかで宣言しておけば、セレクタの中で呼び出すことが出来、 結果としてその中身がセレクタ内に展開されます。 ごちゃごちゃとわかりづらいので、公式の例を拝借します。 .rounded-corners (@radius: 5px) { border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius; } こんな感じに宣言しておきます。()の中身は引数と初期値です。 セレクタ内
LESS初心者向けのナニカ - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 こんにちは『Less & Sass Advent calendar 2011』4日目。Sig.@sigwygがお送りします。「ハードル下げるよ」と言っていたtacamyが文量ある良記事を上げており、高まるハードルに恐々としている今日この頃。皆さん如何お過ごしでしょうか。まあ僕はマイペースで行きます。久しぶりのBlog記事ですしね！（言い訳） さて、小狡く予防線を張ったところでLESS紹介です。LESSはCSSに変数やら関数やらネストやらを実装します。Sassと同じようなCSS拡張とかメタ言語とか言われるモノです。この辺りの解説はdebiruくんの記事が詳しいので割愛。
Sass を今すぐ実務で使おうよ！ « NAVER Engineers' Blog
はじめましての tacamy です。 さて今日は Less & Sass Advent calendar 2011 の 3 日目です。 「Sassかぁ。まーたしかに便利そうだけど、 実務で使えるか分からないし自分には関係ないかな。」 とか思ってませんか・・・！？ ぜんぜんそんなことないですよ！( ･`ω･´) その証拠に、NAVER では半年ほど前から、 新規サービスはすべて Sass を使って制作していますが、問題なく使えています。 むしろ効率化できて、CSS を書く工数が減った気もします（個人の感想です）。 小難しいテクニックは、このあとの 22 人が書いてくれると思うので（丸投げ）、 今日の記事では、Sass を実務で使うことに絞って書いてみます。 実務でSassを使うメリットって？ 制作の工数が減る CSS3 を使うときのベンダープリフィックスをいちいち自力でつけたり、
Webデザイナーにお勧め！LESSファイルを監視してCSSに自動変換·SimpLESS MOONGIFT
SimpLESSはLESSファイルのあるフォルダを監視して作成や更新のタイミングでCSSファイルに変換してくれるソフトウェアです。 CSSで不満に感じられることの多い、入れ子の構造や変数定義などを可能にするCSSライブラリがLESSです。そんなLESSファイルの作成、更新を監視してCSSファイルを自動生成してくれるソフトウェアがSimpLESSです。 最初に起動したときの画面です。SimpLESSはTitaniumを使って作られています。 メイン画面です。LESSファイルの含まれるフォルダを追加します。後はSimpLESSがファイルの更新を監視してくれます。 監視しています。更新したタイミングで自動的にCSSファイルを生成します。生成時には検証もされるので正しいCSSが生成されるとのことです。 例えばこれがLESSファイルの内容です。 SimpLESSが自動生成したCSSファイルがこれです
CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較 - (DxD)∞
CSSを拡張するためのメタ言語として、代表的なものに「SCSS(Sass)」と「LESS」があります。今回、導入を検討するにあたり、両者を比較しました。 結果的には、「SCSS(Sass)」を導入することにしましたが、特に「SCSS(Sass)」を選択する決め手となった点に重点を置きつつ、両者の違いをまとめまてみました。 はじめに Webサイト、Webアプリケーションが大規模になるにつれて、CSSの設計・管理にもリソースを割かれるようになります。CSSのモジュール化、コンポーネント化による再利用性を考えたとき、現状のCSSを取り巻く状況は十分とは言えません。 一つの選択肢としてあがるのが「Blueprint」や「960 Glid System」等のCSSフレームワークの利用ですが、その再利用性と構造・表現の分離度はトレードオフです。 そこで、CSSの利点を活かしつつ、再利用性を高めるために
ページャをカラーにしたい - ねっとでべろ
vimを使っているとページャもvimと同様にカラー表示したくなる。そんな人のためにvimはページャマクロless.shを持っています。Debianの場合は /usr/share/vim/vim63/macros/less.sh に入っています。他ディストリビューションの方は find / -name less.sh かlocateでもして探してください。見つけたless.shをaliasでlessにしておくと便利。 alias less='/usr/share/vim/vim63/macros/less.sh' もちろんlessが入っている人は削除するか他の名前にするか考えてください。 これでファイルをlessすると、 less ~/.bashrc のように表示されます。最下行にはパーセント表示もされます。 キーバインドはほとんどlessやvimと同じですが、 ヘルプ表示 h ページ送り
LESS compiler in PHP - lessphp
New: lessphp 0.4.0, compiles Bootstrap 3, breaking changes, see Changelog (August 9th 2013) About lessphp is a compiler for LESS written in PHP. The entire compiler comes in a single includable class, but an additional command line interface to the compiler is included. It will run on PHP 5.1+. See the quick start for basic usage. For an overview of the syntax take a look at the lessphp documentat
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jq-idealforms
http://css.studiomohawk.com/less/2011/04/03/use_less_to_clean_up_your_css/
Open sourced coffee-watcher, less-watcher and watcher_lib - amix.dk