Less 語法快速入門

2021-09-27 10:03:55 字數 1109 閱讀 4004

less 是一門 css 預處理語言其可以執行在 node 或瀏覽器端。

它將傳統的 css 樣式結構單一的排版順序進行了優化,讓我們可以通過層級巢狀的方式將 css 類名與html結構一一對應起來。

這樣的好處不僅僅使得 css 樣式排版更清楚,也可以讓我們在後期的修改中快速查詢,同時減少了**量,一定程度上降低了**的重複性,最關鍵的是使得 css 樣式相互不干擾

它的引入方式不作介紹在vue中使用的時候,需要在style中加入 less 如下

"less" scoped>

<

/style>

大部分樣式的編寫如下案例

class

="left-menu"

>

class

="second-menu"

>

class

="iconfont"

>

span

>

class

="name"

>

span

>

p>

div>

class

="info-ctx"

>

div>

less部分

.left-menu

.name{}

}}.info-ctx

在基本用法上和css基本無差別,有了結構化編寫更易維護修改

同樣重複的樣式在編寫過後,可直接再次寫入類名即可使用這一樣式

它也支援算數運算等函式操作,但通常使用率較少,如可對px值等使用乘除加減等運算

在樣式復用上,可參照下例

.p1

.p2

其.p2樣式等同如下

.p2

&符用法

.filter-item 

}

等同於

.filter-item

}

本文一再快速上手less,針對新人,如想深入研究請查詢官方文件

快速入門less

less 是一門 css 預處理語言,它擴充套件了 css 語言,增加了變數 mixin 函式等特性,使 css 更易維護和擴充套件。less 可以執行在 node 或瀏覽器端。作用 將less型別的檔案轉換為css型別的檔案。常見的less編譯工具有 winless ss koala 使用 來申明...

less快速入門官方文件

less 是一門 css 預處理語言,它擴充了 css 語言,增加了諸如變數 混合 mixin 函式等功能,讓 css 更易維護 方便製作主題 擴充。less 可以執行在 node 瀏覽器和 rhino 平台上。網上有很多第三方工具幫助你編譯 less 原始碼。官方例項 base f938ab bo...

MarkDown語法快速入門

主要內容 markdown是什麼?誰發明了這麼個東西?為什麼要使用它?怎麼使用?都誰在用?markdown是一種輕量級標記語言,它以純文字形式 易讀 易寫 易更改 編寫文件,並最終以html格式發布。markdown也可以理解為將以markdown語言編寫的語言轉換成html內容的工具,最初是乙個p...