亚洲日本va中文字幕线,好男人看视频在线观看高清,用舌头去添女人下面视频

livestyle for sublime是一款首個用于CSS、LESS和SCSS的雙向?qū)崟r編輯插件工具。在LiveStyle中，將瀏覽器樣式表與編輯器中的文件連接在一起，真正實現(xiàn)寫一句樣式就能在頁面看到實時效果。它為您提供了無與倫比的靈活性：您可以使用硬盤驅(qū)動器，USB，F(xiàn)TP，網(wǎng)絡(luò)安裝中的文件，甚至可以使用未保存的新文件。

軟件簡介：

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

軟件特色：

雙向的

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

一顆心

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

遠程視圖

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

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

使用方法：

所有LiveStyle設(shè)置均通過Google Chrome擴展程序控制：

LiveStyle彈出窗口顯示樣式表列表，可在當前網(wǎng)頁上使用。每個瀏覽器樣式表的下方是一個下拉列表，其中包含所有樣式表，并在編輯器中打開。要開始使用LiveStyle，只需為當前頁面啟用LiveStyle，并將瀏覽器樣式表與一個編輯器樣式表相關(guān)聯(lián)。之后，來自編輯器樣式表的所有更新將被推送到指定的瀏覽器樣式表，反之亦然。

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

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

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

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

教程：進行首次實時更新

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

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

在Google Chrome瀏覽器中，轉(zhuǎn)到演示頁面。請注意，我們將使用您沒有直接訪問權(quán)限的遠程網(wǎng)站進行實時更新！我們稍后再討論。

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

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

您準備好出發(fā)了！在Sublime Text中，將color屬性更改為redin .sample-content__title {...}rule，您應該看到頁面標題如何變?yōu)榧t色！播放.sample-content__title {...}并添加，例如background: yellow;。

現(xiàn)在打開DevTools并找到并單擊<h4 class="sample-content__title">element。您應該看到樣式包含您在代碼編輯器中所做的最新更新：

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

您剛剛看到使用LiveStyle開始實時CSS編輯是多么容易，但是您還沒有發(fā)現(xiàn)最強大的功能。

源補丁

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

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

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

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

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

h4 { font-family: arial; }

現(xiàn)在，在文本編輯器中的規(guī)則中添加font-style: italic;屬性h4 {...}，并注意頁面標題變?yōu)樾斌w，但仍會繪制底部邊框，盡管該border-bottom屬性沒有文本編輯器部分。換句話說，LiveStyle僅發(fā)送更新的屬性，并將它們應用于另一端。它并不能完全取代CSS規(guī)則或樣式表。

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

你應該學的東西

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

您不需要任何特殊的構(gòu)建工具或Web服務(wù)器即可使用LiveStyle：幾乎Internet中的每個網(wǎng)站都可以成為您的游樂場。

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

LiveStyle使用源修補程序：您可以使用大型串聯(lián)和精簡代碼庫，在生產(chǎn)網(wǎng)站上輕松調(diào)整小型CSS模塊。