Less學習筆記（一）

一：變數

語法： @變數名

特性：1）按需載入

2）如果對同乙個變數定義兩次的話，在當前作用域中最後一次定義的將被使用

@var: 0;
.class1 
one: @var;
}

最後輸出：

.class1 .class

.class1

二：混合（mixin）——講通用的樣式定義為乙個類，然後在其他類中呼叫即可

1）不帶引數的混入

.bordered

如果需要在其他的類中引入通用樣式，按照以下方式即可

#menu

a

編譯之後，在.bordered中的樣式都會在被引入的樣式中體現

#menu
a 2）帶引數的混入 
.border-radius (@radius)

然後在其他的類中呼叫：

#header

.button

這種帶引數的混入適用的場景：通用的樣式需要定義，但是每個元件所對應的這些通用樣式的值有差異；

注意：1）帶參混入，也可以為引數指定預設值

border-radius (@radius: 5px)

如果這樣呼叫

#header

那麼#header

2）如果不想單獨處理所有的引數，可以使用@arguments (包含了傳進來的所有引數的值)

.box-shadow(@x:0;@y:0;@blur:1px;@color:#000)

.box-shadow(2px,5px)

將會輸出：

box-shadow:@arguments；//0 0 1px #000;

-webkit-box-shadow:@arguments；//0 0 1px #000;

-moz-box-shadow:@arguments；//0 0 1px #000;

3) !important 關鍵字

在呼叫時，如果在混合的後面加上!important ,表示將混合帶來的所有屬性標記為！important

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

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