ホームページ  >  記事  >  開発ツール  >  Sublime テストで CSS ファイルを実行する方法

Sublime テストで CSS ファイルを実行する方法

下次还敢
下次还敢オリジナル
2024-04-03 06:36:201175ブラウズ

Sublime Text で CSS ファイルを実行するには: WebKit Inspector プラグインを使用し、[Elements] タブを開いて、Command Option I (Mac) または Ctrl Alt I (Windows/Linux) を使用して HTML と CSS を表示します。 LiveReload プラグインを使用して、Command Option L (Mac) または Ctrl Alt L (Windows/Linux) 経由で LiveReload を開始し、ファイルの変更を自動的に監視し、更新します。

Sublime テストで CSS ファイルを実行する方法

Sublime Text で CSS ファイルを実行する方法

Sublime Text で CSS ファイルを実行するには、

1 などの外部ツールの助けが必要です。

  • WebKit Inspector プラグインをインストールします。
  • CSS ファイルを開き、Command Option I (Mac) または Ctrl Alt## を押します。 #I (Windows/Linux) WebKit インスペクターを開きます。
  • 「要素」タブを選択して、HTML と CSS を表示します。

2. LiveReload

    LiveReload プラグインをインストールします。
  • CSS ファイルを開いた後、
  • Command Option L (Mac) または Ctrl Alt# を押します。 ##L (Windows/Linux) LiveReload を開始します。 LiveReload は、ファイルの変更を自動的に監視し、ブラウザ ウィンドウを更新します。
3. BrowserSync

BrowserSync プラグインをインストールします。
  • CSS ファイルを開いた後、
  • Command
  • Option B (Mac) または Ctrl Alt## を押します。 #B (Windows/Linux) BrowserSync を開始します。 BrowserSync は、ブラウザ ウィンドウを自動的に開き、ファイルの変更を監視します。
  • #4. リアルタイム プレビュー ツール

一部の Sublime Text テーマでは、リアルタイム プレビュー機能が提供されています (例: ##)

# Emmet

: CSS ファイル内で

Tab
    キーを押して、HTML プレビューを生成します。
  • Stylus: Stylus プラグインをインストールし、CSS ファイルで .styl
  • 拡張子を使用してライブ プレビューを取得します。
  • 注:

ライブ プレビュー ツールの場合は、CSS ファイルと HTML ファイルが同じディレクトリにあることを確認する必要があります。 一部の方法では追加のセットアップと構成が必要です。詳細については、プラグインのドキュメントを参照してください。

    以上がSublime テストで CSS ファイルを実行する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

    声明:
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。