[{"data":1,"prerenderedAt":1159},["ShallowReactive",2],{"doc-\u002Fdocs\u002Fless-basics":3,"docs-all":981},{"id":4,"title":5,"body":6,"category":967,"date":968,"description":969,"draft":970,"extension":971,"meta":972,"navigation":364,"path":973,"seo":974,"source":975,"stem":976,"tags":977,"__hash__":980},"docs\u002Fdocs\u002Fless-basics.md","Less 语法与编译笔记",{"type":7,"value":8,"toc":958},"minimark",[9,14,18,22,25,70,81,319,323,471,486,505,508,511,559,581,584,604,607,669,683,686,701,716,733,758,822,825,836,888,903,906,954],[10,11,13],"h1",{"id":12},"less-语法与编译","Less 语法与编译",[15,16,17],"p",{},"Less 是 CSS 预处理语言，提供变量、混合和运算等能力。浏览器最终使用编译后的 CSS；课程还提到 Sass\u002FSCSS、Stylus，同属预处理工具范畴。",[19,20,21],"h2",{"id":21},"编译与页面引用",[15,23,24],{},"独立练习目录中的命令示例：",[26,27,32],"pre",{"className":28,"code":29,"language":30,"meta":31,"style":31},"language-sh shiki shiki-themes github-light github-dark","npm install --save-dev less\nnpx lessc my.less my.css\n","sh","",[33,34,35,55],"code",{"__ignoreMap":31},[36,37,40,44,48,52],"span",{"class":38,"line":39},"line",1,[36,41,43],{"class":42},"sScJk","npm",[36,45,47],{"class":46},"sZZnC"," install",[36,49,51],{"class":50},"sj4cs"," --save-dev",[36,53,54],{"class":46}," less\n",[36,56,58,61,64,67],{"class":38,"line":57},2,[36,59,60],{"class":42},"npx",[36,62,63],{"class":46}," lessc",[36,65,66],{"class":46}," my.less",[36,68,69],{"class":46}," my.css\n",[15,71,72,73,76,77,80],{},"课程也使用全局安装 ",[33,74,75],{},"npm install -g less"," 后运行 ",[33,78,79],{},"lessc","，或通过 Gulp、Webpack、桌面编译工具处理。本篇保留语言与编译片段，不附带这些工程。",[26,82,86],{"className":83,"code":84,"language":85,"meta":31,"style":31},"language-html shiki shiki-themes github-light github-dark","\u003Clink rel=\"stylesheet\" href=\"my.css\">\n\u003Cdiv id=\"box\">\n  \u003Cp class=\"p1\">\u003Ci class=\"font\">图标\u003C\u002Fi>\u003C\u002Fp>\n  \u003Cspan class=\"sp1\">文字\u003C\u002Fspan>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"c1\">固定圆角\u003C\u002Fdiv>\n\u003Cdiv class=\"c2\">指定圆角\u003C\u002Fdiv>\n\u003Cdiv class=\"c3\">默认圆角\u003C\u002Fdiv>\n\u003Cdiv id=\"box2\">\u003Cp class=\"p1\">\u003Ci class=\"font\">复用样式\u003C\u002Fi>\u003C\u002Fp>\u003C\u002Fdiv>\n","html",[33,87,88,118,135,176,197,207,228,249,270],{"__ignoreMap":31},[36,89,90,94,98,101,104,107,110,112,115],{"class":38,"line":39},[36,91,93],{"class":92},"sVt8B","\u003C",[36,95,97],{"class":96},"s9eBZ","link",[36,99,100],{"class":42}," rel",[36,102,103],{"class":92},"=",[36,105,106],{"class":46},"\"stylesheet\"",[36,108,109],{"class":42}," href",[36,111,103],{"class":92},[36,113,114],{"class":46},"\"my.css\"",[36,116,117],{"class":92},">\n",[36,119,120,122,125,128,130,133],{"class":38,"line":57},[36,121,93],{"class":92},[36,123,124],{"class":96},"div",[36,126,127],{"class":42}," id",[36,129,103],{"class":92},[36,131,132],{"class":46},"\"box\"",[36,134,117],{"class":92},[36,136,138,141,143,146,148,151,154,157,159,161,164,167,169,172,174],{"class":38,"line":137},3,[36,139,140],{"class":92},"  \u003C",[36,142,15],{"class":96},[36,144,145],{"class":42}," class",[36,147,103],{"class":92},[36,149,150],{"class":46},"\"p1\"",[36,152,153],{"class":92},">\u003C",[36,155,156],{"class":96},"i",[36,158,145],{"class":42},[36,160,103],{"class":92},[36,162,163],{"class":46},"\"font\"",[36,165,166],{"class":92},">图标\u003C\u002F",[36,168,156],{"class":96},[36,170,171],{"class":92},">\u003C\u002F",[36,173,15],{"class":96},[36,175,117],{"class":92},[36,177,179,181,183,185,187,190,193,195],{"class":38,"line":178},4,[36,180,140],{"class":92},[36,182,36],{"class":96},[36,184,145],{"class":42},[36,186,103],{"class":92},[36,188,189],{"class":46},"\"sp1\"",[36,191,192],{"class":92},">文字\u003C\u002F",[36,194,36],{"class":96},[36,196,117],{"class":92},[36,198,200,203,205],{"class":38,"line":199},5,[36,201,202],{"class":92},"\u003C\u002F",[36,204,124],{"class":96},[36,206,117],{"class":92},[36,208,210,212,214,216,218,221,224,226],{"class":38,"line":209},6,[36,211,93],{"class":92},[36,213,124],{"class":96},[36,215,145],{"class":42},[36,217,103],{"class":92},[36,219,220],{"class":46},"\"c1\"",[36,222,223],{"class":92},">固定圆角\u003C\u002F",[36,225,124],{"class":96},[36,227,117],{"class":92},[36,229,231,233,235,237,239,242,245,247],{"class":38,"line":230},7,[36,232,93],{"class":92},[36,234,124],{"class":96},[36,236,145],{"class":42},[36,238,103],{"class":92},[36,240,241],{"class":46},"\"c2\"",[36,243,244],{"class":92},">指定圆角\u003C\u002F",[36,246,124],{"class":96},[36,248,117],{"class":92},[36,250,252,254,256,258,260,263,266,268],{"class":38,"line":251},8,[36,253,93],{"class":92},[36,255,124],{"class":96},[36,257,145],{"class":42},[36,259,103],{"class":92},[36,261,262],{"class":46},"\"c3\"",[36,264,265],{"class":92},">默认圆角\u003C\u002F",[36,267,124],{"class":96},[36,269,117],{"class":92},[36,271,273,275,277,279,281,284,286,288,290,292,294,296,298,300,302,304,307,309,311,313,315,317],{"class":38,"line":272},9,[36,274,93],{"class":92},[36,276,124],{"class":96},[36,278,127],{"class":42},[36,280,103],{"class":92},[36,282,283],{"class":46},"\"box2\"",[36,285,153],{"class":92},[36,287,15],{"class":96},[36,289,145],{"class":42},[36,291,103],{"class":92},[36,293,150],{"class":46},[36,295,153],{"class":92},[36,297,156],{"class":96},[36,299,145],{"class":42},[36,301,103],{"class":92},[36,303,163],{"class":46},[36,305,306],{"class":92},">复用样式\u003C\u002F",[36,308,156],{"class":96},[36,310,171],{"class":92},[36,312,15],{"class":96},[36,314,171],{"class":92},[36,316,124],{"class":96},[36,318,117],{"class":92},[19,320,322],{"id":321},"变量嵌套与父选择器","变量、嵌套与父选择器",[26,324,328],{"className":325,"code":326,"language":327,"meta":31,"style":31},"language-less shiki shiki-themes github-light github-dark","@danger: red;\n@warning: yellow;\n@success: green;\n@primary: blue;\n@baseWidth: 20px;\n@baseHeight: 10px;\n\n#box {\n  min-height: (@baseHeight * 20);\n  background: @warning;\n  color: @danger;\n  .p1 {\n    border: 2px solid @success;\n    padding: (3 * 23px);\n    .font {\n      color: #ccc;\n      font-size: 20px;\n      &:hover { color: darken(@danger, 20%); }\n    }\n  }\n  .sp1 {\n    color: @primary;\n    font-size: ceil((200px \u002F 34));\n  }\n}\n","less",[33,329,330,335,340,345,350,355,360,366,371,376,382,388,394,400,406,412,418,424,430,436,442,448,454,460,465],{"__ignoreMap":31},[36,331,332],{"class":38,"line":39},[36,333,334],{},"@danger: red;\n",[36,336,337],{"class":38,"line":57},[36,338,339],{},"@warning: yellow;\n",[36,341,342],{"class":38,"line":137},[36,343,344],{},"@success: green;\n",[36,346,347],{"class":38,"line":178},[36,348,349],{},"@primary: blue;\n",[36,351,352],{"class":38,"line":199},[36,353,354],{},"@baseWidth: 20px;\n",[36,356,357],{"class":38,"line":209},[36,358,359],{},"@baseHeight: 10px;\n",[36,361,362],{"class":38,"line":230},[36,363,365],{"emptyLinePlaceholder":364},true,"\n",[36,367,368],{"class":38,"line":251},[36,369,370],{},"#box {\n",[36,372,373],{"class":38,"line":272},[36,374,375],{},"  min-height: (@baseHeight * 20);\n",[36,377,379],{"class":38,"line":378},10,[36,380,381],{},"  background: @warning;\n",[36,383,385],{"class":38,"line":384},11,[36,386,387],{},"  color: @danger;\n",[36,389,391],{"class":38,"line":390},12,[36,392,393],{},"  .p1 {\n",[36,395,397],{"class":38,"line":396},13,[36,398,399],{},"    border: 2px solid @success;\n",[36,401,403],{"class":38,"line":402},14,[36,404,405],{},"    padding: (3 * 23px);\n",[36,407,409],{"class":38,"line":408},15,[36,410,411],{},"    .font {\n",[36,413,415],{"class":38,"line":414},16,[36,416,417],{},"      color: #ccc;\n",[36,419,421],{"class":38,"line":420},17,[36,422,423],{},"      font-size: 20px;\n",[36,425,427],{"class":38,"line":426},18,[36,428,429],{},"      &:hover { color: darken(@danger, 20%); }\n",[36,431,433],{"class":38,"line":432},19,[36,434,435],{},"    }\n",[36,437,439],{"class":38,"line":438},20,[36,440,441],{},"  }\n",[36,443,445],{"class":38,"line":444},21,[36,446,447],{},"  .sp1 {\n",[36,449,451],{"class":38,"line":450},22,[36,452,453],{},"    color: @primary;\n",[36,455,457],{"class":38,"line":456},23,[36,458,459],{},"    font-size: ceil((200px \u002F 34));\n",[36,461,463],{"class":38,"line":462},24,[36,464,441],{},[36,466,468],{"class":38,"line":467},25,[36,469,470],{},"}\n",[15,472,473,474,477,478,481,482,485],{},"嵌套生成 ",[33,475,476],{},"#box .p1 .font"," 等选择器；",[33,479,480],{},"&"," 代表完整的父选择器，因此 ",[33,483,484],{},"&:hover"," 生成父选择器的悬停状态。",[15,487,488,489,492,493,496,497,504],{},"运算加括号可以让意图明确，尤其除法受 Less 版本和 math 选项影响。原例 ",[33,490,491],{},"ceil(200\u002F34px)"," 改为 ",[33,494,495],{},"ceil((200px \u002F 34))","，表达“200px 除以 34，再向上取整”。",[498,499,503],"a",{"href":500,"rel":501},"https:\u002F\u002Flesscss.org\u002F#operations",[502],"nofollow","Less 运算说明","。",[19,506,507],{"id":507},"混合与参数",[15,509,510],{},"普通 class 可以作为声明集合混入；带空括号的 mixin 定义自身不会生成同名 CSS 规则。",[26,512,514],{"className":325,"code":513,"language":327,"meta":31,"style":31},"@baseWidth: 20px;\n.margin20 { margin: @baseWidth; }\n.radius() { border-radius: 4px; }\n.radius2(@width) { border-radius: @width; }\n.radius3(@width: 5px) { border-radius: @width; }\n\n.c1 { .margin20(); .radius(); }\n.c2 { .margin20(); .radius2(8px); }\n.c3 { .margin20(); .radius3(); }\n",[33,515,516,520,525,530,535,540,544,549,554],{"__ignoreMap":31},[36,517,518],{"class":38,"line":39},[36,519,354],{},[36,521,522],{"class":38,"line":57},[36,523,524],{},".margin20 { margin: @baseWidth; }\n",[36,526,527],{"class":38,"line":137},[36,528,529],{},".radius() { border-radius: 4px; }\n",[36,531,532],{"class":38,"line":178},[36,533,534],{},".radius2(@width) { border-radius: @width; }\n",[36,536,537],{"class":38,"line":199},[36,538,539],{},".radius3(@width: 5px) { border-radius: @width; }\n",[36,541,542],{"class":38,"line":209},[36,543,365],{"emptyLinePlaceholder":364},[36,545,546],{"class":38,"line":230},[36,547,548],{},".c1 { .margin20(); .radius(); }\n",[36,550,551],{"class":38,"line":251},[36,552,553],{},".c2 { .margin20(); .radius2(8px); }\n",[36,555,556],{"class":38,"line":272},[36,557,558],{},".c3 { .margin20(); .radius3(); }\n",[15,560,561,562,565,566,565,569,572,573,576,577,580],{},"编译后 ",[33,563,564],{},".c1","、",[33,567,568],{},".c2",[33,570,571],{},".c3"," 都有 ",[33,574,575],{},"margin: 20px","，圆角分别为 4px、8px、5px。传入 ",[33,578,579],{},".radius3(10px)"," 可覆盖默认值。",[19,582,583],{"id":583},"extend",[26,585,587],{"className":325,"code":586,"language":327,"meta":31,"style":31},"#box { color: red; }\n#box .font { font-size: 20px; }\n#box2 { &:extend(#box all); }\n",[33,588,589,594,599],{"__ignoreMap":31},[36,590,591],{"class":38,"line":39},[36,592,593],{},"#box { color: red; }\n",[36,595,596],{"class":38,"line":57},[36,597,598],{},"#box .font { font-size: 20px; }\n",[36,600,601],{"class":38,"line":137},[36,602,603],{},"#box2 { &:extend(#box all); }\n",[15,605,606],{},"输出含义：",[26,608,612],{"className":609,"code":610,"language":611,"meta":31,"style":31},"language-css shiki shiki-themes github-light github-dark","#box, #box2 { color: red; }\n#box .font, #box2 .font { font-size: 20px; }\n","css",[33,613,614,640],{"__ignoreMap":31},[36,615,616,619,622,625,628,631,634,637],{"class":38,"line":39},[36,617,618],{"class":42},"#box",[36,620,621],{"class":92},", ",[36,623,624],{"class":42},"#box2",[36,626,627],{"class":92}," { ",[36,629,630],{"class":50},"color",[36,632,633],{"class":92},": ",[36,635,636],{"class":50},"red",[36,638,639],{"class":92},"; }\n",[36,641,642,644,647,649,651,653,655,658,660,663,667],{"class":38,"line":57},[36,643,618],{"class":42},[36,645,646],{"class":42}," .font",[36,648,621],{"class":92},[36,650,624],{"class":42},[36,652,646],{"class":42},[36,654,627],{"class":92},[36,656,657],{"class":50},"font-size",[36,659,633],{"class":92},[36,661,662],{"class":50},"20",[36,664,666],{"class":665},"szBVR","px",[36,668,639],{"class":92},[15,670,671,673,674,677,678,504],{},[33,672,583],{}," 合并选择器，mixin 则把声明放入调用位置。",[33,675,676],{},"all"," 允许在复合选择器中匹配并替换目标部分，不是运行时 DOM 继承。",[498,679,682],{"href":680,"rel":681},"https:\u002F\u002Flesscss.org\u002Ffeatures\u002F#extend-feature",[502],"Less extend 文档",[19,684,685],{"id":685},"导入",[26,687,689],{"className":325,"code":688,"language":327,"meta":31,"style":31},"@import 'test.less';\n@import 'test2.css';\n",[33,690,691,696],{"__ignoreMap":31},[36,692,693],{"class":38,"line":39},[36,694,695],{},"@import 'test.less';\n",[36,697,698],{"class":38,"line":57},[36,699,700],{},"@import 'test2.css';\n",[15,702,703,704,707,708,711,712,715],{},"默认情况下 ",[33,705,706],{},".less"," 导入由编译器处理；",[33,709,710],{},".css"," 导入通常保留为 CSS ",[33,713,714],{},"@import","，浏览器仍需能访问对应 CSS。需要不同处理方式时使用显式导入选项，不能认为所有 import 都会内联。",[15,717,718,719,722,723,726,727,565,730,732],{},"课程 ",[33,720,721],{},"test.less"," 是重置样式，",[33,724,725],{},"test2.css"," 给 ",[33,728,729],{},"em",[33,731,156],{}," 设置字体和颜色；可作为独立被导入文件：",[26,734,736],{"className":325,"code":735,"language":327,"meta":31,"style":31},"\u002F\u002F test.less\n* { margin: 0; padding: 0; }\na { text-decoration: none; color: #000; }\nul { list-style: none; }\n",[33,737,738,743,748,753],{"__ignoreMap":31},[36,739,740],{"class":38,"line":39},[36,741,742],{},"\u002F\u002F test.less\n",[36,744,745],{"class":38,"line":57},[36,746,747],{},"* { margin: 0; padding: 0; }\n",[36,749,750],{"class":38,"line":137},[36,751,752],{},"a { text-decoration: none; color: #000; }\n",[36,754,755],{"class":38,"line":178},[36,756,757],{},"ul { list-style: none; }\n",[26,759,761],{"className":609,"code":760,"language":611,"meta":31,"style":31},"\u002F* test2.css *\u002F\nem, i {\n  font-size: 16px;\n  font-style: normal;\n  color: red;\n}\n",[33,762,763,769,780,795,807,818],{"__ignoreMap":31},[36,764,765],{"class":38,"line":39},[36,766,768],{"class":767},"sJ8bj","\u002F* test2.css *\u002F\n",[36,770,771,773,775,777],{"class":38,"line":57},[36,772,729],{"class":96},[36,774,621],{"class":92},[36,776,156],{"class":96},[36,778,779],{"class":92}," {\n",[36,781,782,785,787,790,792],{"class":38,"line":137},[36,783,784],{"class":50},"  font-size",[36,786,633],{"class":92},[36,788,789],{"class":50},"16",[36,791,666],{"class":665},[36,793,794],{"class":92},";\n",[36,796,797,800,802,805],{"class":38,"line":178},[36,798,799],{"class":50},"  font-style",[36,801,633],{"class":92},[36,803,804],{"class":50},"normal",[36,806,794],{"class":92},[36,808,809,812,814,816],{"class":38,"line":199},[36,810,811],{"class":50},"  color",[36,813,633],{"class":92},[36,815,636],{"class":50},[36,817,794],{"class":92},[36,819,820],{"class":38,"line":209},[36,821,470],{"class":92},[19,823,824],{"id":824},"内置函数与递归循环",[15,826,827,828,831,832,835],{},"课程实际使用 ",[33,829,830],{},"darken"," 调暗颜色、",[33,833,834],{},"ceil"," 向上取整，并介绍类型判断函数这一类别。下面保留带守卫的递归混合，生成十列宽度：",[26,837,839],{"className":325,"code":838,"language":327,"meta":31,"style":31},"@primary: blue;\n.generate-columns(@count, @index: 1) when (@index =\u003C @count) {\n  .column-@{index} {\n    width: (@index * 100% \u002F @count);\n    height: 10px;\n    background: darken(@primary, (@index * 5%));\n  }\n  .generate-columns(@count, (@index + 1));\n}\n.generate-columns(10);\n",[33,840,841,845,850,855,860,865,870,874,879,883],{"__ignoreMap":31},[36,842,843],{"class":38,"line":39},[36,844,349],{},[36,846,847],{"class":38,"line":57},[36,848,849],{},".generate-columns(@count, @index: 1) when (@index =\u003C @count) {\n",[36,851,852],{"class":38,"line":137},[36,853,854],{},"  .column-@{index} {\n",[36,856,857],{"class":38,"line":178},[36,858,859],{},"    width: (@index * 100% \u002F @count);\n",[36,861,862],{"class":38,"line":199},[36,863,864],{},"    height: 10px;\n",[36,866,867],{"class":38,"line":209},[36,868,869],{},"    background: darken(@primary, (@index * 5%));\n",[36,871,872],{"class":38,"line":230},[36,873,441],{},[36,875,876],{"class":38,"line":251},[36,877,878],{},"  .generate-columns(@count, (@index + 1));\n",[36,880,881],{"class":38,"line":272},[36,882,470],{},[36,884,885],{"class":38,"line":378},[36,886,887],{},".generate-columns(10);\n",[15,889,890,891,894,895,898,899,902],{},"插值 ",[33,892,893],{},"@{index}"," 生成 ",[33,896,897],{},".column-1"," 至 ",[33,900,901],{},".column-10","，宽度从 10% 到 100%。守卫条件是递归终止条件；传入的列数应为正整数。",[19,904,905],{"id":905},"来源记录",[907,908,909,926,936,942],"ul",{},[910,911,912,915,916,565,919,565,921,565,923,504],"li",{},[33,913,914],{},"005_less_gulp\u002Fcode\u002Freadme.md"," Less 章节、",[33,917,918],{},"02_less\u002Fmy.less",[33,920,721],{},[33,922,725],{},[33,924,925],{},"index.html",[910,927,928,931,932,935],{},[33,929,930],{},"006_webpack\u002Fcode\u002Freadme.md"," Less 复习、",[33,933,934],{},"01_gulp\u002Findex.less","：与前一课重叠的内容合并。",[910,937,938,941],{},[33,939,940],{},"my.css"," 属于编译输出，整理为关键输出示意；锁文件只用来核对依赖，不迁入。",[910,943,944,945,949,950,504],{},"Gulp 编译 Less 的示例见 ",[498,946,948],{"href":947},"\u002Fdocs\u002Fgulp-basics","Gulp","，Webpack loader 链见 ",[498,951,953],{"href":952},"\u002Fdocs\u002Fwebpack-basics","Webpack",[955,956,957],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}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 .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":31,"searchDepth":137,"depth":137,"links":959},[960,961,962,963,964,965,966],{"id":21,"depth":57,"text":21},{"id":321,"depth":57,"text":322},{"id":507,"depth":57,"text":507},{"id":583,"depth":57,"text":583},{"id":685,"depth":57,"text":685},{"id":824,"depth":57,"text":824},{"id":905,"depth":57,"text":905},"toolchain","2023-04-26","变量、嵌套、混合、extend、导入、内置函数和递归生成列的课程示例。",false,"md",{},"\u002Fdocs\u002Fless-basics",{"title":5,"description":969},"尚学堂 ES6 课程 005_less_gulp、006_webpack 的 Less 笔记与示例","docs\u002Fless-basics",[611,978,979],"notes","cheatsheet","rvGx8L4pPyOodgILdlcbUtRlZSg6ObtPXglFIt6_6vc",[982,991,997,1002,1007,1015,1024,1031,1037,1047,1054,1063,1068,1075,1080,1086,1092,1099,1106,1113,1121,1127,1133,1138,1142,1147,1149,1153],{"path":983,"title":984,"description":985,"date":986,"category":967,"tags":987},"\u002Fdocs\u002Fbabel-basics","Babel 转译基础与构建集成","Babel 7 的 CLI、preset、plugin、目标环境以及 Gulp、Webpack 和 JSX 转译配置摘录。","2026-09-09",[988,989,990,978],"javascript","es6","webpack",{"path":992,"title":993,"description":994,"date":986,"category":995,"tags":996},"\u002Fdocs\u002Fes6-arrays-objects","ES6 数组与对象扩展","展开运算符、Array.from、Object.assign、属性描述符与图片预加载示例。","fundamentals",[988,989,978],{"path":998,"title":999,"description":1000,"date":986,"category":995,"tags":1001},"\u002Fdocs\u002Fes6-basics","ES6 基础：作用域、解构与模板字符串","从课程示例整理 let、const、暂时性死区、全局对象、数组与对象解构及模板字符串。",[988,989,978],{"path":1003,"title":1004,"description":1005,"date":986,"category":995,"tags":1006},"\u002Fdocs\u002Fjs-promise-async","Promise、Generator 与 async\u002Fawait","从回调到 Promise 链、组合方法、Generator 执行与 async 错误处理的课程示例整理。",[988,989,978],{"path":1008,"title":1009,"description":1010,"date":1011,"category":967,"tags":1012},"\u002Fdocs\u002Flinux-commands-cheatsheet","Linux 常用命令与权限管理速查","cp\u002Fmv\u002Frm、目录导航、查找、压缩、网络等基础命令速查，以及 chmod\u002Fchown 的数字与符号写法、常用组合和 WSL 下的坑。","2026-05-28",[1013,1014,979],"linux","wsl2",{"path":1016,"title":1017,"description":1018,"date":1019,"category":1020,"tags":1021},"\u002Fdocs\u002Ffrontend-coding-standards","前端团队编码规范","HTML \u002F CSS \u002F JavaScript 三端统一的团队编码约定，含缩进、命名、语法与禁用项，可直接作为 Code Review 依据。","2025-12-17","standards",[85,611,988,989,1022,1023],"best-practice","guide",{"path":1025,"title":1026,"description":1027,"date":1028,"category":967,"tags":1029},"\u002Fdocs\u002Fwindows-mklink","Windows mklink 符号链接用法","mklink 各参数区别与实用场景：目录联接、符号链接与硬链接的选择。","2024-12-18",[1030,979],"windows",{"path":1032,"title":1033,"description":1034,"date":1035,"category":967,"tags":1036},"\u002Fdocs\u002Frandom-color-utils","JS 随机颜色生成方法","几种生成随机 RGB \u002F HEX 颜色的实现方式与各自适用场景。","2024-12-11",[988,979],{"path":1038,"title":1039,"description":1040,"date":1041,"category":1042,"tags":1043},"\u002Fdocs\u002Fcanvas-vs-svg","Canvas 与 SVG 绘图方案选型","对比 Canvas 与 SVG 两种绘图方案的优缺点与适用场景，给出选型判断依据。","2024-12-09","visualization",[1044,1045,1046,1022],"canvas","svg","performance",{"path":1048,"title":1049,"description":1050,"date":1051,"category":967,"tags":1052},"\u002Fdocs\u002Ffree-commercial-fonts","免费可商用字体整理","整理思源黑体、思源宋体等可商用中文字体，规避字体版权风险。","2024-11-03",[1053,611,978],"font",{"path":1055,"title":1056,"description":1057,"date":1051,"category":1058,"tags":1059},"\u002Fdocs\u002Finterview-browser-network","浏览器与网络考点","从输入 URL 到页面呈现的完整链路，涵盖渲染流程、回流重绘、HTTP 报文与状态码、跨域同源策略与常见攻击方式。","interview",[1060,1061,1062,1046,978],"browser","http","network",{"path":1064,"title":1065,"description":1066,"date":1051,"category":1058,"tags":1067},"\u002Fdocs\u002Finterview-css-layout","CSS 与布局考点","em 与 rem 的区别、移动端三种适配方案对比、viewport 标准设置与 REM 布局的媒体查询实现。",[611,85,1022,978],{"path":1069,"title":1070,"description":1071,"date":1051,"category":1058,"tags":1072},"\u002Fdocs\u002Finterview-framework-tooling","框架与工程化考点","React diff 与 setState 机制、Redux 核心组成、Vue 常考清单，以及 Webpack、Vite、Git 的面试要点。",[1073,988,990,1074,978],"vue","vite",{"path":1076,"title":1077,"description":1078,"date":1051,"category":1058,"tags":1079},"\u002Fdocs\u002Finterview-javascript-core","JavaScript 核心考点","数据类型、this 绑定、闭包、原型链、异步与数组方法，前端面试中 JS 部分的高频考点与代码示例。",[988,989,978],{"path":1081,"title":1082,"description":1083,"date":1051,"category":995,"tags":1084},"\u002Fdocs\u002Fjs-module-systems","JavaScript 模块化方案","梳理 CommonJS、AMD、ES Module 等模块化方案的差异与使用方式。",[988,1085,989,978],"module-system",{"path":1087,"title":1088,"description":1089,"date":1051,"category":995,"tags":1090},"\u002Fdocs\u002Fwebsocket-basics","WebSocket 基础","WebSocket 全双工通信协议的事件、方法与基本用法整理。",[1091,1062,988,978],"websocket",{"path":1093,"title":1094,"description":1095,"date":1096,"category":967,"tags":1097},"\u002Fdocs\u002Fmarkdown-syntax","Markdown 语法速查","Markdown 标题、强调、列表、区块引用、代码、表格、转义与 Mermaid 图表语法整理。","2024-10-18",[1098,979,978],"markdown",{"path":1100,"title":1101,"description":1102,"date":1103,"category":1042,"tags":1104},"\u002Fdocs\u002Fgojs-getting-started","GoJS 入门实战","从引入方式、画布初始化到节点模板与数据绑定，一份可直接上手的 GoJS 流程图开发笔记。","2024-08-22",[1105,988,978],"gojs",{"path":1107,"title":1108,"description":1109,"date":1110,"category":1042,"tags":1111},"\u002Fdocs\u002Fecharts-options-notes","ECharts 配置项速查","整理 ECharts 常用 option 配置：数据格式、坐标轴、图例与交互项的实际用法。","2024-08-09",[1112,988,979],"echarts",{"path":1114,"title":1115,"description":1116,"date":1117,"category":967,"tags":1118},"\u002Fdocs\u002Fyarn-npm-install-errors","yarn \u002F npm 安装报错处理","yarn 引擎版本不兼容时的 ignore-engines 绕过、Windows 刷新 DNS 解析缓存、npm 缓存清理与校验。","2024-08-06",[43,1119,1030,1120],"nodejs","troubleshooting",{"path":1122,"title":1123,"description":1124,"date":1125,"category":1042,"tags":1126},"\u002Fdocs\u002Fgojs-grid-panel","GoJS 网格面板用法","Diagram.grid 默认网格与网格捕捉、单元格尺寸定制，用 LineH\u002FLineV\u002FBarH\u002FBarV 自定义网格样式，以及把 Grid 面板当作节点元素使用。","2024-07-01",[1105,988,978],{"path":1128,"title":1129,"description":1130,"date":1131,"category":995,"tags":1132},"\u002Fdocs\u002Fhttp-status-codes","HTTP 响应状态码详解","按 1xx 到 5xx 分类梳理 HTTP 状态码的含义与典型使用场景。","2024-06-27",[1061,1062,979],{"path":1134,"title":1135,"description":1136,"date":968,"category":995,"tags":1137},"\u002Fdocs\u002Fes6-functions-classes","ES6 函数与 Class","默认参数、rest、箭头函数的 this、Class 方法、访问器、静态成员与继承。",[988,989,978],{"path":947,"title":1139,"description":1140,"date":968,"category":967,"tags":1141},"Gulp 4 任务与文件流","Gulp 任务完成信号、串并行组合、文件流、资源处理、分阶段输出和文件监听。",[988,1119,978],{"path":1143,"title":1144,"description":1145,"date":968,"category":995,"tags":1146},"\u002Fdocs\u002Fjs-proxy-reflect","Proxy 与 Reflect 入门","通过属性读取和赋值示例理解 Proxy、Reflect、receiver 与拦截限制。",[988,989,978],{"path":973,"title":5,"description":969,"date":968,"category":967,"tags":1148},[611,978,979],{"path":952,"title":1150,"description":1151,"date":968,"category":967,"tags":1152},"Webpack 4 配置与开发服务器笔记","课程中的入口出口、loader、plugin、source map、开发代理以及 React 环境配置片段。",[990,988,1119,978],{"path":1154,"title":1155,"description":1156,"date":1157,"category":995,"tags":1158},"\u002Fdocs\u002Fhtml-basics","HTML 基础笔记","HTML 语法规范、常用标签、表格、表单、Canvas 入门与 JavaScript 输出方式速查。","2022-06-10",[85,978,979],1789635934444]