Less學習筆記

2021-09-11 17:25:09 字數 830 閱讀 1490

less類似於jquery,是乙個庫。是一種動態樣式語言,屬於css預處理語言的一種,它使用類似css的語法,為css賦予了動態語言的特性,如變數、繼承、運算、函式等,更方便css的編寫和維護。

1、混合變數

例如:.border

如果.div也想用這個樣式直接寫:

複製**

.div

複製**

2、變數沒帶值:
.border-radius(@radius)

.border_02(@border_width)

.test_hunhe

複製**

3、變數帶(預設)值:
.border-radius(@radius:5px)

.border_03(@border_width:10px)

.test_hunhe_03

複製**

另外,雖然.border-02 和.border-03裡面的變數都叫@border-width 但它們不衝突

複製**

//匹配模式-定位

.pos(r)

.pos(a)

.pos(f)

.pipei

複製**

.list

a }span

}// @arguments包含了所有的引數

.border_arg(@w:30px;@c:red;@xx:solid)

.test_arguments

複製**

Less學習筆記

less類似於jquery,是乙個庫。是一種動態樣式語言,屬於css預處理語言的一種,它使用類似css的語法,為css賦予了動態語言的特性,如變數 繼承 運算 函式等,更方便css的編寫和維護。1 混合變數例如 border 如果.div也想用這個樣式直接寫 複製 div 複製 2 變數沒帶值 bo...

學習筆記 Less

less is more than css 少即是多,比css 什麼是less?nodejs庫 瀏覽器端使用 koala的基本使用less的注釋 內容是被編譯的,保留進.css檔案中 內容不被編譯,不出現在.css檔案中 宣告變數,以 開頭,如 變數名 值 w 500px h 300px box不帶...

Less學習筆記

變數的延遲載入 變數是塊級作用域 平級什麼是混合?將一系列的規則集引入另乙個規則集中 ctrl c ctrl v 混合的定義在less規則有明確的指定,使用.的形式來定義 普通混合 編譯到原生css中的 不帶輸出的混合 加雙括號 帶引數的混合 帶預設值的混合 匹配模式 arguments加減乘除 計...