Less语法基于node\grunt/gulp编译
生活随笔
收集整理的這篇文章主要介紹了
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编译的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 联想宣布参展 MWC 2023:预计发布
- 下一篇: 威马员工在线讨薪:被恶心到了、恶心的事还