[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"knowledge-\u002Fapi\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fless\u002Fproject":3,"knowledge-related-\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fless\u002Fproject":1064,"knowledge-series-\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fless\u002Fproject":1088},{"source":4,"connector":5,"page":6},"sqlite","better-sqlite3",{"path":7,"title":8,"description":9,"category":10,"tags":11,"date":14,"pinned":15,"draft":15,"body":16,"seo":1060,"stem":1061,"id":1062,"extension":1063},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fless\u002Fproject","工程化集成与扩展","Less 可集成到 Vite、Webpack、Vue CLI 等工具链，实现编译、全局变量注入与路径处理。","技能小册",[12,13],"css","less","2024-07-02",false,{"type":17,"value":18,"toc":1049},"minimark",[19,22,32,37,52,162,185,189,208,368,378,439,446,498,502,508,531,536,559,566,576,648,656,662,667,686,705,711,767,770,774,805,809,914,923,927,989,992,995,1045],[20,21,8],"h1",{"id":8},[23,24,25,26,31],"p",{},"Less 可集成到 Vite、Webpack、Vue CLI 等工具链，实现编译、全局变量注入与路径处理。核心语法（变量、嵌套、混合、运算、函数）见 ",[27,28,30],"a",{"href":29},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fless\u002Fless-core","Less 基础与核心语法","。",[33,34,36],"h3",{"id":35},"一在-vite-中使用-less","一、在 Vite 中使用 Less",[23,38,39,40,44,45,47,48,51],{},"Vite 原生支持 ",[41,42,43],"code",{},".less"," 文件，只需安装 ",[41,46,13],{}," 依赖即可。通过 ",[41,49,50],{},"vite.config.js"," 可以配置全局注入变量或 Mixin。",[53,54,59],"pre",{"className":55,"code":56,"language":57,"meta":58,"style":58},"language-js shiki shiki-themes material-theme-lighter github-light github-dark","\u002F\u002F vite.config.js\nexport default {\n  css: {\n    preprocessorOptions: {\n      less: {\n        additionalData: `@import \"@\u002Fstyles\u002Fvariables.less\";`,\n      },\n    },\n  },\n};\n","js","",[41,60,61,70,84,96,106,116,138,144,150,156],{"__ignoreMap":58},[62,63,66],"span",{"class":64,"line":65},"line",1,[62,67,69],{"class":68},"sutJx","\u002F\u002F vite.config.js\n",[62,71,73,77,80],{"class":64,"line":72},2,[62,74,76],{"class":75},"sVHd0","export",[62,78,79],{"class":75}," default",[62,81,83],{"class":82},"sP7_E"," {\n",[62,85,87,91,94],{"class":64,"line":86},3,[62,88,90],{"class":89},"skxfh","  css",[62,92,93],{"class":82},":",[62,95,83],{"class":82},[62,97,99,102,104],{"class":64,"line":98},4,[62,100,101],{"class":89},"    preprocessorOptions",[62,103,93],{"class":82},[62,105,83],{"class":82},[62,107,109,112,114],{"class":64,"line":108},5,[62,110,111],{"class":89},"      less",[62,113,93],{"class":82},[62,115,83],{"class":82},[62,117,119,122,124,128,132,135],{"class":64,"line":118},6,[62,120,121],{"class":89},"        additionalData",[62,123,93],{"class":82},[62,125,127],{"class":126},"sjJ54"," `",[62,129,131],{"class":130},"s_sjI","@import \"@\u002Fstyles\u002Fvariables.less\";",[62,133,134],{"class":126},"`",[62,136,137],{"class":82},",\n",[62,139,141],{"class":64,"line":140},7,[62,142,143],{"class":82},"      },\n",[62,145,147],{"class":64,"line":146},8,[62,148,149],{"class":82},"    },\n",[62,151,153],{"class":64,"line":152},9,[62,154,155],{"class":82},"  },\n",[62,157,159],{"class":64,"line":158},10,[62,160,161],{"class":82},"};\n",[163,164,165,178],"ul",{},[166,167,168,171,172,174,175,31],"li",{},[41,169,170],{},"additionalData","：在每个 ",[41,173,43],{}," 文件编译前插入一段 Less 代码（如全局变量导入），避免在每个文件中重复 ",[41,176,177],{},"@import",[166,179,180,181,184],{},"也支持配置 ",[41,182,183],{},"javascriptEnabled: true"," 以启用 Less 内联 JavaScript 表达式（注意安全性）。",[33,186,188],{"id":187},"二在-webpack-中使用-less","二、在 Webpack 中使用 Less",[23,190,191,192,195,196,199,200,203,204,207],{},"需要配合 ",[41,193,194],{},"less-loader"," 将 Less 编译为 CSS，并结合 ",[41,197,198],{},"css-loader"," 和 ",[41,201,202],{},"style-loader","（或 ",[41,205,206],{},"MiniCssExtractPlugin.loader","）。",[53,209,211],{"className":55,"code":210,"language":57,"meta":58,"style":58},"\u002F\u002F webpack.config.js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: \u002F\\.less$\u002F,\n        use: [\n          \"style-loader\", \u002F\u002F 将 CSS 注入 DOM\n          \"css-loader\", \u002F\u002F 解析 CSS 中的 @import、url()\n          \"less-loader\", \u002F\u002F 编译 Less 为 CSS\n        ],\n      },\n    ],\n  },\n};\n",[41,212,213,218,236,245,256,261,286,295,311,324,337,345,350,358,363],{"__ignoreMap":58},[62,214,215],{"class":64,"line":65},[62,216,217],{"class":68},"\u002F\u002F webpack.config.js\n",[62,219,220,224,227,230,234],{"class":64,"line":72},[62,221,223],{"class":222},"s39Yj","module",[62,225,226],{"class":82},".",[62,228,229],{"class":222},"exports",[62,231,233],{"class":232},"smGrS"," =",[62,235,83],{"class":82},[62,237,238,241,243],{"class":64,"line":86},[62,239,240],{"class":89},"  module",[62,242,93],{"class":82},[62,244,83],{"class":82},[62,246,247,250,252],{"class":64,"line":98},[62,248,249],{"class":89},"    rules",[62,251,93],{"class":82},[62,253,255],{"class":254},"su5hD"," [\n",[62,257,258],{"class":64,"line":108},[62,259,260],{"class":82},"      {\n",[62,262,263,266,268,271,275,278,281,284],{"class":64,"line":118},[62,264,265],{"class":89},"        test",[62,267,93],{"class":82},[62,269,270],{"class":126}," \u002F",[62,272,274],{"class":273},"sjYin","\\.",[62,276,13],{"class":277},"sQRbd",[62,279,280],{"class":75},"$",[62,282,283],{"class":126},"\u002F",[62,285,137],{"class":82},[62,287,288,291,293],{"class":64,"line":140},[62,289,290],{"class":89},"        use",[62,292,93],{"class":82},[62,294,255],{"class":254},[62,296,297,300,302,305,308],{"class":64,"line":146},[62,298,299],{"class":126},"          \"",[62,301,202],{"class":130},[62,303,304],{"class":126},"\"",[62,306,307],{"class":82},",",[62,309,310],{"class":68}," \u002F\u002F 将 CSS 注入 DOM\n",[62,312,313,315,317,319,321],{"class":64,"line":152},[62,314,299],{"class":126},[62,316,198],{"class":130},[62,318,304],{"class":126},[62,320,307],{"class":82},[62,322,323],{"class":68}," \u002F\u002F 解析 CSS 中的 @import、url()\n",[62,325,326,328,330,332,334],{"class":64,"line":158},[62,327,299],{"class":126},[62,329,194],{"class":130},[62,331,304],{"class":126},[62,333,307],{"class":82},[62,335,336],{"class":68}," \u002F\u002F 编译 Less 为 CSS\n",[62,338,340,343],{"class":64,"line":339},11,[62,341,342],{"class":254},"        ]",[62,344,137],{"class":82},[62,346,348],{"class":64,"line":347},12,[62,349,143],{"class":82},[62,351,353,356],{"class":64,"line":352},13,[62,354,355],{"class":254},"    ]",[62,357,137],{"class":82},[62,359,361],{"class":64,"line":360},14,[62,362,155],{"class":82},[62,364,366],{"class":64,"line":365},15,[62,367,161],{"class":82},[23,369,370,374,375,377],{},[371,372,373],"strong",{},"传递 Less 全局变量","（类似 Vite 的 ",[41,376,170],{},"）：",[53,379,381],{"className":55,"code":380,"language":57,"meta":58,"style":58},"{\n  loader: 'less-loader',\n  options: {\n    additionalData: `@import \"@\u002Fstyles\u002Fvariables.less\";`\n  }\n}\n",[41,382,383,388,406,415,429,434],{"__ignoreMap":58},[62,384,385],{"class":64,"line":65},[62,386,387],{"class":82},"{\n",[62,389,390,394,396,399,401,404],{"class":64,"line":72},[62,391,393],{"class":392},"sbgvK","  loader",[62,395,93],{"class":82},[62,397,398],{"class":126}," '",[62,400,194],{"class":130},[62,402,403],{"class":126},"'",[62,405,137],{"class":82},[62,407,408,411,413],{"class":64,"line":86},[62,409,410],{"class":392},"  options",[62,412,93],{"class":82},[62,414,83],{"class":82},[62,416,417,420,422,424,426],{"class":64,"line":98},[62,418,419],{"class":392},"    additionalData",[62,421,93],{"class":82},[62,423,127],{"class":126},[62,425,131],{"class":130},[62,427,428],{"class":126},"`\n",[62,430,431],{"class":64,"line":108},[62,432,433],{"class":82},"  }\n",[62,435,436],{"class":64,"line":118},[62,437,438],{"class":82},"}\n",[23,440,441,442,445],{},"也可通过 ",[41,443,444],{},"globalVars"," 直接注入变量对象：",[53,447,449],{"className":55,"code":448,"language":57,"meta":58,"style":58},"options: {\n  globalVars: {\n    'primary-color': '#4D926F'\n  }\n}\n",[41,450,451,460,469,490,494],{"__ignoreMap":58},[62,452,453,456,458],{"class":64,"line":65},[62,454,455],{"class":392},"options",[62,457,93],{"class":82},[62,459,83],{"class":82},[62,461,462,465,467],{"class":64,"line":72},[62,463,464],{"class":392},"  globalVars",[62,466,93],{"class":82},[62,468,83],{"class":82},[62,470,471,474,477,479,482,484,487],{"class":64,"line":86},[62,472,473],{"class":126},"    '",[62,475,476],{"class":130},"primary-color",[62,478,403],{"class":126},[62,480,481],{"class":89},": ",[62,483,403],{"class":126},[62,485,486],{"class":130},"#4D926F",[62,488,489],{"class":126},"'\n",[62,491,492],{"class":64,"line":98},[62,493,433],{"class":82},[62,495,496],{"class":64,"line":108},[62,497,438],{"class":82},[33,499,501],{"id":500},"三在-vue-cli-中使用-less","三、在 Vue CLI 中使用 Less",[23,503,504,507],{},[371,505,506],{},"创建项目时选择","：",[53,509,513],{"className":510,"code":511,"language":512,"meta":58,"style":58},"language-bash shiki shiki-themes material-theme-lighter github-light github-dark","vue create my-app\n# 在预设中选择 \"Manually select features\" -> 勾选 CSS Pre-processors -> 选择 Less\n","bash",[41,514,515,526],{"__ignoreMap":58},[62,516,517,520,523],{"class":64,"line":65},[62,518,519],{"class":392},"vue",[62,521,522],{"class":130}," create",[62,524,525],{"class":130}," my-app\n",[62,527,528],{"class":64,"line":72},[62,529,530],{"class":68},"# 在预设中选择 \"Manually select features\" -> 勾选 CSS Pre-processors -> 选择 Less\n",[23,532,533,507],{},[371,534,535],{},"现有项目添加 Less",[53,537,539],{"className":510,"code":538,"language":512,"meta":58,"style":58},"npm install less less-loader --save-dev\n",[41,540,541],{"__ignoreMap":58},[62,542,543,546,549,552,555],{"class":64,"line":65},[62,544,545],{"class":392},"npm",[62,547,548],{"class":130}," install",[62,550,551],{"class":130}," less",[62,553,554],{"class":130}," less-loader",[62,556,558],{"class":557},"stzsN"," --save-dev\n",[23,560,561,562,565],{},"之后在 Vue 单文件组件中直接使用 ",[41,563,564],{},"\u003Cstyle lang=\"less\">","，Vue CLI 会自动处理编译。",[23,567,568,571,572,575],{},[371,569,570],{},"全局变量注入","（无需每个组件都 import）：\n在 ",[41,573,574],{},"vue.config.js"," 中配置：",[53,577,579],{"className":55,"code":578,"language":57,"meta":58,"style":58},"module.exports = {\n  css: {\n    loaderOptions: {\n      less: {\n        additionalData: `@import \"@\u002Fstyles\u002Fvariables.less\";`,\n      },\n    },\n  },\n};\n",[41,580,581,593,601,610,618,632,636,640,644],{"__ignoreMap":58},[62,582,583,585,587,589,591],{"class":64,"line":65},[62,584,223],{"class":222},[62,586,226],{"class":82},[62,588,229],{"class":222},[62,590,233],{"class":232},[62,592,83],{"class":82},[62,594,595,597,599],{"class":64,"line":72},[62,596,90],{"class":89},[62,598,93],{"class":82},[62,600,83],{"class":82},[62,602,603,606,608],{"class":64,"line":86},[62,604,605],{"class":89},"    loaderOptions",[62,607,93],{"class":82},[62,609,83],{"class":82},[62,611,612,614,616],{"class":64,"line":98},[62,613,111],{"class":89},[62,615,93],{"class":82},[62,617,83],{"class":82},[62,619,620,622,624,626,628,630],{"class":64,"line":108},[62,621,121],{"class":89},[62,623,93],{"class":82},[62,625,127],{"class":126},[62,627,131],{"class":130},[62,629,134],{"class":126},[62,631,137],{"class":82},[62,633,634],{"class":64,"line":118},[62,635,143],{"class":82},[62,637,638],{"class":64,"line":140},[62,639,149],{"class":82},[62,641,642],{"class":64,"line":146},[62,643,155],{"class":82},[62,645,646],{"class":64,"line":152},[62,647,161],{"class":82},[33,649,651,652,655],{"id":650},"四url-重写-rewrite-urls","四、URL 重写（",[41,653,654],{},"--rewrite-urls","）",[23,657,658,659,661],{},"当 Less 文件分散在不同目录，且通过相对路径引用资源（图片、字体等）时，编译后的 CSS 可能因为输出目录结构与源文件不同而导致资源 404。Less 提供了 ",[41,660,654],{}," 选项自动修正路径。",[23,663,664,507],{},[371,665,666],{},"命令行使用",[53,668,670],{"className":510,"code":669,"language":512,"meta":58,"style":58},"lessc --rewrite-urls=all styles.less styles.css\n",[41,671,672],{"__ignoreMap":58},[62,673,674,677,680,683],{"class":64,"line":65},[62,675,676],{"class":392},"lessc",[62,678,679],{"class":557}," --rewrite-urls=all",[62,681,682],{"class":130}," styles.less",[62,684,685],{"class":130}," styles.css\n",[163,687,688,698],{},[166,689,690,693,694,697],{},[41,691,692],{},"--rewrite-urls=all","：将所有 ",[41,695,696],{},"url()"," 中的相对路径根据最终输出位置重写。",[166,699,700,701,704],{},"还支持 ",[41,702,703],{},"--rewrite-urls=local","（仅重写相对当前文件的路径，不处理跨目录引用）。",[23,706,707,710],{},[371,708,709],{},"在构建工具中启用","（以 less-loader 为例）：",[53,712,714],{"className":55,"code":713,"language":57,"meta":58,"style":58},"{\n  loader: 'less-loader',\n  options: {\n    rewriteUrls: 'all'   \u002F\u002F 或 'local'\n  }\n}\n",[41,715,716,720,734,742,759,763],{"__ignoreMap":58},[62,717,718],{"class":64,"line":65},[62,719,387],{"class":82},[62,721,722,724,726,728,730,732],{"class":64,"line":72},[62,723,393],{"class":392},[62,725,93],{"class":82},[62,727,398],{"class":126},[62,729,194],{"class":130},[62,731,403],{"class":126},[62,733,137],{"class":82},[62,735,736,738,740],{"class":64,"line":86},[62,737,410],{"class":392},[62,739,93],{"class":82},[62,741,83],{"class":82},[62,743,744,747,749,751,754,756],{"class":64,"line":98},[62,745,746],{"class":392},"    rewriteUrls",[62,748,93],{"class":82},[62,750,398],{"class":126},[62,752,753],{"class":130},"all",[62,755,403],{"class":126},[62,757,758],{"class":68},"   \u002F\u002F 或 'local'\n",[62,760,761],{"class":64,"line":108},[62,762,433],{"class":82},[62,764,765],{"class":64,"line":118},[62,766,438],{"class":82},[23,768,769],{},"此功能对于大型项目（如组件库、多子项目）尤其有用，可避免手动维护路径。",[33,771,773],{"id":772},"五构建工具自动编译与热更新","五、构建工具自动编译与热更新",[163,775,776,782,792],{},[166,777,778,781],{},[371,779,780],{},"Vite","：开发环境下基于原生 ES 模块，Less 文件修改后触发 HMR（热模块替换）。",[166,783,784,787,788,791],{},[371,785,786],{},"Webpack","：配合 ",[41,789,790],{},"webpack-dev-server"," 同样支持热更新。",[166,793,794,797,798,801,802,804],{},[371,795,796],{},"Vue CLI","：内置开发服务器，保存 ",[41,799,800],{},".vue"," 或 ",[41,803,43],{}," 文件后实时重绘。",[806,807,808],"h2",{"id":808},"总结",[810,811,812,830],"table",{},[813,814,815],"thead",{},[816,817,818,822,825,827],"tr",{},[819,820,821],"th",{},"工具",[819,823,824],{},"集成方式",[819,826,570],{},[819,828,829],{},"路径重写",[831,832,833,855,875,892],"tbody",{},[816,834,835,840,845,849],{},[836,837,838],"td",{},[371,839,780],{},[836,841,842,843],{},"原生支持，仅需安装 ",[41,844,13],{},[836,846,847],{},[41,848,170],{},[836,850,851,854],{},[41,852,853],{},"rewriteUrls"," 选项",[816,856,857,861,865,871],{},[836,858,859],{},[371,860,786],{},[836,862,863],{},[41,864,194],{},[836,866,867,801,869],{},[41,868,170],{},[41,870,444],{},[836,872,873,854],{},[41,874,853],{},[816,876,877,881,884,889],{},[836,878,879],{},[371,880,796],{},[836,882,883],{},"创建时选择，或手动安装",[836,885,886],{},[41,887,888],{},"loaderOptions.less.additionalData",[836,890,891],{},"同 less-loader",[816,893,894,899,904,909],{},[836,895,896],{},[371,897,898],{},"命令行",[836,900,901,903],{},[41,902,676],{}," 命令",[836,905,906],{},[41,907,908],{},"--modify-var",[836,910,911],{},[41,912,913],{},"--rewrite-urls=all\u002Flocal",[23,915,916,917,919,920,922],{},"配置项名称以所用 ",[41,918,13],{}," \u002F ",[41,921,194],{}," 版本文档为准。",[806,924,926],{"id":925},"六常见问题","六、常见问题",[810,928,929,939],{},[813,930,931],{},[816,932,933,936],{},[819,934,935],{},"现象",[819,937,938],{},"可能原因 \u002F 处理",[831,940,941,953,964,978],{},[816,942,943,946],{},[836,944,945],{},"全局变量未生效",[836,947,948,919,950,952],{},[41,949,170],{},[41,951,444],{}," 配置的变量文件路径不正确，或未重启开发服务器使配置生效",[816,954,955,958],{},[836,956,957],{},"图片、字体等资源 404",[836,959,960,961,963],{},"输出目录结构与源文件不同导致相对路径失效，启用 ",[41,962,853],{}," 选项修正",[816,965,966,969],{},[836,967,968],{},"Vue CLI 项目切换预处理器后报错",[836,970,971,972,974,975,977],{},"确认已安装对应的 ",[41,973,13],{}," 与 ",[41,976,194],{}," 版本，二者需相互兼容",[816,979,980,986],{},[836,981,982,985],{},[41,983,984],{},"javascriptEnabled"," 相关报错",[836,987,988],{},"该选项允许 Less 内联 JavaScript 表达式，涉及执行任意代码，若非必要不建议开启",[806,990,991],{"id":991},"参考文献",[23,993,994],{},"以下链接在编写时均可正常访问：",[810,996,997,1007],{},[813,998,999],{},[816,1000,1001,1004],{},[819,1002,1003],{},"资料",[819,1005,1006],{},"说明",[831,1008,1009,1022,1034],{},[816,1010,1011,1019],{},[836,1012,1013],{},[27,1014,1018],{"href":1015,"rel":1016},"https:\u002F\u002Flesscss.org\u002F",[1017],"nofollow","Less 官方文档",[836,1020,1021],{},"CLI 与选项",[816,1023,1024,1031],{},[836,1025,1026],{},[27,1027,1030],{"href":1028,"rel":1029},"https:\u002F\u002Fvite.dev\u002Fconfig\u002Fshared-options.html#css-preprocessoroptions",[1017],"Vite：CSS 预处理器",[836,1032,1033],{},"Vite 中 less 配置",[816,1035,1036,1042],{},[836,1037,1038],{},[27,1039,194],{"href":1040,"rel":1041},"https:\u002F\u002Fwebpack.js.org\u002Floaders\u002Fless-loader\u002F",[1017],[836,1043,1044],{},"Webpack 集成",[1046,1047,1048],"style",{},"html pre.shiki code .sutJx, html code.shiki .sutJx{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#6A737D;--shiki-default-font-style:inherit;--shiki-dark:#6A737D;--shiki-dark-font-style:inherit}html pre.shiki code .sVHd0, html code.shiki .sVHd0{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#D73A49;--shiki-default-font-style:inherit;--shiki-dark:#F97583;--shiki-dark-font-style:inherit}html pre.shiki code .sP7_E, html code.shiki .sP7_E{--shiki-light:#39ADB5;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .skxfh, html code.shiki .skxfh{--shiki-light:#E53935;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sjJ54, html code.shiki .sjJ54{--shiki-light:#39ADB5;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s_sjI, html code.shiki .s_sjI{--shiki-light:#91B859;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s39Yj, html code.shiki .s39Yj{--shiki-light:#39ADB5;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .smGrS, html code.shiki .smGrS{--shiki-light:#39ADB5;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .su5hD, html code.shiki .su5hD{--shiki-light:#90A4AE;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sjYin, html code.shiki .sjYin{--shiki-light:#90A4AE;--shiki-light-font-weight:inherit;--shiki-default:#22863A;--shiki-default-font-weight:bold;--shiki-dark:#85E89D;--shiki-dark-font-weight:bold}html pre.shiki code .sQRbd, html code.shiki .sQRbd{--shiki-light:#91B859;--shiki-default:#032F62;--shiki-dark:#DBEDFF}html pre.shiki code .sbgvK, html code.shiki .sbgvK{--shiki-light:#E2931D;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .stzsN, html code.shiki .stzsN{--shiki-light:#91B859;--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":58,"searchDepth":72,"depth":72,"links":1050},[1051,1052,1053,1054,1056,1057,1058,1059],{"id":35,"depth":86,"text":36},{"id":187,"depth":86,"text":188},{"id":500,"depth":86,"text":501},{"id":650,"depth":86,"text":1055},"四、URL 重写（--rewrite-urls）",{"id":772,"depth":86,"text":773},{"id":808,"depth":72,"text":808},{"id":925,"depth":72,"text":926},{"id":991,"depth":72,"text":991},{"title":8,"description":9},"knowledge\u002Fbooklet\u002Fweb\u002FCss\u002FLess\u002Fproject","knowledge\u002Fknowledge\u002Fbooklet\u002Fweb\u002FCss\u002FLess\u002Fproject.md","md",{"items":1065},[1066,1068,1072,1076,1080,1084],{"path":29,"title":30,"description":1067,"category":10,"score":152},"Less 是 JavaScript 实现的 CSS 预处理器，在 CSS 语法上扩展变量（@）、嵌套、混合、运算与函数，编译为普通 CSS 后由浏览器加载；本文覆盖安装、CLI、构建工具集成与全部核心语法。",{"path":1069,"title":1070,"description":1071,"category":10,"score":98},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-intro","Sass 简介与安装","Sass（Syntactically Awesome Style Sheets）是 CSS 预处理器，在 CSS 语法上增加变量、嵌套、混合、模块、控制指令等；有 SCSS 与缩进语法两种源码语法，官方实现为 Dart Sass。",{"path":1073,"title":1074,"description":1075,"category":10,"score":98},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-modules","模块与控制流：@use、内置函数、@if\u002F@for\u002F@each","Dart Sass 推荐用 @use\u002F@forward 替代已弃用的 @import；内置 sass:* 模块提供颜色、字符串、列表、Map、数学等函数；@if\u002F@for\u002F@each\u002F@while 用于条件与循环生成样式。",{"path":1077,"title":1078,"description":1079,"category":10,"score":98},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-reuse","复用机制：Mixin 与继承","Mixin（@mixin\u002F@include）支持参数与 @content，适合动态样式；@extend 与 %placeholder 通过合并选择器复用完全相同的静态样式，减少 CSS 体积。",{"path":1081,"title":1082,"description":1083,"category":10,"score":98},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-syntax","语法基础：变量、嵌套与运算","Sass 语法基础：$ 变量与插值、选择器嵌套与 & 父选择器引用、数学\u002F颜色\u002F字符串运算、三种注释语法及与原生 CSS 嵌套的关系。",{"path":1085,"title":1086,"description":1087,"category":10,"score":98},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fcolor","颜色与背景","color 设置前景（多为文字）色；background-* 设置元素背景（颜色、图像、渐变）。二者共同决定对比度与视觉层次，直接影响 无障碍 阅读体验。排版中的文本颜色用法见 排版与文本。",{"series":1089,"title":13,"items":1090,"index":65,"prev":1094,"next":1095},"booklet\u002Fweb\u002Fcss\u002Fless",[1091,1093],{"path":29,"title":30,"date":1092,"pinned":15},"2026-07-23",{"path":7,"title":8,"date":14,"pinned":15},{"path":29,"title":30,"date":1092,"pinned":15},null]