PostCSS Deep Dive: Preprocessing with “PreCSS” | Envato Tuts+
In the last two tutorials we looked at ways to use PreCSS on completed stylesheets to enhance their cross browser compatibility and optimization, essentially as a post-processor. In this tutorial you’ll learn to use PostCSS as a pre-processor, in the same way you would use Stylus, Sass or LESS. There are two main ways you can go about using PostCSS for preprocessing. One is to select all your own
How to Use Source Maps for Better Preprocessor Debugging | Envato Tuts+
CSS preprocessors have become an indispensable tool for most front-end developers. However, despite the many advantages they provide, using tools like LESS, Stylus or Sass also present new problems, one of which we’re going to talk about (and solve) in this tutorial. The Problem Unless you’re working on a small website with very few pages, it’s a common best practice to divide the stylesheet into
第1回 LESSのメリットと導入方法 | gihyo.jp
CSSをより柔軟に、わかりやすく、速く、ミスを少なく記述できる 最近、CSSの拡張メタ言語「LESS」が話題になっています。LESSとは、かんたんに言えば、CSSの良いところを活かしつつも 「より柔軟に」 「よりわかりやすく」 「より速く」 「よりミスを少なく」 記述できるという、新しい書き方です。うさんくさいと感じるほどにいいことづくめですね。 CSSの拡張メタ言語には、LESSの他にも、Sass、Stylusといったものがありますが、LESSは一番CSSの書式に近く、活用するためのツールがそろっているのが特徴です。 最近LESSについて、はてなブックマークや技術系ブログでもたくさんとりあげられているので、実際に興味を持っている方や試した方もいらっしゃるかもしれません。しかし、まだ入門記事が多く、実際に導入したときのメリットをイメージできないことも多いのではないでしょうか？ 本連載では、
CSS Nite LP26「CSS Preprocessor Shootout」のフォローアップを公開しました｜CSS Nite公式サイト
ベストセッション20192019年、CSS Niteでは49回の関連イベントを通して123セッションが行われました。その中からベスト・セッション＋αを選びました。 2010年から2019年のベスト・セッションCSS Niteベスト・セッション2019CSS Niteベスト・セッション2018CSS Niteベスト・セッション2017CSS Niteベスト・セッション2016CSS Niteベスト・セッション2015CSS Niteベスト・セッション2013CSS Niteベスト・セッション2012CSS Niteベスト・セッション20112010年のベスト20セッション CSS Niteについて CSS Nite（シーエスエス・ナイト）は、Web制作に関わる方のためのセミナーイベント。2005年10月にスタートし、2017年10月で丸12年。 これまでに、600回を超える関連イベントを通し
昔のCSSをLessとかSassにしたいの
ども、白です。ホワイトデーは来月です（はい）。 さて、いろんなデバイスを対象にしたり、ちょっと規模の大きいサイトを作っていくとなるとCSSを書くのも大変です。そんな時は「素のCSSなんて書いてられっか、バカヤロー！（ガラガラガッシャーン）」ってなるので、最近話題の「Less」や「Sass（+Compass）」「Stylus」といったCSSプリプロセッサを使ってテーマのスタイルを作る人もいるでしょう。 新規で作る場合は自分の好きなプリプロセッサを使えばいいし、「Forge」なんていうSass / CoffeeScriptなテーマ開発フレームワークみたいなの（要Ruby / RubyGems）もあるんですが、昔構築したサイトのメンテナンスとかリニューアルの時など、既存のテーマを元にいじらないといけない場合はきっとイライラすることでしょう（笑）。 しかし、世の中には便利なツールを作ってくださる開
撃ち合いお疲れさまでした（CSS Nite LP26）
先日のCSS Nite LP, Disk 26「CSS Preprocessor Shootout」でStylusのご紹介をさせていただきました。 Stylus nib - CSS3 extensions for Stylus enja-oss/stylus · GitHub 自分事で恐縮ですが、StylusでSass/LESSという2大巨星と闘いつつ、CyberAgent3人組の共通裏テーマ「ちゃんとCSS書け」というニュアンスを伝えるのは、正直不安な部分もありました。しかしながら、アンケートを見る限りは極端な不評もなく、Twitterを見る限りは概ね好評だったようで本当に良かったです。 今回のセッションで、Stylusの魅力はもちろん、CSSとプリプロセッサの関わりや諸問題について、みなさんに伝わるものがあったなら幸いです。 rework visionmedia/rework · Gi
CSS Nite LP26 CSS Preprocessor Shootout | Mima Design Memotto
1月12日、CSS Nite LP26 CSS Preprocessor Shootoutへ行ってきました。 今回も内容が濃く非常にためになりました。 以下、メモ書きです。 ◇基礎講演：CSSの設計◇ 高津戸壮さん（ピクセルグリッド） 設計について CSSを書いているとごちゃごちゃになるので、 うまいこと設計する必要がある。 ただ、コードを書くだけではちゃんとした設計はできない。 ページ設計の段階から考える必要がある。 ・モジュール名を基準に書く 干渉しないなどのメリット色々 ・モジュール一覧を作る どこだっけと探したり、同じモジュールを二度作ったりすることを防ぐ ・具体的過ぎず抽象的過ぎない命名を ・余白のルールを設ける なるべく単純に ・細かいデザイン 細かい余白の調節と量産効率性を考える。 ＊オススメ マージン用のモジュールを作る。 デザインを細かく再現する必要
CSS Nite LP, Disk 26「CSS Preprocessor Shootout」に行ってきためも。 - Mitsu.log();
2013-01-14 CSS Nite LP, Disk 26「CSS Preprocessor Shootout」に行ってきためも。 昨日、CSS Nite LP, Disk 26に行ってきました。今回のテーマはCSS Preprocessor Shootout。 CSSの設計をどうすべきかというテーマの基調講演ののち、前半はCSSプリプロセッサ SASS/LESS/Stylusそれぞれのお話、中盤はそれらを使うためのツールのお話、後半は実務で使われている企業の方々の事例、最後にCSSデザインの過去・現在・未来についてと、豪華登壇者による全10セッションでした。時間にして5時間半の長丁場でしたが、面白くて興奮しすぎて全然苦じゃなかった笑。参加した人には後で資料のフォローアップがある（確か３ヶ月後くらいには参加してない人向けにもオープンになるはず）ので、ここでは自分が気になった部分のざっ
Web制作者の覚醒剤CodeKitでマンモスうれぴー(はぁと
head cleanerと併せて高速なWebサイト作りに励みたいものね。 SASS, Lessのコンパイル Web制作やっているなら、SASS/SCSSとかLessのことは知ってると思うけど、CodeKitはこれらを保存するたびにコンパイルしてくれるわ。あとはSublime Text2なんかのエディタがあれば、特にコンパイルを意識しないでもコーディングできるわね。ターミナルに苦手意識があっても問題無しよ。 ちなみに、Coffee ScriptとかHaml、Jade、Stylusなんかもコンパイルできるから、Ruby on RailsやNodeJS使ってる人にもおすすめよ。 おすすめポイント1. 全部入り CodeKitのお勧めポイントは「全部入り」なことね。SASSやLessのGUIコンパイルツールは無料で色んなところにあるんだけど、私はこういうユーティリティツールを何個もインストールする
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.
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
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
HTML5 × CSS3 × jQueryを真面目に勉強 – #5 LESSのコンパイル（Win / Mac） | DevelopersIO
そんな訳で、CSSの拡張メタ言語であるLESSをCSSにコンパイルする手順を学んでおくとします。 前回、LESSとはなんぞやという記事を書きました。今回はそれの補足に当たる内容なので、LESSをまだご存じないという方は、こちらに目を通されておくのがよろしいかと思いますが、「そんなのめんどくせー、息をするのもめんどくせー」という横着なアナタのために簡単に説明しておきます。 LESSとはCSSに対する拡張メタ言語のことです。拡張メタ言語とは、元の言語と同じ意味（機能）をより少ないコードで表現できるようにしたもので、「あー、CSSダラダラ書くの超めんどくせー、息をするのもめんどくせー」という横着なアナタにピッタリの言語というわけです。詳しくはこちらをご覧ください。 LESSからCSSファイルを書き出す (Win) lessc.exe まずはコマンドラインツールによる手法からやっていきます。以下の
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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Your Friendly Web Development Companion
inspiretrends.com
Koala - a gui application for LESS, Sass, Compass and CoffeeScript compilation.
Css preprocessorの始めかた
「WebMatrix」でLESS、Sass/SCSS、CoffeeScriptを利用可能に「OrangeBits Compiler」NOT SUPPORTED
css2less.cc