css雙向編輯插件下載 最新更新|軟件分類|軟件專題|手機(jī)版|論壇轉(zhuǎn)貼|軟件發(fā)布

您當(dāng)前所在位置： 首頁 → 編程開發(fā) → 編程輔助 → css雙向編輯插件(livestyle for sublime) v1.0.0 綠色版

css雙向編輯插件(livestyle for sublime)

v1.0.0 綠色版

css雙向編輯插件(livestyle for sublime)下載
  • 軟件大?。?span itemprop="fileSize">44.60 MB
  • 軟件語言：中文
  • 軟件類型：國產(chǎn)軟件 / 編程輔助
  • 軟件授權(quán)： 免費(fèi)軟件
  • 更新時(shí)間：2020-11-05 10:00:14
  • 軟件等級(jí)：4星
  • 軟件廠商： -
  • 應(yīng)用平臺(tái)：WinXP, Win7, Win8, Win10
  • 軟件官網(wǎng)：

ITMOP本地下載文件大?。?4.60 MB

點(diǎn)贊 好評(píng) 0%（0） 差評(píng) 差評(píng) 0%（0）

軟件介紹人氣軟件精品推薦相關(guān)文章網(wǎng)友評(píng)論下載地址

小編為您推薦： css編程 livestyle

css雙向編輯插件是一款十分新穎的css樣式編程輔助軟件，它的不占內(nèi)存，下載即可使用，我們?cè)诰幊坦ぷ髦薪?jīng)常會(huì)碰到修改css代碼智能生成之后才能看到實(shí)際效果的請(qǐng)款，這款軟件很好的解決了這個(gè)問題，呀可以將css代碼和樣式做出一個(gè)實(shí)時(shí)的Shaun更喜愛那個(gè)顯示，大大的提高了我們的工作效率，十分的好用。

css雙向編輯插件特色：

一顆心

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

雙向的

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

遠(yuǎn)程視圖

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

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

css雙向編輯插件

軟件功能：

瀏覽器→編輯器

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

使用你自己的工具

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

任何規(guī)模

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

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

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

簡單的跨瀏覽器測試

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

跨平臺(tái)

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

使用方法：

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

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

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

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

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

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

教程：進(jìn)行首次實(shí)時(shí)更新

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

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

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

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

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

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

現(xiàn)在打開DevTools并找到并單擊

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

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

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

源補(bǔ)丁

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

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

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

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

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

h4 {? ? font-family: arial; }

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

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

你應(yīng)該學(xué)的東西

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

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

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

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

更多>> 軟件截圖

推薦應(yīng)用

    其他版本下載

      精品推薦

      相關(guān)文章

      下載地址

      • css雙向編輯插件(livestyle for sublime) v1.0.0 綠色版

      查看所有評(píng)論>> 網(wǎng)友評(píng)論

      發(fā)表評(píng)論

      (您的評(píng)論需要經(jīng)過審核才能顯示) 網(wǎng)友粉絲QQ群號(hào):374962675

      查看所有 0條 評(píng)論>>

      更多>> 猜你喜歡