Sass和LESS預處理器

Web開發人員應該熟悉一個或兩個預處理器

可樂或百事可樂,Mac或PC,奇蹟還是DC? 在每個社區中,都有一個更好的爭論。 對於網頁設計師或開發人員來說,這場辯論是Sass或更少。

什麼是Sass和LESS?

Syntactically Awesome Stylesheets(Sass)和Leaner CSS(LESS)都是CSS預處理器。 它們是特殊的樣式表擴展,使設計更容易,更高效。 Sass和LESS都會編譯成CSS樣式表,以便瀏覽器讀取它們,這是必不可少的一步,因為現代瀏覽器無法讀取.sass或.less文件類型。

如果您打算進入Web開發領域,那麼熟悉兩種預處理器之一或兩者都是一個好主意

當它歸結為它時,兩者都是相似的。 他們使得CSS寫得更簡單,更面向對象,並且帶來更愉快的體驗。 儘管如此,還是有一些關鍵的區別。 其中五個在這裡列出。

  • 01 Sass在Ruby中。 很少使用JavaScript

    Sass基於Ruby,需要安裝Ruby。 如果你有一台Mac,這沒什麼大不了的。 但是,如果您有Windows機器,則需要更長的安裝時間。

    LESS是像Ruby一樣在Ruby中構建的,但它已被移植到JavaScript中。 為了使用LESS,您可以將適用的JavaScript文件上傳到您的服務器或通過脫機編譯器編譯CSS表單。

  • 02分配變量:Sass使用$; LESS用途@

    Sass和LESS都使用專用字符來分配變量。 這樣你不必輸入規格; 你可以輸入字符。

    在Sass中,這是美元符號($)。 在LESS中,它是符號(@)。 LESS的唯一缺點是有一些現有的CSS選擇器已經在使用@,所以它可能會加強學習曲線。

  • 03 Sass有指南針,LESS有預啟動

    Sass和LESS有可用於集成mixins的擴展(在整個​​站點中存儲和共享CSS聲明的能力)。

    • Sass Compass可用於mixin,其中包括可用於未來支持更新的每個選項。

    • LESS有Preboot.less,LESS Mixins,LESS Elements,gs和Frameless。 LESS的軟件支持比Sass更加分散,導致許多不同的擴展選項可能不會以同樣的方式運行。 對於您的項目,您可能需要列出的所有擴展才能獲得與Compass類似的性能。

  • 04 LESS比Sass有更好的錯誤信息

    Sass和LESS都已經過測試報告語法錯誤的能力。 LESS在測試中有更準確的錯誤消息,因為它報告了錯誤的正確位置。

    像這樣的東西可以節省一點時間汗流ty背的錯誤。

  • 05 LESS比Sass有更多的用戶友好文檔

    LESS文檔在視覺上很吸引人,並且對於初次使用者來說更容易遵循。 Sass文檔有更多的知識庫或wiki設置。

    對於Sass或LESS的採用率來說,這是一個重要的事實,因為它是一個用於網站設計的平台。