[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"knowledge-\u002Fapi\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fless\u002Fless-core":3,"knowledge-related-\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fless\u002Fless-core":1384,"knowledge-series-\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fless\u002Fless-core":1408},{"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":1380,"stem":1381,"id":1382,"extension":1383},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fless\u002Fless-core","Less 基础与核心语法","Less 是 JavaScript 实现的 CSS 预处理器，在 CSS 语法上扩展变量（@）、嵌套、混合、运算与函数，编译为普通 CSS 后由浏览器加载；本文覆盖安装、CLI、构建工具集成与全部核心语法。","技能小册",[12,13],"css","less","2026-07-23",false,{"type":17,"value":18,"toc":1359},"minimark",[19,23,47,52,57,70,74,84,99,103,142,145,161,165,232,236,304,309,313,317,323,370,380,441,445,448,502,514,524,557,561,564,570,613,618,669,674,721,725,728,771,777,792,805,809,812,937,951,984,988,991,1029,1035,1069,1073,1080,1095,1104,1156,1171,1175,1231,1234,1240,1292,1302,1305,1355],[20,21,8],"h1",{"id":22},"less-基础与核心语法",[24,25,26,27,31,32,36,37,40,41,46],"p",{},"Less 是 CSS 预处理器：在 CSS 语法上扩展变量（",[28,29,30],"code",{},"@","）、嵌套、混合、运算与函数，编译为普通 CSS 后由浏览器加载。",[33,34,35],"strong",{},"不能","在页面中直接引用未编译的 ",[28,38,39],{},".less","（生产环境应使用构建产物）。工程化集成（Vite\u002FWebpack\u002FVue CLI 全局变量注入、URL 重写）见 ",[42,43,45],"a",{"href":44},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fless\u002Fproject","工程化集成与扩展","。",[48,49,51],"h2",{"id":50},"一基础概念","一、基础概念",[53,54,56],"h3",{"id":55},"_1-与-css-的关系","1. 与 CSS 的关系",[24,58,59,60,63,64,66,67,69],{},"任意合法的 ",[33,61,62],{},"CSS 文件可作为 Less 文件","编译（扩展名改为 ",[28,65,39],{}," 即可），便于渐进迁移：已有的 CSS 项目可以先原样改名为 ",[28,68,39],{},"，再逐步引入变量、嵌套等特性，无需一次性重写。",[53,71,73],{"id":72},"_2-工作原理","2. 工作原理",[75,76,82],"pre",{"className":77,"code":79,"language":80,"meta":81},[78],"language-text",".less 源文件 → lessc 或 less-loader 编译 → .css → HTML 引用\n","text","",[28,83,79],{"__ignoreMap":81},[24,85,86,87,90,91,94,95,98],{},"开发时可用 ",[28,88,89],{},"less.js"," 在浏览器端实时编译，",[33,92,93],{},"仅适合演示","；生产环境应在构建阶段编译为静态 ",[28,96,97],{},".css","，避免运行时编译带来的性能与兼容性问题。",[53,100,102],{"id":101},"_3-安装","3. 安装",[75,104,108],{"className":105,"code":106,"language":107,"meta":81,"style":81},"language-bash shiki shiki-themes material-theme-lighter github-light github-dark","npm install -D less\nnpx lessc -v\n","bash",[28,109,110,130],{"__ignoreMap":81},[111,112,115,119,123,127],"span",{"class":113,"line":114},"line",1,[111,116,118],{"class":117},"sbgvK","npm",[111,120,122],{"class":121},"s_sjI"," install",[111,124,126],{"class":125},"stzsN"," -D",[111,128,129],{"class":121}," less\n",[111,131,133,136,139],{"class":113,"line":132},2,[111,134,135],{"class":117},"npx",[111,137,138],{"class":121}," lessc",[111,140,141],{"class":125}," -v\n",[24,143,144],{},"全局安装（可选）：",[75,146,148],{"className":105,"code":147,"language":107,"meta":81,"style":81},"npm install -g less\n",[28,149,150],{"__ignoreMap":81},[111,151,152,154,156,159],{"class":113,"line":114},[111,153,118],{"class":117},[111,155,122],{"class":121},[111,157,158],{"class":125}," -g",[111,160,129],{"class":121},[53,162,164],{"id":163},"_4-命令行编译","4. 命令行编译",[166,167,168,181],"table",{},[169,170,171],"thead",{},[172,173,174,178],"tr",{},[175,176,177],"th",{},"命令",[175,179,180],{},"说明",[182,183,184,195,205,215],"tbody",{},[172,185,186,192],{},[187,188,189],"td",{},[28,190,191],{},"lessc styles.less styles.css",[187,193,194],{},"基本编译",[172,196,197,202],{},[187,198,199],{},[28,200,201],{},"lessc styles.less styles.css --compress",[187,203,204],{},"压缩（旧版选项，以当前 less 文档为准）",[172,206,207,212],{},[187,208,209],{},[28,210,211],{},"lessc styles.less styles.css --source-map",[187,213,214],{},"生成 Source map",[172,216,217,222],{},[187,218,219],{},[28,220,221],{},"lessc --rewrite-urls=all styles.less styles.css",[187,223,224,225,228,229],{},"重写 ",[28,226,227],{},"url()"," 相对路径，见 ",[42,230,231],{"href":44},"工程化集成",[53,233,235],{"id":234},"_5-在构建工具中使用","5. 在构建工具中使用",[166,237,238,247],{},[169,239,240],{},[172,241,242,245],{},[175,243,244],{},"工具",[175,246,180],{},[182,248,249,265,290],{},[172,250,251,256],{},[187,252,253],{},[33,254,255],{},"Vite",[187,257,258,261,262,264],{},[28,259,260],{},"npm i -D less"," 后可直接导入 ",[28,263,39],{},"，无需额外配置",[172,266,267,272],{},[187,268,269],{},[33,270,271],{},"Webpack",[187,273,274,277,278,281,282,285,286,289],{},[28,275,276],{},"less-loader"," + ",[28,279,280],{},"css-loader","（+ ",[28,283,284],{},"style-loader"," 或 ",[28,287,288],{},"MiniCssExtractPlugin","）",[172,291,292,297],{},[187,293,294],{},[33,295,296],{},"Vue CLI",[187,298,299,300,277,302],{},"创建时选 Less，或在现有项目安装 ",[28,301,13],{},[28,303,276],{},[24,305,306,307,46],{},"更完整的全局变量注入、URL 重写等工程化配置见 ",[42,308,45],{"href":44},[48,310,312],{"id":311},"二核心语法","二、核心语法",[53,314,316],{"id":315},"_1-变量variables","1. 变量（Variables）",[24,318,319,320,322],{},"Less 变量以 ",[28,321,30],{}," 开头，可存储颜色、尺寸、字体等任意 CSS 值。",[75,324,327],{"className":325,"code":326,"language":13,"meta":81,"style":81},"language-less shiki shiki-themes material-theme-lighter github-light github-dark","@primary-color: #4d926f;\n@base-font-size: 16px;\n\n#header {\n  color: @primary-color;\n  font-size: @base-font-size;\n}\n",[28,328,329,334,339,346,352,358,364],{"__ignoreMap":81},[111,330,331],{"class":113,"line":114},[111,332,333],{},"@primary-color: #4d926f;\n",[111,335,336],{"class":113,"line":132},[111,337,338],{},"@base-font-size: 16px;\n",[111,340,342],{"class":113,"line":341},3,[111,343,345],{"emptyLinePlaceholder":344},true,"\n",[111,347,349],{"class":113,"line":348},4,[111,350,351],{},"#header {\n",[111,353,355],{"class":113,"line":354},5,[111,356,357],{},"  color: @primary-color;\n",[111,359,361],{"class":113,"line":360},6,[111,362,363],{},"  font-size: @base-font-size;\n",[111,365,367],{"class":113,"line":366},7,[111,368,369],{},"}\n",[24,371,372,375,376,379],{},[33,373,374],{},"插值语法","：在选择器名、属性名、字符串等“非值”场景使用 ",[28,377,378],{},"@{变量名}"," 形式。",[75,381,383],{"className":325,"code":382,"language":13,"meta":81,"style":81},"@my-selector: banner;\n@side: left;\n@image-path: \".\u002Fassets\";\n\n.@{my-selector} {\n  font-weight: bold;\n}\n.card {\n  margin-@{side}: 20px;\n  background: url(\"@{image-path}\u002Flogo.png\");\n}\n",[28,384,385,390,395,400,404,409,414,418,424,430,436],{"__ignoreMap":81},[111,386,387],{"class":113,"line":114},[111,388,389],{},"@my-selector: banner;\n",[111,391,392],{"class":113,"line":132},[111,393,394],{},"@side: left;\n",[111,396,397],{"class":113,"line":341},[111,398,399],{},"@image-path: \".\u002Fassets\";\n",[111,401,402],{"class":113,"line":348},[111,403,345],{"emptyLinePlaceholder":344},[111,405,406],{"class":113,"line":354},[111,407,408],{},".@{my-selector} {\n",[111,410,411],{"class":113,"line":360},[111,412,413],{},"  font-weight: bold;\n",[111,415,416],{"class":113,"line":366},[111,417,369],{},[111,419,421],{"class":113,"line":420},8,[111,422,423],{},".card {\n",[111,425,427],{"class":113,"line":426},9,[111,428,429],{},"  margin-@{side}: 20px;\n",[111,431,433],{"class":113,"line":432},10,[111,434,435],{},"  background: url(\"@{image-path}\u002Flogo.png\");\n",[111,437,439],{"class":113,"line":438},11,[111,440,369],{},[53,442,444],{"id":443},"_2-嵌套nesting","2. 嵌套（Nesting）",[24,446,447],{},"通过嵌套直观表达 HTML 结构的层级关系，避免重复书写父选择器。",[75,449,451],{"className":325,"code":450,"language":13,"meta":81,"style":81},".parent {\n  color: #333;\n  .child {\n    margin-top: 10px;\n    &:hover {\n      \u002F\u002F & 引用父选择器 .parent .child\n      color: red;\n    }\n  }\n}\n",[28,452,453,458,463,468,473,478,483,488,493,498],{"__ignoreMap":81},[111,454,455],{"class":113,"line":114},[111,456,457],{},".parent {\n",[111,459,460],{"class":113,"line":132},[111,461,462],{},"  color: #333;\n",[111,464,465],{"class":113,"line":341},[111,466,467],{},"  .child {\n",[111,469,470],{"class":113,"line":348},[111,471,472],{},"    margin-top: 10px;\n",[111,474,475],{"class":113,"line":354},[111,476,477],{},"    &:hover {\n",[111,479,480],{"class":113,"line":360},[111,481,482],{},"      \u002F\u002F & 引用父选择器 .parent .child\n",[111,484,485],{"class":113,"line":366},[111,486,487],{},"      color: red;\n",[111,489,490],{"class":113,"line":420},[111,491,492],{},"    }\n",[111,494,495],{"class":113,"line":426},[111,496,497],{},"  }\n",[111,499,500],{"class":113,"line":432},[111,501,369],{},[24,503,504,510,511,513],{},[33,505,506,507],{},"父选择器 ",[28,508,509],{},"&","：在嵌套中使用 ",[28,512,509],{}," 代表完整的父选择器序列，常用于伪类、伪元素或生成新的类名。",[24,515,516,519,520,523],{},[33,517,518],{},"媒体查询嵌套","：可将 ",[28,521,522],{},"@media"," 直接写在选择器内部，使响应式逻辑与组件样式保持在一起。",[75,525,527],{"className":325,"code":526,"language":13,"meta":81,"style":81},".component {\n  width: 600px;\n  @media (max-width: 768px) {\n    width: 100%;\n  }\n}\n",[28,528,529,534,539,544,549,553],{"__ignoreMap":81},[111,530,531],{"class":113,"line":114},[111,532,533],{},".component {\n",[111,535,536],{"class":113,"line":132},[111,537,538],{},"  width: 600px;\n",[111,540,541],{"class":113,"line":341},[111,542,543],{},"  @media (max-width: 768px) {\n",[111,545,546],{"class":113,"line":348},[111,547,548],{},"    width: 100%;\n",[111,550,551],{"class":113,"line":354},[111,552,497],{},[111,554,555],{"class":113,"line":360},[111,556,369],{},[53,558,560],{"id":559},"_3-混合mixins","3. 混合（Mixins）",[24,562,563],{},"混合（Mixin）允许将一个规则集中的属性“混入”另一个规则集，实现样式复用。",[24,565,566,569],{},[33,567,568],{},"无参混合","：",[75,571,573],{"className":325,"code":572,"language":13,"meta":81,"style":81},".bordered {\n  border-top: dotted 1px black;\n  border-bottom: solid 2px black;\n}\n#menu a {\n  color: #111;\n  .bordered(); \u002F\u002F 引用 .bordered 中的样式\n}\n",[28,574,575,580,585,590,594,599,604,609],{"__ignoreMap":81},[111,576,577],{"class":113,"line":114},[111,578,579],{},".bordered {\n",[111,581,582],{"class":113,"line":132},[111,583,584],{},"  border-top: dotted 1px black;\n",[111,586,587],{"class":113,"line":341},[111,588,589],{},"  border-bottom: solid 2px black;\n",[111,591,592],{"class":113,"line":348},[111,593,369],{},[111,595,596],{"class":113,"line":354},[111,597,598],{},"#menu a {\n",[111,600,601],{"class":113,"line":360},[111,602,603],{},"  color: #111;\n",[111,605,606],{"class":113,"line":366},[111,607,608],{},"  .bordered(); \u002F\u002F 引用 .bordered 中的样式\n",[111,610,611],{"class":113,"line":420},[111,612,369],{},[24,614,615,569],{},[33,616,617],{},"带参混合（可设置默认值）",[75,619,621],{"className":325,"code":620,"language":13,"meta":81,"style":81},".border-radius(@radius: 5px) {\n  border-radius: @radius;\n  -moz-border-radius: @radius;\n}\n#header {\n  .border-radius(10px); \u002F\u002F 传入参数 10px\n}\n.footer {\n  .border-radius(); \u002F\u002F 使用默认值 5px\n}\n",[28,622,623,628,633,638,642,646,651,655,660,665],{"__ignoreMap":81},[111,624,625],{"class":113,"line":114},[111,626,627],{},".border-radius(@radius: 5px) {\n",[111,629,630],{"class":113,"line":132},[111,631,632],{},"  border-radius: @radius;\n",[111,634,635],{"class":113,"line":341},[111,636,637],{},"  -moz-border-radius: @radius;\n",[111,639,640],{"class":113,"line":348},[111,641,369],{},[111,643,644],{"class":113,"line":354},[111,645,351],{},[111,647,648],{"class":113,"line":360},[111,649,650],{},"  .border-radius(10px); \u002F\u002F 传入参数 10px\n",[111,652,653],{"class":113,"line":366},[111,654,369],{},[111,656,657],{"class":113,"line":420},[111,658,659],{},".footer {\n",[111,661,662],{"class":113,"line":426},[111,663,664],{},"  .border-radius(); \u002F\u002F 使用默认值 5px\n",[111,666,667],{"class":113,"line":432},[111,668,369],{},[24,670,671,569],{},[33,672,673],{},"模式匹配（根据参数个数或名称执行不同版本）",[75,675,677],{"className":325,"code":676,"language":13,"meta":81,"style":81},".mixin(dark, @color) {\n  color: darken(@color, 10%);\n}\n.mixin(light, @color) {\n  color: lighten(@color, 10%);\n}\n.button {\n  .mixin(dark, #333);\n}\n",[28,678,679,684,689,693,698,703,707,712,717],{"__ignoreMap":81},[111,680,681],{"class":113,"line":114},[111,682,683],{},".mixin(dark, @color) {\n",[111,685,686],{"class":113,"line":132},[111,687,688],{},"  color: darken(@color, 10%);\n",[111,690,691],{"class":113,"line":341},[111,692,369],{},[111,694,695],{"class":113,"line":348},[111,696,697],{},".mixin(light, @color) {\n",[111,699,700],{"class":113,"line":354},[111,701,702],{},"  color: lighten(@color, 10%);\n",[111,704,705],{"class":113,"line":360},[111,706,369],{},[111,708,709],{"class":113,"line":366},[111,710,711],{},".button {\n",[111,713,714],{"class":113,"line":420},[111,715,716],{},"  .mixin(dark, #333);\n",[111,718,719],{"class":113,"line":426},[111,720,369],{},[53,722,724],{"id":723},"_4-运算operations","4. 运算（Operations）",[24,726,727],{},"支持数值、颜色、变量的加减乘除运算。",[75,729,731],{"className":325,"code":730,"language":13,"meta":81,"style":81},"@base: 5%;\n@filler: @base * 2; \u002F\u002F 10%\n@other: @base + @filler; \u002F\u002F 15%\n\n.box {\n  width: (100% \u002F 6); \u002F\u002F 除法需用括号\n  margin: (10px + 5px);\n}\n",[28,732,733,738,743,748,752,757,762,767],{"__ignoreMap":81},[111,734,735],{"class":113,"line":114},[111,736,737],{},"@base: 5%;\n",[111,739,740],{"class":113,"line":132},[111,741,742],{},"@filler: @base * 2; \u002F\u002F 10%\n",[111,744,745],{"class":113,"line":341},[111,746,747],{},"@other: @base + @filler; \u002F\u002F 15%\n",[111,749,750],{"class":113,"line":348},[111,751,345],{"emptyLinePlaceholder":344},[111,753,754],{"class":113,"line":354},[111,755,756],{},".box {\n",[111,758,759],{"class":113,"line":360},[111,760,761],{},"  width: (100% \u002F 6); \u002F\u002F 除法需用括号\n",[111,763,764],{"class":113,"line":366},[111,765,766],{},"  margin: (10px + 5px);\n",[111,768,769],{"class":113,"line":420},[111,770,369],{},[24,772,773,776],{},[33,774,775],{},"颜色运算","：对颜色值进行运算时，Less 会将其转换为 RGB 通道分别计算。",[75,778,780],{"className":325,"code":779,"language":13,"meta":81,"style":81},"@primary-color: #111;\n@darker-color: @primary-color + #111; \u002F\u002F 结果为 #222\n",[28,781,782,787],{"__ignoreMap":81},[111,783,784],{"class":113,"line":114},[111,785,786],{},"@primary-color: #111;\n",[111,788,789],{"class":113,"line":132},[111,790,791],{},"@darker-color: @primary-color + #111; \u002F\u002F 结果为 #222\n",[793,794,795],"blockquote",{},[24,796,797,800,801,804],{},[33,798,799],{},"注意","：除法运算必须用括号包裹，如 ",[28,802,803],{},"(100% \u002F 6)","，否则 Less 不会将其视为除法。",[53,806,808],{"id":807},"_5-函数functions","5. 函数（Functions）",[24,810,811],{},"Less 内置了丰富的函数，涵盖颜色、数学、字符串、类型判断等。",[166,813,814,826],{},[169,815,816],{},[172,817,818,821,824],{},[175,819,820],{},"类别",[175,822,823],{},"函数示例",[175,825,180],{},[182,827,828,847,865,896,914],{},[172,829,830,835,844],{},[187,831,832],{},[33,833,834],{},"颜色操作",[187,836,837,840,841],{},[28,838,839],{},"lighten(@color, 20%)","、",[28,842,843],{},"saturate(@color, 20%)",[187,845,846],{},"调整亮度和饱和度",[172,848,849,854,862],{},[187,850,851],{},[33,852,853],{},"类型判断",[187,855,856,840,859],{},[28,857,858],{},"iscolor(@color)",[28,860,861],{},"isnumber(@size)",[187,863,864],{},"判断值类型",[172,866,867,872,893],{},[187,868,869],{},[33,870,871],{},"数学函数",[187,873,874,877,878,840,881,877,884,840,887,877,890],{},[28,875,876],{},"ceil(2.1)"," → ",[28,879,880],{},"3",[28,882,883],{},"floor(2.9)",[28,885,886],{},"2",[28,888,889],{},"percentage(0.2)",[28,891,892],{},"20%",[187,894,895],{},"数值处理",[172,897,898,903,911],{},[187,899,900],{},[33,901,902],{},"字符串函数",[187,904,905,840,908],{},[28,906,907],{},"escape(\"a=1\")",[28,909,910],{},"replace(\"Hello\", \"el\", \"a\")",[187,912,913],{},"字符串操作",[172,915,916,921,934],{},[187,917,918],{},[33,919,920],{},"列表函数",[187,922,923,877,926,840,928,877,931],{},[28,924,925],{},"length(1px 2px 3px)",[28,927,880],{},[28,929,930],{},"extract(10px 20px, 2)",[28,932,933],{},"20px",[187,935,936],{},"列表处理",[24,938,939,942,943,946,947,950],{},[33,940,941],{},"条件逻辑","：Less 没有 ",[28,944,945],{},"if\u002Felse","，但可以通过 ",[28,948,949],{},"when"," 关键字在混合中实现条件分支。",[75,952,954],{"className":325,"code":953,"language":13,"meta":81,"style":81},".mixin(@size) when (@size > 100) {\n  width: @size;\n}\n.mixin(@size) when (@size \u003C= 100) {\n  width: @size * 2;\n}\n",[28,955,956,961,966,970,975,980],{"__ignoreMap":81},[111,957,958],{"class":113,"line":114},[111,959,960],{},".mixin(@size) when (@size > 100) {\n",[111,962,963],{"class":113,"line":132},[111,964,965],{},"  width: @size;\n",[111,967,968],{"class":113,"line":341},[111,969,369],{},[111,971,972],{"class":113,"line":348},[111,973,974],{},".mixin(@size) when (@size \u003C= 100) {\n",[111,976,977],{"class":113,"line":354},[111,978,979],{},"  width: @size * 2;\n",[111,981,982],{"class":113,"line":360},[111,983,369],{},[53,985,987],{"id":986},"_6-作用域scope","6. 作用域（Scope）",[24,989,990],{},"Less 变量采用“就近原则”：先从当前作用域查找，若找不到则向父级作用域查找。",[75,992,994],{"className":325,"code":993,"language":13,"meta":81,"style":81},"@var: red;\n#page {\n  @var: white;\n  #header {\n    color: @var; \u002F\u002F 输出 white\n  }\n}\n",[28,995,996,1001,1006,1011,1016,1021,1025],{"__ignoreMap":81},[111,997,998],{"class":113,"line":114},[111,999,1000],{},"@var: red;\n",[111,1002,1003],{"class":113,"line":132},[111,1004,1005],{},"#page {\n",[111,1007,1008],{"class":113,"line":341},[111,1009,1010],{},"  @var: white;\n",[111,1012,1013],{"class":113,"line":348},[111,1014,1015],{},"  #header {\n",[111,1017,1018],{"class":113,"line":354},[111,1019,1020],{},"    color: @var; \u002F\u002F 输出 white\n",[111,1022,1023],{"class":113,"line":360},[111,1024,497],{},[111,1026,1027],{"class":113,"line":366},[111,1028,369],{},[24,1030,1031,1034],{},[33,1032,1033],{},"延迟加载（Lazy Loading）","：在同一个作用域内，变量值由最后一次赋值决定，无论变量使用的位置在前还是在后。",[75,1036,1038],{"className":325,"code":1037,"language":13,"meta":81,"style":81},".lazy-eval {\n  width: @var; \u002F\u002F 这里的 @var 最终是 9%\n  @a: 9%;\n}\n@var: @a; \u002F\u002F 后定义的生效\n\u002F\u002F 编译后 width 为 9%\n",[28,1039,1040,1045,1050,1055,1059,1064],{"__ignoreMap":81},[111,1041,1042],{"class":113,"line":114},[111,1043,1044],{},".lazy-eval {\n",[111,1046,1047],{"class":113,"line":132},[111,1048,1049],{},"  width: @var; \u002F\u002F 这里的 @var 最终是 9%\n",[111,1051,1052],{"class":113,"line":341},[111,1053,1054],{},"  @a: 9%;\n",[111,1056,1057],{"class":113,"line":348},[111,1058,369],{},[111,1060,1061],{"class":113,"line":354},[111,1062,1063],{},"@var: @a; \u002F\u002F 后定义的生效\n",[111,1065,1066],{"class":113,"line":360},[111,1067,1068],{},"\u002F\u002F 编译后 width 为 9%\n",[53,1070,1072],{"id":1071},"_7-导入importing","7. 导入（Importing）",[24,1074,1075,1076,1079],{},"使用 ",[28,1077,1078],{},"@import"," 可以将其他 Less 或 CSS 文件合并到当前文件。",[75,1081,1083],{"className":325,"code":1082,"language":13,"meta":81,"style":81},"@import \"variables\"; \u002F\u002F 自动补 .less 扩展名\n@import \"typo.css\"; \u002F\u002F 导入普通 CSS 文件\n",[28,1084,1085,1090],{"__ignoreMap":81},[111,1086,1087],{"class":113,"line":114},[111,1088,1089],{},"@import \"variables\"; \u002F\u002F 自动补 .less 扩展名\n",[111,1091,1092],{"class":113,"line":132},[111,1093,1094],{},"@import \"typo.css\"; \u002F\u002F 导入普通 CSS 文件\n",[24,1096,1097,1100,1101,1103],{},[33,1098,1099],{},"导入选项","：在 ",[28,1102,1078],{}," 后添加修饰符控制导入行为。",[166,1105,1106,1116],{},[169,1107,1108],{},[172,1109,1110,1113],{},[175,1111,1112],{},"选项",[175,1114,1115],{},"作用",[182,1117,1118,1128,1138,1147],{},[172,1119,1120,1125],{},[187,1121,1122],{},[28,1123,1124],{},"reference",[187,1126,1127],{},"只使用导入文件中的变量和混合，不输出其样式（用于按需加载）",[172,1129,1130,1135],{},[187,1131,1132],{},[28,1133,1134],{},"inline",[187,1136,1137],{},"将文件原样复制到输出中，不处理其中的 Less 代码",[172,1139,1140,1144],{},[187,1141,1142],{},[28,1143,13],{},[187,1145,1146],{},"强制将文件当作 Less 处理（即使扩展名是 .css）",[172,1148,1149,1153],{},[187,1150,1151],{},[28,1152,12],{},[187,1154,1155],{},"强制将文件当作普通 CSS 处理（不进行 Less 编译）",[75,1157,1159],{"className":325,"code":1158,"language":13,"meta":81,"style":81},"@import (reference) \"bootstrap.less\";\n@import (inline) \"minify.css\";\n",[28,1160,1161,1166],{"__ignoreMap":81},[111,1162,1163],{"class":113,"line":114},[111,1164,1165],{},"@import (reference) \"bootstrap.less\";\n",[111,1167,1168],{"class":113,"line":132},[111,1169,1170],{},"@import (inline) \"minify.css\";\n",[48,1172,1174],{"id":1173},"三常见错误","三、常见错误",[166,1176,1177,1187],{},[169,1178,1179],{},[172,1180,1181,1184],{},[175,1182,1183],{},"现象",[175,1185,1186],{},"处理",[182,1188,1189,1199,1207,1220],{},[172,1190,1191,1194],{},[187,1192,1193],{},"除法未生效，输出字面量",[187,1195,1196,1197],{},"用括号包裹表达式，如 ",[28,1198,803],{},[172,1200,1201,1204],{},[187,1202,1203],{},"变量“晚定义生效”导致取值不符预期",[187,1205,1206],{},"检查同一作用域内是否有更靠后的重复赋值（延迟加载特性）",[172,1208,1209,1214],{},[187,1210,1211,1213],{},[28,1212,39],{}," 未编译直接被浏览器请求",[187,1215,1216,1217,1219],{},"生产环境需构建产物 ",[28,1218,97],{},"，检查构建配置是否遗漏该入口",[172,1221,1222,1225],{},[187,1223,1224],{},"混合样式未按预期分支执行",[187,1226,1227,1228,1230],{},"检查 ",[28,1229,949],{}," 条件与参数匹配的模式，注意参数个数\u002F类型",[48,1232,1233],{"id":1233},"总结",[24,1235,1236,1237,1239],{},"Less 以 ",[28,1238,30],{}," 为变量标识，语法与 CSS 完全兼容，适合团队快速上手。其核心特性包括：",[1241,1242,1243,1250,1259,1265,1271,1280,1286],"ul",{},[1244,1245,1246,1249],"li",{},[33,1247,1248],{},"变量","：统一管理样式值，支持插值。",[1244,1251,1252,1255,1256,1258],{},[33,1253,1254],{},"嵌套","：还原 HTML 结构，配合 ",[28,1257,509],{}," 引用父选择器。",[1244,1260,1261,1264],{},[33,1262,1263],{},"混合","：复用样式块，支持参数、默认值和模式匹配。",[1244,1266,1267,1270],{},[33,1268,1269],{},"运算","：数值和颜色计算，除法需括号。",[1244,1272,1273,1276,1277,1279],{},[33,1274,1275],{},"函数","：内置颜色、数学、列表等函数，配合 ",[28,1278,949],{}," 实现条件逻辑。",[1244,1281,1282,1285],{},[33,1283,1284],{},"作用域","：就近查找 + 延迟加载。",[1244,1287,1288,1291],{},[33,1289,1290],{},"导入","：模块化组织代码，支持多种导入选项。",[24,1293,1294,1295,1299,1300,46],{},"与 SCSS 对比见 ",[42,1296,1298],{"href":1297},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fcss-sass-less","CSS、Sass 与 Less","；工程化集成见 ",[42,1301,45],{"href":44},[48,1303,1304],{"id":1304},"参考文献",[166,1306,1307,1316],{},[169,1308,1309],{},[172,1310,1311,1314],{},[175,1312,1313],{},"资料",[175,1315,180],{},[182,1317,1318,1331,1343],{},[172,1319,1320,1328],{},[187,1321,1322],{},[42,1323,1327],{"href":1324,"rel":1325},"https:\u002F\u002Flesscss.org\u002F",[1326],"nofollow","Less 官方文档",[187,1329,1330],{},"变量、混合、函数、CLI",[172,1332,1333,1340],{},[187,1334,1335],{},[42,1336,1339],{"href":1337,"rel":1338},"https:\u002F\u002Flesscss.org\u002Fusage\u002F#operations",[1326],"Less：Operations",[187,1341,1342],{},"运算与括号规则",[172,1344,1345,1352],{},[187,1346,1347],{},[42,1348,1351],{"href":1349,"rel":1350},"https:\u002F\u002Flesscss.org\u002Fusage\u002F#client-side-usage",[1326],"Less：在浏览器中使用",[187,1353,1354],{},"less.js（了解即可，生产慎用）",[1356,1357,1358],"style",{},"html pre.shiki code .sbgvK, html code.shiki .sbgvK{--shiki-light:#E2931D;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s_sjI, html code.shiki .s_sjI{--shiki-light:#91B859;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .stzsN, html code.shiki .stzsN{--shiki-light:#91B859;--shiki-default:#005CC5;--shiki-dark:#79B8FF}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);}",{"title":81,"searchDepth":132,"depth":132,"links":1360},[1361,1368,1377,1378,1379],{"id":50,"depth":132,"text":51,"children":1362},[1363,1364,1365,1366,1367],{"id":55,"depth":341,"text":56},{"id":72,"depth":341,"text":73},{"id":101,"depth":341,"text":102},{"id":163,"depth":341,"text":164},{"id":234,"depth":341,"text":235},{"id":311,"depth":132,"text":312,"children":1369},[1370,1371,1372,1373,1374,1375,1376],{"id":315,"depth":341,"text":316},{"id":443,"depth":341,"text":444},{"id":559,"depth":341,"text":560},{"id":723,"depth":341,"text":724},{"id":807,"depth":341,"text":808},{"id":986,"depth":341,"text":987},{"id":1071,"depth":341,"text":1072},{"id":1173,"depth":132,"text":1174},{"id":1233,"depth":132,"text":1233},{"id":1304,"depth":132,"text":1304},{"title":8,"description":9},"knowledge\u002Fbooklet\u002Fweb\u002FCss\u002FLess\u002Fless-core","knowledge\u002Fknowledge\u002Fbooklet\u002Fweb\u002FCss\u002FLess\u002Fless-core.md","md",{"items":1385},[1386,1388,1392,1396,1400,1404],{"path":44,"title":45,"description":1387,"category":10,"score":426},"Less 可集成到 Vite、Webpack、Vue CLI 等工具链，实现编译、全局变量注入与路径处理。",{"path":1389,"title":1390,"description":1391,"category":10,"score":348},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-intro","Sass 简介与安装","Sass（Syntactically Awesome Style Sheets）是 CSS 预处理器，在 CSS 语法上增加变量、嵌套、混合、模块、控制指令等；有 SCSS 与缩进语法两种源码语法，官方实现为 Dart Sass。",{"path":1393,"title":1394,"description":1395,"category":10,"score":348},"\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":1397,"title":1398,"description":1399,"category":10,"score":348},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-reuse","复用机制：Mixin 与继承","Mixin（@mixin\u002F@include）支持参数与 @content，适合动态样式；@extend 与 %placeholder 通过合并选择器复用完全相同的静态样式，减少 CSS 体积。",{"path":1401,"title":1402,"description":1403,"category":10,"score":348},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-syntax","语法基础：变量、嵌套与运算","Sass 语法基础：$ 变量与插值、选择器嵌套与 & 父选择器引用、数学\u002F颜色\u002F字符串运算、三种注释语法及与原生 CSS 嵌套的关系。",{"path":1405,"title":1406,"description":1407,"category":10,"score":348},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fcolor","颜色与背景","color 设置前景（多为文字）色；background-* 设置元素背景（颜色、图像、渐变）。二者共同决定对比度与视觉层次，直接影响 无障碍 阅读体验。排版中的文本颜色用法见 排版与文本。",{"series":1409,"title":13,"items":1410,"index":1414,"prev":1415,"next":1416},"booklet\u002Fweb\u002Fcss\u002Fless",[1411,1412],{"path":7,"title":8,"date":14,"pinned":15},{"path":44,"title":45,"date":1413,"pinned":15},"2024-07-02",0,null,{"path":44,"title":45,"date":1413,"pinned":15}]