less css預處理語言

若頁面多處使用同一屬性的同個值，為了便於維護**，需要採用變數的形式來解決。

雖然css原生也支援變數的設定還有計算函式，但是這些相容性不太好（針對ie8及以下的版本），因此產生了less。

doctype html

>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
meta 
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
<
title
>less由來
title
>
<
style
>
html
.box1
.box2
.box3
style
>
head
>
<
body
>
<
div 
class
="box1"
>
div>
<
div 
class
="box2"
>less
div>
<
div 
class
="box3"
>
div>
body
>
html
>

// less中的單行注釋，注釋內容不會被解析到css中 /*

css中的單行注釋，注釋內容會被解析到css中 
*/.box1
.box3
}// 變數，在變數中可以儲存乙個任意的值
// 並且可以在需要時，任意地修改變數中的值
// 變數的語法：@變數名
@w:200px;
@color:#bfa;
@a:box5;
.box4
// 作為類名，或者一部分值使用時必須以 @ 的形式使用
div// 可以在變數宣告前就使用變數（不推薦使用）
@c:335px;
.widget

// 父元素和擴充套件

.box1
// 子元素選擇器 —— .box1>.box2
>.box3
// & 表示外層的父元素
// 偽類選擇器 —— .box1:hover
&:hover
// div .box1
div &
}.p1
// :extend() 對當前選擇器擴充套件指定選擇器的樣式（選擇器分組）
// 相當於並集選擇器
// 即.p1, .p2
.p2:extend(.p1)
.p3// 使用類選擇器時，可以在選擇器後邊新增乙個括號，實際上是建立了乙個mixins
.p4()
.p5

// 混合函式：可以設定變數和預設值

// 可以通過 import 來將其他的less引入到當前的less中

@import "syntax2.less";
.box1
 
less css預處理語言
安裝 npm i g less 使用 vscode安裝外掛程式easy less 新建乙個less檔案 例如 test.less 每次儲存的時候，都會自動編譯乙個css檔案 然後頁面引入編譯後的css檔案即可 宣告變數 注 宣告變數不能有特殊字元 不能數字開頭,可以數字結尾.區分大小寫 例如 col...
C語言預處理
c語言中編譯預處理的三種形式的命令 巨集定義，檔案包含，條件編譯命令。1 巨集定義主要是 define，undef 如下 define pi 3.1415926 不帶引數的巨集定義 define max a,b a b?a b 帶引數的巨集定義 說明 巨集定義在c語言與c 語言中是相通的。下面舉例說...
C語言預處理
預處理 系統自動自動呼叫預處理程式對程式中 號開頭的預處理部分進行處理，處理完畢後可以進城源程式的編譯階段。預定義 一些預定義符號 常用於除錯 file 正在預編譯的源檔名 line 當前行號 只有這個是整數常量，其他是字串常量 function 當前所在函式名 date 當前日期 time 當前時...