Koala - a gui application for LESS, Sass, Compass and CoffeeScript compilation.Koala is a GUI application for Less, Sass, Compass and CoffeeScript compilation, to help web developers to use them more efficiently. Koala can run in windows, linux and mac.
SCHEMA UI Frontend Framework| A powerfully light, responsive, and lean front-end UI framework built with Less. | CSS Framework | Less Framework
From prototype to production Whether you’re trying to put a quick design to a prototype, or if you’re working on a production-ready application, Schema provides the foundation and components to easily design any responsive web project. Responsive Schema comes fully equipped with the capabilities of creating familiar experiences across multiple viewports. From a desktop monitor down to a mobile dev
Sass入門 ～より効率的なCSSコーディング | Gihyo Digital Publishing … 技術評論社の電子書籍
Sass入門 ～より効率的なCSSコーディング 著者 上村光星，富田梓，對馬慶子，山田敬美 著 発売日 2012年5月22日 更新日 2012年10月19日
LESSで3倍ラクするスマートフォンコーディング 記事一覧 | gihyo.jp
運営元のロゴ Copyright © 2007-2024 All Rights Reserved by Gijutsu-Hyoron Co., Ltd. ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。
第1回 LESSのメリットと導入方法 | gihyo.jp
CSSをより柔軟に、わかりやすく、速く、ミスを少なく記述できる 最近、CSSの拡張メタ言語「LESS」が話題になっています。LESSとは、かんたんに言えば、CSSの良いところを活かしつつも 「より柔軟に」 「よりわかりやすく」 「より速く」 「よりミスを少なく」 記述できるという、新しい書き方です。うさんくさいと感じるほどにいいことづくめですね。 CSSの拡張メタ言語には、LESSの他にも、Sass、Stylusといったものがありますが、LESSは一番CSSの書式に近く、活用するためのツールがそろっているのが特徴です。 最近LESSについて、はてなブックマークや技術系ブログでもたくさんとりあげられているので、実際に興味を持っている方や試した方もいらっしゃるかもしれません。しかし、まだ入門記事が多く、実際に導入したときのメリットをイメージできないことも多いのではないでしょうか？ 本連載では、
Bootstrapでシングルページをコーディング (1/5)
メインイメージを作る メインイメージ部分は、大きなロゴと短い文章のみの非常にシンプルな構成です。ロゴや文章を「index.html」に指定し、オリジナルのスタイルを「theme.less」に記述してデザインを整えます。 index.htmlは次のように変更します。 ■変更前のソースリスト（index.htmlの一部、緑色部分を変更） </nav> <div class="container"> <h1>Hello, world!</h1> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> ■変更後ソースコード（index.htmlの一部、緑色の部分が変更箇所） </nav> <div class="mainimage"> <div class="container"> <img src="images
lessを使ってBootstrapのデザインをカスタマイズ (1/5)
最近よく見かけるシングルページを作るデザイン塾。第2回では、ページの大まかなデザインを作成し、Bootstrapを使ってナビゲーションバーを実装しました。今回はlessファイルをカスタマイズして、オリジナルのデザインに近づけていきましょう。 index.htmlの<ul class="nav navbar-nav">内のリンクを書き換えます。検索フォームやドロップダウンメニューは今回使いませんので削除してOKです。 ■変更前ソースコード（index.htmlの一部、緑色部分を変更） <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="na
Front-end CSS Frameworks
UI is the vocabulary of the web. Semantic empowers designers and developers by creating a language for sharing UI. Lose the Hieroglyphics: Semantic is structured around natural language conventions to make development more intuitive. Have a conversation with your components: Semantic gives you a variety of UI components with real-time debug output, letting your code tell you what its doing.
less-css-mode - naoyaのはてなダイアリー
Pixate もそうですがこのところ LESS で css を書く機会が多いのでさぼっていた emacs での less-css-mode.el を導入。 インストール M-x list-packagesで ELPA から less-css-mode をインストール。less-css-mode は lessc コマンドがあると flymake で syntax check そのほかをしてくれるので % node -g install lessで入れておく。 設定 ;;; init.el (require 'less-css-mode) (setq exec-path (cons (expand-file-name "~/.nodebrew/current/bin") exec-path)) ; (setq less-css-compile-at-save t) ;; flymake (ad
CSSポストプロセッサー時代の到来
SassやLESSといったCSSプリプロセッサーは市民権を得たと言って良いと思う。しかしそれらCSSプリプロセッサーは開発という段階にのみ利をもたらすもので、今のところはそれ以上ではない。CSSを実際にユーザーに届けるまでには、開発だけではなくレビューとリリースという段階もある。レビューとリリースも確実性を持って効率的に行うためには、CSSポストプロセッサーと総称されるようなツール群が必要になるだろう。 この文書はFrontrend Advent Calendar 2013の4日目への記事として寄稿した。明日は@hilokiさんがスタコラサッサと書くようだ。 目次 CSSポストプロセッサーとは CSSプリプロセッサーの出力するCSS CSS Lint 開発用とレビュー用、リリース用のCSS CSSポストプロセッサーのユースケース ベンダー拡張プリフィックスの付加 Media Queries
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
Online StyleSheet Generator | OneClickCSS
What's this? HTMLソースをもとに、id,class名CSS、子孫セレクタCSS、子セレクタCSS、LESS、SASS、SCSSを自動生成するオンラインサービスです。 従来のHTMLコーディグを強力にサポートします。 What's LESS/SASS/SCSS? LESS / SASS / SCSSはCSSを効率的にコーディングできるCSSメタ言語です。 従来のCSSに比べ子孫セレクタ・子セレクタを簡単に管理することができ、高速にコーディングすることができます。 LESS OFFICIAL SASS/SCSS OFFICIAL 関連サービス 高画質サムネイル生成サービス HTTPクエリデコード SQLフォーマッター Insert文フォーマッター スペースフォーマッター JSONフォーマッター HTML/XMLフォーマッター Emmet toolkit for <textare
HTML5 × CSS3 × jQueryを真面目に勉強してみる – #4 LESS | DevelopersIO
そんな訳で、拡張メタ言語の中でも特にハードルの低いだろうLESSに触れてみることにしました。 拡張メタ言語 - LESS メタと称されるだけあって、LESSはHTMLやCSS、JavaScriptといった類の言語とは毛色が違います。そういった言語によって記述されたソースコードと同じ意味（機能）を持ちながら、より簡略的に表現できるようにしたための言語というわけです。 念のため分かりやすく補足しておきますと、メタとは比喩とか暗喩という意味であって、「アンタなんか牡丹じゃなくて豚よッ！」というセリフの豚という表現が正にメタに当たります。 ※豚というのは例えであって、本当に動物の豚だといっているわけではありません。 他にもこのような拡張メタ言語には、CSSに対してSCSS(Sass)、HTMLに対してHamlといったものがあります。JavaScriptに対してCoffeeScriptというのが比較
Twitter製。LESSからCSSを生成·RECESS MOONGIFT
RECESSはTwitter社が開発したLESSからCSSへコンパイルするソフトウェアです。 最近はCSSもそのままではなくLESSやSassを使って書くケースが増えてきました。そこで紹介したいのがRECESS、Twitter社の開発したLESSコンパイルツールです。 インストールします。npmでインストールできます。 解析処理です。 オプションです。 RECESSを使うとLESSからCSSへの変換はもちろん、短縮化もできます。IDや.js-で始まっているクラス、div#foo.barのような書き方、アンダースコアを使っている場合などに注意を出す機能があります（オプションで出さないようにすることもできます）。さらにディレクトリを監視してファイルを更新すると自動で変換と言ったこともできます。 その他APIがあり、node.jsのスクリプトと組み合わせて使うこともできます。 RECESSはno
CSSを書くとLESS形式にリアルタイムで変換するWebサービス・Css2Less - かちびと.net
CSSを書くと即座にLESS形式に変換 するWebサービス・Css2Lessのご紹介 です。使えるかどうかは別にして、 まだLESSに慣れてない方には練習用 になる・・・かもしれない。LESS も慣れるのが大変ですよね。 オンラインでCSS→LESSにするやつです。 左に普通にCSS書くと即座に右にLESS形式へと変換されます。尚、LESS側にも書けますが、CSS側は変化しません。 圧縮されたCSSでも整形、変換してくれます。 OSSにもなってます ruby製のOSSとしてGithubで公開されてるみたいです。 ライセンスはAGPL3だそうです。 以下よりどうぞ。 Css2Less / Github
はてなにおける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
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ページを開く
CSS拡張言語“LESS”を利用したWeb開発をサポートするツール「WinLess」NOT SUPPORTED