Less初步學習

Less

編譯工具

• Koala編譯 網址：http://koala-app.com/index-zh...
• Node.js
• 瀏覽器端使用

LESS中的註釋

• /**/
• // (編譯時會被自動過濾掉)

變量

• @變量名 例如:@c:#000;

混合

• 混合變量 例如：.border{border:1pxsolid #000;}
• 帶參數的混合變量 例如:.border_02(@border_width){border: @border_width solid #000}
• 帶參數默認值的混合變量 例如:.border_03(@border_width:10px){border: @border_width solid #000}

運算

• 任何數字、顏色或者變量均可以參與運算，運算應該被包裹在括號中。例如:width: @test_width_03 - 20*10;

避免編譯

• 輸出less不認識的專用語法 例如:width: ~'calc(300px-30px)';