7

ドキュメントを保存したりブラウザを更新したりせずに LESS または SCSS を使用する方法があるかどうかを調べています。現時点では、ライブ プレビューに最適な CSS Edit を使用していますが、ライブ プレビューを LESS または SCSS で動作させる方法が見つかりません。私の理想的な状況は、Textmate と私のブラウザを使用して、真にライブ (またはそれに近い) セットアップを取得することです。いくつかのオプションを検討しました。WebPutty は優れていますが、ベータ版で Web ベースであるため、既存のワークフローに適合するソリューションが欲しいです。

どうもありがとう

4

8 に答える 8

1

EDGEをチェックしてください。http://getedge.io - Sublime Text または Textmate から Sass および LESS ファイルをライブ編集できます。ファイルを保存する必要はありません。入力すると更新されます。今すぐプライベート ベータにサインアップできます。

于 2012-11-06T14:53:13.587 に答える
1

これはあなたが探しているものかもしれません: livereload.com

同じ問題をグーグルで検索しているときに、これを自分で見つけただけです。

現在、64 ビット Mac 専用です。また、ベータ版..開発中の Windows バージョン。

サイトで言及されている v1 へのリンクが見つからないようですか?

于 2011-12-13T22:56:39.003 に答える
1

あなたが探しているものに対する完全な解決策はありません。Chrome 開発ツール (sass ソース マップが有効になっている) が最善の策ですが、ミックスインはできないと思います

http://livestyle.emmet.io/は、試してみたい別のオプションです

ブラケットはライブ変更でうまく機能しますが、クロムにのみ適用されます

これが私がしていることであり、それは目的を果たし、mac / pcおよびlinuxで魅力的に機能します sassを実行する1つの端末を開いてください --watch ライブリロードを実行できる別の端末/アプリを用意します

sass はコンパイルされ、スタイルシートが変更されるとすぐにすべてのブラウザーが更新されますが、これでスタイル インジェクションを実行することはできません。つまり、ページが更新されます (ダイアログのテーマを設定したい場合は、それらを再度開く必要があります)。スタイルインジェクションに使用できる他のツールもあります

お役に立てれば！

于 2013-10-08T21:28:52.273 に答える
1

静的ファイルを使用している場合は、http://f.cl.ly/items/0y2G351r3O3T3j1b401u/Live-LESS-previewing-in-Espresso.htmlから取得したこのコードを使用できます。

<!-- Link directly to LESS stylesheet first -->
<link rel="stylesheet/less" href="style.less" type="text/css" media="screen" />

<!-- Then link to LESS, and enable development watch mode -->
<script src="less-1.2.1.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
    less.env = "development";
    less.watch();
</script>
<!-- Voilà! Instant LESS previews in Espresso -->

ただし、ローカルホストを使用している場合、これを機能させる方法はまだわかりません。

于 2012-02-17T00:03:45.710 に答える
0

現在、そのようなアドオンはないと思いますが、Live CSS Editorのファンでもあります (それが CSS Edit の意味である場合)。

SASS や LESS のサポートで同様のものがあると便利だと思うので、そのような Chrome アドオン (Live CSS Editor の類似物) の簡単なプロトタイプを作成しました。これには、構文の強調表示と、クライアント側の LESS ライブラリを使用した LESS のサポートが含まれます。まだユーザーフレンドリーではないため、Chrome ストアの候補ではありませんが、ダウンロードしてアンパックされた拡張機能として Chrome にロードできるGoogle Code Projectを次に示します。時間をかけて改善していきますが、他の人も試すことができます ;)

スクリーンショットなどは、このブログ投稿にあります。

于 2013-10-08T20:54:24.357 に答える
0

先日、同僚とhttp://less2css.orgを立ち上げました。バージョンを選択して、変換されていないものをリアルタイムで確認できます。

それが誰かを助けることを願っています。

于 2013-01-09T01:26:29.170 に答える
0

live.js はあなたのソリューションです:)

html、js、cssだけでなく、それ以下でも機能します。cssのファイルタイプでそれをだます必要があります：

<link rel="stylesheet/less" type="text/css" href="stylesheets/main.less.css">
于 2012-01-10T16:39:30.323 に答える
0

Railsローカルサーバーでブックマークバージョンを試しました。簡単に動作します。 CssRefresh

于 2012-08-01T04:04:34.047 に答える