less用法，讓css更加簡便

什麼是lessLess 是一門 CSS 預處理語言，它擴展了 CSS 語言，增長了變量、Mixin、函數等特性，使 CSS 更易維護和擴展。Less 能夠運行在 Node 或瀏覽器端。如何引入less使用less有如下三種方式直接引入 Less.js使用CDN在線引入在命令行 使用npm安裝npm install less -g3.爲何使用less(less優點) 1.變量 2.混合嵌套 3.方法 4.父子元素 5.import4.如何使用less 1.建立html頁面,在頁面內引入mian.css

2.建立less頁面,並編寫less代碼

3.運行指令lessc main.less > main.css,生成對應的css文件 在命令控制行中經過運行指令lessc main.less > main.css,生成對應的css文件 能夠經過指令lessc main.less來預先查看編譯後的css代碼樣式生辰八字起名字

5.變量 經過@變量名的方式來進行變量的定義(@等同於var),以後經過調用變量名來進行賦值,這樣能夠極大的重複代碼,對於性能優化也有很好的提高6.混合嵌套 在編寫部分css代碼時,可能會出現相同屬性屢次使用的狀況

在上面的兩個樣式中都使用了border這個屬性,而且內容徹底相同；在傳統 CSS 寫法中只能這樣一遍又一遍的去書寫重複的內容，在 Less 中經過將公共屬性抽取出來做爲一個公共類的方式規避這一點。

總結

混合也是減小代碼書寫量的一個方法；

混合的類名在定義的時候加上小括弧 ()，那麼在轉譯成 css 文件時就不會出現；

混合的類名在被調用的時候加上小括弧 ()和不加上小括弧 ()是同樣的效果，看我的習慣，如：第三行和第八行轉譯成 css 是同樣的。

7.Function

在less中,咱們能夠經過編寫一個css類的方法,將值經過參數的形式進行傳參,而後只調用方法和實參,就能夠完成css的設置

語法

.方法名(形參){定義css屬性}

.background(@color){background: @color;}