LiveStyle是一款實(shí)用的瀏覽器插件，可幫助用戶(hù)實(shí)現(xiàn)css的雙向編輯，通過(guò)在瀏覽器中直接修改css樣式，去觀察頁(yè)面變化情況，可節(jié)省用戶(hù)大量時(shí)間，無(wú)需在編輯器中反復(fù)修改刷新，需要的用戶(hù)快來(lái)下載吧。

軟件介紹

LiveStyle是一款CSS、LESS和SCSS的第一個(gè)雙向?qū)崟r(shí)編輯工具，類(lèi)似于流行的LiveReload、代碼包等等，用戶(hù)可以實(shí)現(xiàn)從瀏覽器到編輯器，編輯器到瀏覽器的雙向?qū)崟r(shí)編輯，。這些工具背后的想法很簡(jiǎn)單：您在編輯器中編輯CSS文件，保存它，然后查看瀏覽器中包含此樣式表的網(wǎng)頁(yè)是如何自動(dòng)刷新的，從而為您剛才所做的更改提供視覺(jué)反饋。

軟件特色

雙向的

更改從編輯器傳輸?shù)綖g覽器，然后瀏覽器再傳輸?shù)骄庉嬈鳌?/p>

一顆心

在LiveStyle中，您可以將瀏覽器樣式表與編輯器中的文件連接起來(lái)。它給你無(wú)與倫比的靈活性:你可以使用你的硬盤(pán)，USB，F(xiàn)TP，網(wǎng)絡(luò)安裝文件，甚至新的，未保存的文件。

遠(yuǎn)程視圖

遠(yuǎn)程視圖創(chuàng)建一個(gè)指向本地網(wǎng)站的公開(kāi)可用的網(wǎng)址。使用此網(wǎng)址在任何聯(lián)網(wǎng)設(shè)備或?yàn)g覽器上預(yù)覽本地網(wǎng)站。

通過(guò)編輯器和開(kāi)發(fā)工具的即時(shí)實(shí)時(shí)更新。

軟件功能

實(shí)時(shí)編輯

當(dāng)您鍵入時(shí)，LiveStyle會(huì)立即在瀏覽器中更新CSS。不再保存文件或重新加載頁(yè)面，只需查看單次更新如何影響網(wǎng)頁(yè)。

瀏覽器→編輯器

有沒(méi)有想過(guò)在開(kāi)發(fā)工具中調(diào)整布局，并把這些改變放到你的源代碼中？LiveStyle是唯一能做到這一點(diǎn)的工具。它也適用于LESS和SCSS。

使用你自己的工具

LiveStyle不需要任何特殊的構(gòu)建工具或網(wǎng)絡(luò)服務(wù)器來(lái)工作。它直接集成到您的編輯器和瀏覽器中。目前在谷歌鉻和崇高的文本工作。Atom插件可用于測(cè)試。

任何規(guī)模

LiveStyle設(shè)計(jì)用于任何規(guī)模的項(xiàng)目:從小型單頁(yè)應(yīng)用到大型網(wǎng)站。你甚至可以使用你的實(shí)時(shí)網(wǎng)站！

簡(jiǎn)單的跨瀏覽器測(cè)試

使用遠(yuǎn)程查看功能，您可以在任何聯(lián)網(wǎng)的瀏覽器和設(shè)備上輕松預(yù)覽本地網(wǎng)站。編輯器和開(kāi)發(fā)工具的實(shí)時(shí)更新。

跨平臺(tái)

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

安裝方法

自動(dòng)安裝：

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

最簡(jiǎn)單的方式就是使用LiveStyle應(yīng)用:

1.為你的操作系統(tǒng)下載LiveStyle應(yīng)用(暫時(shí)還不支持Linux，請(qǐng)使用手動(dòng)安裝方法)。

2.解壓然后運(yùn)行。

Windows用戶(hù)：當(dāng)你首次運(yùn)行LiveStyle，Windows可能會(huì)請(qǐng)求接入網(wǎng)絡(luò)，請(qǐng)?jiān)试S該請(qǐng)求。在下載插件以及Remote View是需要接入網(wǎng)絡(luò)的。

如果進(jìn)展順利的話(huà)，你將會(huì)看到LiveStyle應(yīng)用的界面類(lèi)似下面這樣：

LiveStyle應(yīng)用的界面可以看到需要獲取的插件以及它們的安裝情況，當(dāng)然也可以看到Remote View會(huì)話(huà)列表。點(diǎn)擊安裝按鈕就會(huì)開(kāi)啟安裝的進(jìn)程。

手動(dòng)安裝：

在下載以及運(yùn)行LiveStyle應(yīng)用遇到問(wèn)題時(shí)，你可以嘗試手動(dòng)安裝。

Google chrome插件

1.在Chrome中，瀏覽器地址欄跳轉(zhuǎn)到LiveStyle WebStore page。

2.點(diǎn)擊右上角的添加至Chrome按鈕：

一旦安裝成功后，你將會(huì)在Chrome工具欄看到LiveStyle圖標(biāo)：

使用方法

Sublime Text插件

安裝Sublime Text插件最簡(jiǎn)單的方法就是通過(guò)Package Control，這是安裝Sublime Text插件比較好的方式：Package Control會(huì)管理所有的插件安裝的流程，為你進(jìn)行自動(dòng)更新。

1.正如描述所說(shuō)的安裝Package Control(如果你到現(xiàn)在還沒(méi)有安裝Package Control)。

2.在Sublime Text中點(diǎn)擊Tools > Command Palette...菜單欄。

3.在彈出的對(duì)話(huà)框，輸入install package來(lái)找到Package Control: Install Package菜單欄，用方向鍵進(jìn)行選擇然后敲擊回車(chē)。

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

5.當(dāng)載入完成，你可以看到帶有可用的包列表的對(duì)話(huà)框，輸入livestyle來(lái)找到LiveStyle包，然后敲擊回車(chē)。

過(guò)一會(huì)LiveStyle插件就會(huì)成功安裝，你可能會(huì)重啟Sublime Text來(lái)確保所有的東西都正常工作。

手動(dòng)安裝Sublime Text插件

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

1.在Sublime Text，選中Preferences > Browse Packages...菜單欄。文件管理器將會(huì)打開(kāi)Package文件夾。

2.在打開(kāi)的Package文件夾中新建LiveStyle文件夾。

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

4.最后，你的文件目錄結(jié)構(gòu)應(yīng)該和下面的類(lèi)似。

5.重啟Sublime Text。

Atom插件

可以獲取的Atom插件處于beta測(cè)試狀態(tài)，所以必須要手動(dòng)安裝(LiveStyle應(yīng)用不提供安裝源)。

1.在Atom中，跳轉(zhuǎn)到Preferences > Install。

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

或者你可以通過(guò)apm安裝：apm install livestyle-atom

使用LiveStyle

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

LiveStyle的所有的設(shè)置都是通過(guò)Google Chrome擴(kuò)展控制的：

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

編輯器 ⇄ 瀏覽器能夠?qū)崿F(xiàn)全雙工樣式表更新

編輯器 → 瀏覽器只能實(shí)現(xiàn)編輯器到瀏覽器樣式表更新，所有使用瀏覽器開(kāi)發(fā)工具欄從而對(duì)樣式表進(jìn)行修改的操作被忽略

編輯器 ← 瀏覽器只能實(shí)現(xiàn)開(kāi)發(fā)工具欄到編輯器樣式表更新，所有通過(guò)編輯器從而對(duì)樣式表進(jìn)行修改的操作被忽略

(用LiveStyle實(shí)現(xiàn))實(shí)時(shí)更新樣式表的教程

首先我們應(yīng)該創(chuàng)建實(shí)時(shí)更新所需的會(huì)話(huà)以便我們?nèi)绾魏?jiǎn)單又快樂(lè)的使用LiveStyle！

下載樣式表樣例，然后在Sublime Text打開(kāi)。

在Google Chrome瀏覽器中，跳轉(zhuǎn)到demo頁(yè)面。記住為了實(shí)現(xiàn)實(shí)時(shí)更新，我們將要使用沒(méi)有直接進(jìn)行數(shù)據(jù)訪問(wèn)的外網(wǎng)網(wǎng)站！等一下就會(huì)討論到這個(gè)問(wèn)題。

點(diǎn)擊瀏覽器工具欄的LiveStyle圖標(biāo)，彈出對(duì)話(huà)框，然后使LiveStyle對(duì)當(dāng)前頁(yè)面有效。

對(duì)話(huà)框顯示瀏覽器僅有的樣式表style.min.css。在它的位置下方有一個(gè)編輯器樣式表的下拉選項(xiàng)，選項(xiàng)包含當(dāng)前正被編輯器打開(kāi)的文件列表，這些列表可以被LiveStyle所監(jiān)聽(tīng)。簡(jiǎn)單的在下拉選項(xiàng)中選擇layout.css。在大多數(shù)情況下，LiveStyle會(huì)嘗試通過(guò)文件名來(lái)自動(dòng)和瀏覽器以及編輯器樣式表建立關(guān)聯(lián)。但是既然我們的樣式表?yè)碛胁煌拿?style.min.css和layout.css，所以我們需要手動(dòng)和它們建立聯(lián)系。