引入方法一：

<link rel="stylesheet/less" type="text/css" href="styles.less"> <script src="less.js" type="text/javascript"></script> // 引入less.js,在瀏覽器中編譯less。優(yōu)點(diǎn)：使用簡(jiǎn)單，缺點(diǎn)：引入js文件，增加http請(qǐng)求，需要預(yù)編譯，復(fù)制代碼

引入方法二：

// 基于node、grunt/gulp 時(shí)時(shí)編譯。 less: {// 開(kāi)發(fā)環(huán)境development: {options: {paths: ["/"]},files: {"css/css.css": "less/css.less" }} }grunt.loadNpmTasks('grunt-contrib-less'); grunt.registerTask('lessDev', ['less:development']); // 注冊(cè)task 復(fù)制代碼

語(yǔ)法：

html { font-size: 0.85rem} /* demo 1 變量*/ @blue: #5B83AD; @f12 : 1rem; p {color: @blue;font-size: @f12 }/* demo 2 混合 */ .rounded-corners (@radius: 5px) {border-radius: @radius;-webkit-border-radius: @radius;-moz-border-radius: @radius;background: #ff0000 } h1 {.rounded-corners; }/* demo 3 嵌套 */ .test {ul { font-size: 1rem; list-style: none; background: #ccc;li { color:#000;}} }/* demo 4 函數(shù)、運(yùn)算 */ @the-border: 1px; #header {border-left: @the-border;border-right: @the-border * 2; } 復(fù)制代碼

總結(jié)

以上是生活随笔為你收集整理的Less语法基于node\grunt/gulp编译的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。