LiveStyle是一款實用的瀏覽器插件，可幫助用戶實現css的雙向編輯，通過在瀏覽器中直接修改css樣式，去觀察頁面變化情況，可節省用戶大量時間，無需在編輯器中反復修改刷新，需要的用戶快來下載吧。

軟件介紹

LiveStyle是一款CSS、LESS和SCSS的第一個雙向實時編輯工具，類似于流行的LiveReload、代碼包等等，用戶可以實現從瀏覽器到編輯器，編輯器到瀏覽器的雙向實時編輯，。這些工具背后的想法很簡單：您在編輯器中編輯CSS文件，保存它，然后查看瀏覽器中包含此樣式表的網頁是如何自動刷新的，從而為您剛才所做的更改提供視覺反饋。

軟件特色

雙向的

更改從編輯器傳輸到瀏覽器，然后瀏覽器再傳輸到編輯器。

一顆心

在LiveStyle中，您可以將瀏覽器樣式表與編輯器中的文件連接起來。它給你無與倫比的靈活性:你可以使用你的硬盤，USB，FTP，網絡安裝文件，甚至新的，未保存的文件。

遠程視圖

遠程視圖創建一個指向本地網站的公開可用的網址。使用此網址在任何聯網設備或瀏覽器上預覽本地網站。

通過編輯器和開發工具的即時實時更新。

軟件功能

實時編輯

當您鍵入時，LiveStyle會立即在瀏覽器中更新CSS。不再保存文件或重新加載頁面，只需查看單次更新如何影響網頁。

瀏覽器→編輯器

有沒有想過在開發工具中調整布局，并把這些改變放到你的源代碼中？LiveStyle是唯一能做到這一點的工具。它也適用于LESS和SCSS。

使用你自己的工具

LiveStyle不需要任何特殊的構建工具或網絡服務器來工作。它直接集成到您的編輯器和瀏覽器中。目前在谷歌鉻和崇高的文本工作。Atom插件可用于測試。

任何規模

LiveStyle設計用于任何規模的項目:從小型單頁應用到大型網站。你甚至可以使用你的實時網站！

簡單的跨瀏覽器測試

使用遠程查看功能，您可以在任何聯網的瀏覽器和設備上輕松預覽本地網站。編輯器和開發工具的實時更新。

跨平臺

您的瀏覽器和編輯器可以在任何地方使用LiveStyle。

安裝方法

自動安裝：

為了(讓使用者)追求更好的編輯體驗，LiveStyle可以直接集成到瀏覽器以及代碼編輯器中。所以你首先要做的第一件事就是安裝瀏覽器以及編輯器插件(目前，只有支持Google Chrome以及Sublime Text)。

最簡單的方式就是使用LiveStyle應用:

1.為你的操作系統下載LiveStyle應用(暫時還不支持Linux，請使用手動安裝方法)。

2.解壓然后運行。

Windows用戶：當你首次運行LiveStyle，Windows可能會請求接入網絡，請允許該請求。在下載插件以及Remote View是需要接入網絡的。

如果進展順利的話，你將會看到LiveStyle應用的界面類似下面這樣：

LiveStyle應用的界面可以看到需要獲取的插件以及它們的安裝情況，當然也可以看到Remote View會話列表。點擊安裝按鈕就會開啟安裝的進程。

手動安裝：

在下載以及運行LiveStyle應用遇到問題時，你可以嘗試手動安裝。

Google chrome插件

1.在Chrome中，瀏覽器地址欄跳轉到LiveStyle WebStore page。

2.點擊右上角的添加至Chrome按鈕：

一旦安裝成功后，你將會在Chrome工具欄看到LiveStyle圖標：

使用方法

Sublime Text插件

安裝Sublime Text插件最簡單的方法就是通過Package Control，這是安裝Sublime Text插件比較好的方式：Package Control會管理所有的插件安裝的流程，為你進行自動更新。

1.正如描述所說的安裝Package Control(如果你到現在還沒有安裝Package Control)。

2.在Sublime Text中點擊Tools > Command Palette...菜單欄。

3.在彈出的對話框，輸入install package來找到Package Control: Install Package菜單欄，用方向鍵進行選擇然后敲擊回車。

4.等待幾秒，然后Package Control載入可用的包列表。

5.當載入完成，你可以看到帶有可用的包列表的對話框，輸入livestyle來找到LiveStyle包，然后敲擊回車。

過一會LiveStyle插件就會成功安裝，你可能會重啟Sublime Text來確保所有的東西都正常工作。

手動安裝Sublime Text插件

如果你不能或者不想使用Package Control，你可以嘗試完全手動安裝：

1.在Sublime Text，選中Preferences > Browse Packages...菜單欄。文件管理器將會打開Package文件夾。

2.在打開的Package文件夾中新建LiveStyle文件夾。

3.下載，然后解壓插件代碼歸檔到新建的LiveStyle文件夾。

4.最后，你的文件目錄結構應該和下面的類似。

5.重啟Sublime Text。

Atom插件

可以獲取的Atom插件處于beta測試狀態，所以必須要手動安裝(LiveStyle應用不提供安裝源)。

1.在Atom中，跳轉到Preferences > Install。

2.搜索livestyle-atom插件，然后安裝。

或者你可以通過apm安裝：apm install livestyle-atom

使用LiveStyle

在你相繼安裝瀏覽器插件以及編輯器插件后，你就可以開始使用LiveStyle。

LiveStyle的所有的設置都是通過Google Chrome擴展控制的：

LiveStyle彈出框顯示可以在當前頁面獲取的樣式表的列表，每一個瀏覽器LiveStyle彈出框(當前頁所擁有的)樣式表位置下面是一個包含所有樣式表(指的是用編輯器打開的樣式表)的下拉菜單。為了開始使用LiveStyle，你只需要讓LiveStyle在當前頁面可以使用，然后就是將瀏覽器樣式表和編輯器打開的樣式表進行關聯起來。在那以后，在編輯器上對樣式表進行的改動將會同步到瀏覽器指定的樣式表中，反之亦然。 有時候你可能想限制瀏覽器和編輯器之間的樣式更新以及保存功能，例如編輯器到瀏覽器更新，所以你用瀏覽器開發工具欄對樣式修改的操作不會破壞源代碼。為了實現上述功能，只需要點擊藍色按鈕來循環選擇更新模式：

編輯器 ⇄ 瀏覽器能夠實現全雙工樣式表更新

編輯器 → 瀏覽器只能實現編輯器到瀏覽器樣式表更新，所有使用瀏覽器開發工具欄從而對樣式表進行修改的操作被忽略

編輯器 ← 瀏覽器只能實現開發工具欄到編輯器樣式表更新，所有通過編輯器從而對樣式表進行修改的操作被忽略

(用LiveStyle實現)實時更新樣式表的教程

首先我們應該創建實時更新所需的會話以便我們如何簡單又快樂的使用LiveStyle！

下載樣式表樣例，然后在Sublime Text打開。

在Google Chrome瀏覽器中，跳轉到demo頁面。記住為了實現實時更新，我們將要使用沒有直接進行數據訪問的外網網站！等一下就會討論到這個問題。

點擊瀏覽器工具欄的LiveStyle圖標，彈出對話框，然后使LiveStyle對當前頁面有效。

對話框顯示瀏覽器僅有的樣式表style.min.css。在它的位置下方有一個編輯器樣式表的下拉選項，選項包含當前正被編輯器打開的文件列表，這些列表可以被LiveStyle所監聽。簡單的在下拉選項中選擇layout.css。在大多數情況下，LiveStyle會嘗試通過文件名來自動和瀏覽器以及編輯器樣式表建立關聯。但是既然我們的樣式表擁有不同的名字-style.min.css和layout.css，所以我們需要手動和它們建立聯系。