Less的常用編譯語法

2021-10-22 15:18:25 字數 2573 閱讀 2781

開發環境

在生產環境下編譯(產品還沒開發完,正在開發中,這個是開發環境)

在開發環境下編譯只需要匯入less.js即可

引用less步驟

lang

="ch"

>

>

charset

="utf-8"

>

>

demotitle

>

rel=

"stylesheet/less"

href

="[引入寫的less檔案]"

>

src=

"js.less-2.5.3.min.js"

>

script

>

head

>

>

body

>

html

>

less檔案中css檔案匯入( 需要將css**編譯放在瀏覽器中渲染 )

import "[檔名]" ;
less檔案中css檔案匯入(less公用的變數或者方法只需要調取使用,**不需要編譯,所以要用reference修飾一下)

import (reference) "[檔名]" ;
生產環境

在生產環境下編譯(產品開發完成了,需要部署到伺服器上)

專案上線,不能把less部署,這樣使用者每一次開啟頁面都需要重新的編譯,非常耗效能,我們部署到伺服器上的是編譯後的css

在當前電腦的全域性環境下安裝less模組安裝命令:npm install less -g檢測是否安裝成功:lessc -v

基於命令把我們的less編譯成css,把指定目錄中的less編譯成css(並且實現了**的壓縮),把編譯後的css存入到具體指定路徑的資料夾中;上線前在html中匯入的css檔案

lessc css/index.less css/index.min.css -x
基於webpack和框架實現工程化開發的時候,我們都是在webpack配置檔案中配置出less的編譯(需要安裝less/less-loader等模組),這樣不管是開發環境下的預覽,還是部署到生產環境下,都是基於webpack中的less模組編譯

less的一些常用語法

用變數儲存乙個公共值,後期需要使用這個值,直接調取變數即可,以後如果值需要修改,只需要更改變數的值,那麼所有用到這個變數的地方都跟著修改了

**例項

/*

.conterpos => [函式名]

@w:100; @h:100 => [形參,:100 是不傳參設定的預設值]

unit() => [引用形參]

*/.conterpos(@w

:100,@h

:100)

.box

**例項

/*reference:只把內容匯入過來使用,但是不會編譯common中的內容*/

import (reference)

"common"

;/************/

/*less建立變數*/

link-color

:#555;

/*建立變數*/

bg-src

:"../img"

;/*less中字串拼接*/"@"

/*使用例項:*/

.box

/news_1.png");}

/************/

/*less作用域和巢狀*/

h:200;

.pub

@h:300;

}&>.bg

&.bg

&:hover

}/************/

/*less建立函式*/

.transition

(@property

:all,@duration

:.5s,@timing-function

:linear,@delay

:0s)

.cc

less的使用 基本語法 編譯

注釋 會被刪除 不會被刪除1.變數為屬性值定義變數 變數名 變數值 使用變數 屬性 變數名 變數 main color 333 用法 body2.變數為屬性或者為選擇器定義變數 變數名 變數值 使用變數 屬性值 變數 property color 屬性 用法 body 333 變數 myselect...

less常用語法

less 是一門 css 預處理語言,它擴充套件了 css 語言,增加了變數 mixin 函式等特性,使 css 更易維護和擴充套件。變數允許我們定義全域性公共樣式,在需要的時候進行呼叫。color 4d926f header可以在樣式a中引入樣式b,從而使得樣式b繼承了樣式a,當然還可以如函式一樣...

less基礎語法

less 是一門 css 預處理語言,它擴充了 css 語言,增加了諸如變數 混合 mixin 函式等功能,讓 css 更易維護 方便製作主題 擴充。node 瀏覽器和 rhino 平台都可以。本人使用的則是國人的koala。分為兩種 和 1.此種編譯後不會出現在css檔案中,不編譯 2.這種編譯後...