css less預處理器

2021-10-10 09:49:10 字數 1896 閱讀 3565

###less中的巢狀規則

1.基本巢狀規則

#wrap

}

less基本巢狀規則

*

#lista}

span

}

2.&的使用

html引入

//定義變數

@zero:0;

//定義id選擇器

@selector:#wrap;

//定義寬

@w:width;

//顏色選擇

//變數的延遲載入

.class

.class .brass

###less中的混合

混合就是將一系列屬性從乙個規則集引入到另乙個規則集的方式

1.普通混合

.juzhong

#box1

#box2

2.不帶輸出的混合

.juzhong()

#box1

#box2

3.帶引數的混合

.juzhong(@w,@h,@c)

#box1

#box2

4.帶引數並且有預設值的混合

.juzhong(@w:100px,@h:100px,@c:pink)

#box1

#box2

5.帶多個引數的混合

6.命名引數

.juzhong(@w:100px,@h:100px,@c:pink)

#box1

#box2

7.匹配模式

*

/*向上的三角*/

.********(top,@w:10px,@c:pink)

/*向下的三角*/

.********(bottom,@w:10px,@c:pink)

/*向左的三角*/

.********(left,@w:10px,@c:pink)

/*向右的三角*/

.********(right,@w:10px,@c:pink)

.********(@_,@w:10px,@c:pink)

#sanjiao

#sanjiao2

#sanjiao3

#sanjiao4

view code

8.arguments變數

*

.border(@w:10px,@style:solid,@c:deeppink)

#wrap

###less運算

在less中可以進行加減乘除的運算

#wrap

###less避免編譯

*

#wrap

###less繼承

.juzhong(@w:100px,@h:100px,@c:pink)

#wrap

#box1

#box2

效能比混合高

靈活度比混合低

預處理器小結

預處理器發生在程式被編譯之前,所有的預處理器指令都以 開頭。1.include預處理器指令 使指定檔案的乙個副本被包含到指令所在的位置。include 與 include filename 區別 簡單不加以說明 include 指令用於包含標準類庫標頭檔案,也可以用於由多個原始檔組成的程式。2.in...

預處理器簡介

預處理是c編譯器做的第一件事情,主要是做一些文字方面的工作。包括 刪除注釋 插入被 include包含的檔案 定義和替換由 define指令定義的符號以及 的部份內容,和條件編譯。預定義符號 預定義符號如下表所示 file 進行編譯的檔名 line 檔案的當前行號 date 檔案編譯的日期 time...

C 預處理器

偶爾翻c 的教材,看到了一些以前自己不太關注的角落。參考教材 c 大學教程 harvey m.deitel 和paul james deitel著。預處理發生在編譯之前,包括把其他檔案包含到要編譯的檔案中 定義符號常量和巨集 程式 的條件編譯以及預處理指令的條件執行。對應的,預處理指令有 檔案包含命...