2017-04-05 71 views
0

我編譯我的少文件到一個CSS文件。但我在http://lesscss.org/上看到,您可以在網頁上包含更少的文件。爲什麼要編譯你的少文件?

客戶端是最簡單的入門方法和良好的與欠發達 ,但在生產中,當性能和可靠性是 重要,我們建議進行預編譯如何使用Node.js或許多一個 第三方工具可用。在

接下來,下載less.js並將其包含在一個標籤頁面的元素:

要開始了,你的鏈接樣式表.LESS與rel屬性設置 爲「stylesheet /少」 :

什麼是編譯的CSS或者只是j使用較少的文件之間的diffrents?

+3

嗯,首先,將其編譯爲CSS,然後提供該CSS意味着瀏覽器不必一次又一次地在每次頁面加載時編譯LESS。 – BoltClock

+1

當使用瀏覽器不理解的less文件時,您需要包含一個Javascript LESS編譯器,該編譯器讀取less文件並將其轉換爲瀏覽器能夠理解的CSS。我想會有一個很明顯的開銷。 – deceze

回答

0

編譯到CSS

這裏編譯手段,使用一個程序打開一個文件.LESS到.css文件。

例如,一個不太文件:

.outerDiv { 

    .innerDiv { 

     color:green; 

    } 

} 

當你使用它編譯器,將產生類似的css文件:

.outerDiv .innerDiv { 

    color:green; 

} 

我用考拉。它不覆蓋你的文件,它只是產生一個css文件。

您只需在頭部引用該css文件,然後上傳到服務器。

優勢超過less.js方法

這比送過少的文件(特別是如果您壓縮CSS文件打火機(客戶端加載較少的數據),這考拉會爲你做的太)。

它還可以加快加載速度,而不會對用戶產生任何「跳躍」。

相反,如果你使用的less.js方法,那麼:

  • 頁面加載和渲染沒有你的可愛造型.LESS
  • less.js然後踢和你.LESS規則restyles您的網頁

如果用戶處於慢速連接狀態,他們可能會看到舊的未經過版式處理的版本,那麼該頁面會突然重新格式化自己。