引入方法一：

<link rel="stylesheet/less" type="text/css" href="styles.less"> <script src="less.js" type="text/javascript"></script> // 引入less.js,在瀏覽器中編譯less。優點：使用簡單，缺點：引入js文件，增加http請求，需要預編譯，復制代碼

引入方法二：

// 基于node、grunt/gulp 時時編譯。 less: {// 開發環境development: {options: {paths: ["/"]},files: {"css/css.css": "less/css.less" }} }grunt.loadNpmTasks('grunt-contrib-less'); grunt.registerTask('lessDev', ['less:development']); // 注冊task 復制代碼

語法：

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 函數、運算 */ @the-border: 1px; #header {border-left: @the-border;border-right: @the-border * 2; } 復制代碼

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。