Less语法基于node\grunt/gulp编译

引入方法一：

<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编译的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。