使用CSS預處理器Less

2021-09-19 21:33:18 字數 817 閱讀 3570

前天寫了一篇文章,關於如何使用harp來加快人的開發效率,在mac系統和linux系統上測試是沒有問題的,但沒有在windows上測試,使用windows的剛入門的前端工程師,安裝harp失敗後,不知道怎麼解決問題。不管學習什麼,解決問題的能力是最重要的,學會自己動手。

css有以下特點:

然而css的預處理器剛好給我們提供了一些便利。這裡我們主要說明less。它提供了以下功能。這些用法這裡不會完全涉及,可以參考官方文件。

這裡主要說的是在客戶端使用less

1、新建html頁面

你好啊

注意裡面要先引入自己寫的less檔案。

2、less檔案的內容

@base: #f938ab;

div }

p}

可以這些基本的less寫法,已經比css簡單很多了,這裡主要涉及到巢狀選擇器定義顏色變數3、直接在瀏覽器開啟html頁面即可

效果圖這篇文章主要介紹了css的劣勢,以及簡單說了css預處理器的一些特點。最後使用乙個案例來說明less的使用。

生產環境盡量使用css,可以直接使用命令將less編譯為css檔案,再在html頁面裡面引入css即可。平時開發可直接使用less。

注意:harp現在在windows不好用

css預處理器 less

less是一種動態樣式語言,屬於css預處理語言的一種,它使用類似css的語法,為css的賦予了動態語言的特性,如變數 繼承 運算 函式等,更方便css的編寫和維護。我們編寫的less檔案最終會編譯成css檔案 我們編寫的less檔案最終會被編譯成css檔案去執行,那麼在less中注釋分兩種,一種是...

css預處理器 less

官網 中文網 定義變數以 開頭 width 10px height width 10px 定義的變數 height 為20px top 就像定義了乙個方法,然後可以在多個地方呼叫一樣。bordered top header logo 加減乘除 單位一最左側運算元的單位為準。如果單位換算無效或失去意義...

less筆記 css預處理器

less 是一種動態樣式語言,屬於css預處理器的範疇,它擴充套件了css語言,增加了變數 mixin 函式等特性,使css更易維護和擴充套件 less既可以在客戶端執行,也可以借助node.js在服務端執行。以 開頭的注釋,不會被編譯到css檔案中 以 包裹的注釋會被編譯到css檔案中。使用 來申...