LiveStyle(CSS雙向編輯器)v1.0.0

LiveStyle是一款實用的雙向實時編輯工具，支持CSS、LESS和SCSS，使用這款軟件可以實現瀏覽器到編輯器，也可以反過來，操作非常的方便，可以更好的管理文件。

【基本簡介】

LiveStyle是一個用於實時CSS編輯的工具，類似於流行的LiveReload,代碼包等等。這些工具背後的想法很簡單:您在編輯器中編輯CSS文件，保存它，然後查看瀏覽器中包含此樣式表的網頁是如何自動刷新的，從而為您剛才所做的更改提供視覺反饋。

【軟件特色】

雙向的

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

一顆心

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

遠程視圖

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

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

【功能介紹】

實時編輯

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

瀏覽器→編輯器

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

使用你自己的工具

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

任何規模

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

簡單的跨瀏覽器測試

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

跨平台

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

【使用方法】

所有LiveStyle設置均通過Google Chrome擴展程序控製：

LiveStyle彈出窗口顯示樣式表列表，可在當前網頁上使用。每個瀏覽器樣式表的下方是一個下拉列表，其中包含所有樣式表，並在編輯器中打開。要開始使用LiveStyle，隻需為當前頁麵啟用LiveStyle，並將瀏覽器樣式表與一個編輯器樣式表相關聯。之後，來自編輯器樣式表的所有更新將被推送到指定的瀏覽器樣式表，反之亦然。

有時，您可能希望禁用雙向樣式表更新，並僅保留編輯器到瀏覽器的更新，以便您的DevTools實驗不會破壞您的源代碼。為此，請單擊藍色按鈕以循環瀏覽更新模式：

editor ⇄ browser 啟用完整的雙向更新；

editor → browser 僅啟用從編輯器到瀏覽器的更新，DevTools中進行的所有更新將被忽略；

editor ← browser 僅啟用DevTools到編輯器的更新，在編輯器中進行的所有更新將被忽略。

教程：進行首次實時更新

讓我們創建我們的第一個實時更新會話，以了解如何輕鬆有趣地使用LiveStyle！

下載示例樣式表，然後在Sublime Text中打開它。

在Google Chrome瀏覽器中，轉到演示頁麵。請注意，我們將使用您沒有直接訪問權限的遠程網站進行實時更新！我們稍後再討論。

單擊瀏覽器工具欄中的LiveStyle圖標以打開彈出窗口，並為當前頁麵啟用LiveStyle。

彈出窗口顯示style.min.css為唯一的瀏覽器樣式表。在它下麵是一個編輯器樣式表下拉列表-LiveStyle可以理解的當前在編輯器中打開的文件列表。隻需layout.css從下拉列表中選擇即可。在大多數情況下，LiveStyle會嚐試使用其文件名自動關聯瀏覽器和編輯器樣式表。但是，由於我們的樣式表具有不同的名稱- style.min.css和- layout.css我們必須手動將它們關聯。

您準備好出發了！在Sublime Text中，將color屬性更改為redin .sample-content__title {...}rule，您應該看到頁麵標題如何變為紅色！播放.sample-content__title {...}並添加，例如background: yellow;。

現在打開DevTools並找到並單擊

element。您應該看到樣式包含您在代碼編輯器中所做的最新更新：

在DevTools中，將標頭設置color為.sample-content__title，blue並且Sublime Text中的源代碼將相應更新。來吧，加入padding: 10px;了.sample-content__title在DevTools。

您剛剛看到使用LiveStyle開始實時CSS編輯是多麼容易，但是您還沒有發現最強大的功能。

源補丁

看一下的源代碼style.min.css。它與...不完全相同layout.css：它經過縮小，並包含更多CSS規則和屬性。

在現代的Web開發中，瀏覽器中的樣式表與開發人員編寫的源代碼不同。他們將大型CSS代碼庫分成模塊，然後將它們串聯到一個singe文件中，將其最小化，運行其他後處理程序（例如Autoprefixer），等等，以將最佳結果提供給最終用戶。而LiveStyle意識到這一點。

LiveStyle 無需替換代碼（就像其他實時編輯工具一樣），而是使用源代碼修補：它檢測您已更改的CSS屬性，受影響的CSS規則並將這些更改映射到另一個源。您可以將其視為CSS的React：它不是將視圖內容替換為Plain innerHTML，而是應用了一係列高級技術來僅檢測和更新已更改的部分並盡可能保持先前的狀態。

為了更好地說明它是如何工作的，讓我們回到上麵教程中的示例。在演示頁麵中，有兩個CSS規則應用於頁麵標題：h4和.sample-content__title。該h4規則存在於中，style.min.css但不存在layout.css。

在DevTools中，將font-family屬性更改為h4 {...}to arial，您應該看到一個新規則出現在文本編輯器中：

h4 {    font-family: arial; }

現在，在文本編輯器中的規則中添加font-style: italic;屬性h4 {...}，並注意頁麵標題變為斜體，但仍會繪製底部邊框，盡管該border-bottom屬性沒有文本編輯器部分。換句話說，LiveStyle僅發送更新的屬性，並將它們應用於另一端。它並不能完全取代CSS規則或樣式表。

這就是為什麼您必須在LiveStyle中關聯瀏覽器和編輯器樣式表的原因，乍一看可能有點不尋常。例如，您可以將正在使用的小型CSS模塊與網頁的串聯並縮小的完整樣式表源關聯。與其他實時編輯工具一樣，獲得針對當前任務的即時實時更新，而不是浪費時間等待數十秒，直到在瀏覽器中重新編譯和更新完整的CSS源代碼為止。

你應該學的東西

LiveStyle可以立即更新CSS，而無需保存文件或重新加載頁麵。這是第一個在兩個方向都做到這一點的工具：從編輯器到瀏覽器以及從瀏覽器到編輯器。

您不需要任何特殊的構建工具或Web服務器即可使用LiveStyle：幾乎Internet中的每個網站都可以成為您的遊樂場。

無論如何獲取，您都可以使用任何 CSS文件進行實時編輯：從硬盤驅動器直接打開，或者直接從FTP服務器打開它，也可以不保存而直接創建它。如果可以在文本編輯器中使用此文件，則可以將其用於實時編輯。PS：不要忘記CSS為新創建和未保存的文件設置語法。

LiveStyle使用源修補程序：您可以使用大型串聯和精簡代碼庫，在生產網站上輕鬆調整小型CSS模塊。