CSS Georgeでブラウザ内でCSSデザインを編集する

あなたは今までしたかったことがありますか 直接編集する CSSファイルに戻らずにブラウザで1つの解決策はChromeデベロッパーツールですがいくつかの開発者 より単純なワークフローを好む.

それはどこです CSSジョージ 入ってくる。これは無料 ブラウザ内編集ツール 作品 LESSの上に そしてそれは 単純なJavaScriptファイル.

ほとんどの開発者は ブラウザベースのエディタ 誰もがLESSプリコンパイラを使うわけではないので。しかしCSSジョージ LESS環境では動作しますか すばやくインストールできます npm経由.

npmがインストールされていれば、この単純なコードを実行して次のことができます。 ソースファイルを追加する 現在のプロジェクトへ

 npm install --save-dev css-george 

またはできます 引っ張る George.js ファイル 他のすべてのソースファイルと一緒にホストされているGitHubから。プロジェクト全体が無料でオープンソースになっているので、 フルコピーをダウンロードする npmを使いたくない場合はGitHubから.

とともに .js あなたのサイトのヘッダーにファイルを追加すると、あなたは始めることができます George関数を実行する ブラウザから直接。に エディタウィンドウを開く, ほとんどのキーボードの左上隅にあるShift +からアクセスできるチルダキーをクリックします。 A 新しい窓 次のように見えるはずです。

この画面から、あなたはすることができます LESS変数を編集する 色からフォントサイズやフォントファミリーまで、あらゆるものに使用されます。.

これがLESSプラグインです。 必需品になる CSS Georgeに伝えなければならないからです 含める変数. 一度設定すれば、 CSS Georgeブラウザエディタを開く そして町へ.

私はそれがこのツールであることは明らかだと思います いけない 実行時に含まれる. 特に訪問者を許可したくない限り ページの色とスタイルを編集する, これは一般的には良い考えではありません。しかし ローカルテスト, CSS Georgeは、すべてのフロントエンド開発者に有用性を提供する稀なツールです。.

あなたはできる それを生きて見る CSS Georgeのデモページで フルコピーをダウンロードする npm経由かGitHubリポジトリから.