less 的簡單使用

2022-06-27 06:18:08 字數 980 閱讀 4671

(1)、在

node.js

環境下

less 是一門

css

預處理語言,它擴充套件了

css

語言,增加了變數、

mixin

、函式等特性,使

css

更易維護和擴充套件。

less 可以執行在

node

或瀏覽器端。

(使用方法):

第一步:安裝

直接點選下一步就可以,安裝好後,在node的命令提示符下完成此**   

npm install -g less

第二步:測試

安裝完成後,在所建的html檔案中,右鍵單擊在整合終端中開啟,出現提示符,打入以下**,回車

less -v

第三步:新建專案

新建.css和.less檔案,並在html檔案中引入.css

在less檔案中寫入**    執行後在css檔案中會出現相應的**

@wght:bold;

@col:red;

@qx:oblique;

@size:16px;

@cen:center;

@lin:300px;

@bck:blue;

@br:5px solid yellow;

div

第四步:編輯,執行(這是最重要的一步)

完成以上配置後,直接在所用的html檔案中整合終端 的提示符中寫入以下**。。。。。。

lessc style.less style.css

優點:less語言的優點:

1、結構清晰,便於擴充套件

2、可以方便地遮蔽瀏覽器私有語法差異

3、可以輕鬆實現多重繼承

4、完全相容 css **,可以方便地應用到老專案中

Less的簡單使用

1.定義變數 color dc3545 2.樣式復用 1 無引數 box layout 2 帶引數 box r 10px layout 3.樣式巢狀 layout div a slider 4.less轉css 配置nodejs環境,安裝npm,通過npm安裝lessc,lessc可將less檔案轉...

less的簡單使用

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

LESS命令簡單介紹以及使用

less命令簡單介紹以及使用 b 緩衝區大小 設定緩衝區的大小 e 當檔案顯示結束後,自動離開 f 強迫開啟特殊檔案,例如外圍裝置代號 目錄和二進位制檔案 i 忽略搜尋時的大小寫 m 顯示類似more命令的百分比 n 顯示每行的行號 o 檔名 將less 輸出的內容在指定檔案中儲存起來 q 不使用警...