[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"knowledge-\u002Fapi\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-modules":3,"knowledge-related-\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-modules":3883,"knowledge-series-\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-modules":3907},{"source":4,"connector":5,"page":6},"sqlite","better-sqlite3",{"path":7,"title":8,"description":9,"category":10,"tags":11,"date":17,"pinned":18,"draft":18,"body":19,"seo":3879,"stem":3880,"id":3881,"extension":3882},"\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 用于条件与循环生成样式。","技能小册",[12,13,14,15,16],"css","sass","modules","fn","if","2026-07-23",false,{"type":20,"value":21,"toc":3847},"minimark",[22,26,76,87,115,120,131,176,182,192,199,204,208,362,379,382,435,439,490,496,499,598,605,702,709,717,722,755,818,832,841,932,937,970,974,1052,1074,1078,1088,1092,1176,1188,1192,1202,1414,1420,1545,1549,1555,1644,1650,1773,1779,1877,1898,1904,1989,1995,2099,2105,2169,2173,2179,2392,2397,2423,2427,2470,2474,2486,2498,2501,2640,2650,2688,2694,2700,2705,2723,2875,2880,2987,2992,2997,3000,3003,3076,3079,3153,3157,3273,3275,3355,3360,3366,3372,3455,3457,3615,3625,3628,3742,3758,3761,3844],[23,24,8],"h1",{"id":25},"模块与控制流use内置函数ifforeach",[27,28,29,30,34,35,39,40,43,44,47,48,34,51,54,55,54,58,54,61,64,65,70,71,75],"p",{},"本文包含 Sass 的三块进阶能力：",[31,32,33],"strong",{},"模块系统","（",[36,37,38],"code",{},"@use"," \u002F ",[36,41,42],{},"@import","）、",[31,45,46],{},"内置模块与自定义函数","、",[31,49,50],{},"控制指令",[36,52,53],{},"@if","\u002F",[36,56,57],{},"@for",[36,59,60],{},"@each",[36,62,63],{},"@while","）。基础语法见 ",[66,67,69],"a",{"href":68},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-syntax","语法基础","；复用机制见 ",[66,72,74],{"href":73},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-reuse","复用机制","。",[77,78,80,81,83,84,86],"h2",{"id":79},"一模块化use-vs-import","一、模块化（",[36,82,38],{}," vs ",[36,85,42],{},"）",[27,88,89,92,93,100,101,105,106,108,109,75],{},[31,90,91],{},"Dart Sass 1.23+"," 起推荐使用 ",[31,94,95,39,97],{},[36,96,38],{},[36,98,99],{},"@forward"," 替代 ",[31,102,103],{},[36,104,42],{},"，避免全局污染与重复加载。",[36,107,42],{}," 已标记为弃用，见 ",[66,110,114],{"href":111,"rel":112},"https:\u002F\u002Fsass-lang.com\u002Fdocumentation\u002Fat-rules\u002Fimport",[113],"nofollow","Sass 官方说明",[116,117,119],"h3",{"id":118},"_1-局部文件partials命名规则","1. 局部文件（Partials）命名规则",[27,121,122,123,130],{},"以",[31,124,125,126,129],{},"下划线 ",[36,127,128],{},"_"," 开头","的 Sass 文件称为“局部文件”（Partial）。",[132,133,134,151],"ul",{},[135,136,137,140,141,144,145,147,148,150],"li",{},[31,138,139],{},"作用","：局部文件不会被单独编译成独立的 ",[36,142,143],{},".css"," 文件，只有通过 ",[36,146,38],{}," 或 ",[36,149,42],{}," 被引用时，其内容才会合并到主文件中。",[135,152,153,156,157,160,161,164,165,164,168,171,172,175],{},[31,154,155],{},"命名要求","：下划线必须在文件名",[31,158,159],{},"最前面","才被 Sass 识别为 Partial。例如 ",[36,162,163],{},"_variables.scss"," ✅；",[36,166,167],{},"_btn.scss",[36,169,170],{},"_btn_group.scss"," ✅（下划线在开头即可，后面可再含下划线）；",[36,173,174],{},"btn_group.scss"," ❌（开头没有下划线，会被当作独立根文件编译）。",[27,177,178,181],{},[31,179,180],{},"推荐目录结构","：",[183,184,190],"pre",{"className":185,"code":187,"language":188,"meta":189},[186],"language-text","scss\u002F\n├── main.scss              # 入口文件，负责 @use 所有模块\n├── _variables.scss        # Partial：只存变量（无样式规则）\n├── _mixins.scss           # Partial：Mixin 定义\n├── _functions.scss        # Partial：自定义函数\n└── components\u002F\n    ├── _button.scss\n    └── _card.scss\n","text","",[36,191,187],{"__ignoreMap":189},[116,193,195,196,198],{"id":194},"_2-use-用法现代模块系统","2. ",[36,197,38],{}," 用法（现代模块系统）",[27,200,201,203],{},[36,202,38],{}," 是 Sass 官方推荐的模块加载方式，从 Dart Sass 1.23 开始稳定支持。",[205,206,207],"h4",{"id":207},"基本加载与命名空间",[183,209,213],{"className":210,"code":211,"language":212,"meta":189,"style":189},"language-scss shiki shiki-themes material-theme-lighter github-light github-dark","\u002F\u002F _variables.scss\n$primary-color: #3498db;\n$border-radius: 4px;\n\n\u002F\u002F main.scss\n@use \"variables\"; \u002F\u002F 引入时省略下划线和扩展名\n\n.button {\n  background: variables.$primary-color; \u002F\u002F 必须通过命名空间访问\n  border-radius: variables.$border-radius;\n}\n","scss",[36,214,215,224,246,264,271,277,300,305,319,340,356],{"__ignoreMap":189},[216,217,220],"span",{"class":218,"line":219},"line",1,[216,221,223],{"class":222},"sutJx","\u002F\u002F _variables.scss\n",[216,225,227,231,235,239,243],{"class":218,"line":226},2,[216,228,230],{"class":229},"sMMDD","$primary-color",[216,232,234],{"class":233},"sP7_E",":",[216,236,238],{"class":237},"s39Yj"," #",[216,240,242],{"class":241},"s_hVV","3498db",[216,244,245],{"class":233},";\n",[216,247,249,252,254,258,262],{"class":218,"line":248},3,[216,250,251],{"class":229},"$border-radius",[216,253,234],{"class":233},[216,255,257],{"class":256},"srdBf"," 4",[216,259,261],{"class":260},"sw1J6","px",[216,263,245],{"class":233},[216,265,267],{"class":218,"line":266},4,[216,268,270],{"emptyLinePlaceholder":269},true,"\n",[216,272,274],{"class":218,"line":273},5,[216,275,276],{"class":222},"\u002F\u002F main.scss\n",[216,278,280,283,287,291,294,297],{"class":218,"line":279},6,[216,281,38],{"class":282},"sVHd0",[216,284,286],{"class":285},"sjJ54"," \"",[216,288,290],{"class":289},"s_sjI","variables",[216,292,293],{"class":285},"\"",[216,295,296],{"class":233},";",[216,298,299],{"class":222}," \u002F\u002F 引入时省略下划线和扩展名\n",[216,301,303],{"class":218,"line":302},7,[216,304,270],{"emptyLinePlaceholder":269},[216,306,308,312,316],{"class":218,"line":307},8,[216,309,311],{"class":310},"stp6e",".",[216,313,315],{"class":314},"sbgvK","button",[216,317,318],{"class":233}," {\n",[216,320,322,326,328,331,333,335,337],{"class":218,"line":321},9,[216,323,325],{"class":324},"soE4H","  background",[216,327,234],{"class":233},[216,329,330],{"class":229}," variables",[216,332,311],{"class":233},[216,334,230],{"class":229},[216,336,296],{"class":233},[216,338,339],{"class":222}," \u002F\u002F 必须通过命名空间访问\n",[216,341,343,346,348,350,352,354],{"class":218,"line":342},10,[216,344,345],{"class":324},"  border-radius",[216,347,234],{"class":233},[216,349,330],{"class":229},[216,351,311],{"class":233},[216,353,251],{"class":229},[216,355,245],{"class":233},[216,357,359],{"class":218,"line":358},11,[216,360,361],{"class":233},"}\n",[132,363,364,376],{},[135,365,366,367,373,374,75],{},"命名空间默认为",[31,368,369,370,372],{},"文件名（不含 ",[36,371,128],{}," 和扩展名）","，如 ",[36,375,290],{},[135,377,378],{},"有效避免了不同文件间的变量\u002F函数命名冲突。",[205,380,381],{"id":381},"自定义命名空间",[183,383,385],{"className":210,"code":384,"language":212,"meta":189,"style":189},"@use \"variables\" as vars;\n\n.button {\n  background: vars.$primary-color;\n}\n",[36,386,387,405,409,417,431],{"__ignoreMap":189},[216,388,389,391,393,395,397,400,403],{"class":218,"line":219},[216,390,38],{"class":282},[216,392,286],{"class":285},[216,394,290],{"class":289},[216,396,293],{"class":285},[216,398,399],{"class":282}," as",[216,401,402],{"class":229}," vars",[216,404,245],{"class":233},[216,406,407],{"class":218,"line":226},[216,408,270],{"emptyLinePlaceholder":269},[216,410,411,413,415],{"class":218,"line":248},[216,412,311],{"class":310},[216,414,315],{"class":314},[216,416,318],{"class":233},[216,418,419,421,423,425,427,429],{"class":218,"line":266},[216,420,325],{"class":324},[216,422,234],{"class":233},[216,424,402],{"class":229},[216,426,311],{"class":233},[216,428,230],{"class":229},[216,430,245],{"class":233},[216,432,433],{"class":218,"line":273},[216,434,361],{"class":233},[205,436,438],{"id":437},"一次性导入所有成员到当前作用域不推荐","一次性导入所有成员到当前作用域（不推荐）",[183,440,442],{"className":210,"code":441,"language":212,"meta":189,"style":189},"@use \"variables\" as *; \u002F\u002F 所有成员直接暴露，无需前缀\n.button {\n  background: $primary-color; \u002F\u002F 命名冲突风险高\n}\n",[36,443,444,464,472,486],{"__ignoreMap":189},[216,445,446,448,450,452,454,456,459,461],{"class":218,"line":219},[216,447,38],{"class":282},[216,449,286],{"class":285},[216,451,290],{"class":289},[216,453,293],{"class":285},[216,455,399],{"class":282},[216,457,458],{"class":241}," *",[216,460,296],{"class":233},[216,462,463],{"class":222}," \u002F\u002F 所有成员直接暴露，无需前缀\n",[216,465,466,468,470],{"class":218,"line":226},[216,467,311],{"class":310},[216,469,315],{"class":314},[216,471,318],{"class":233},[216,473,474,476,478,481,483],{"class":218,"line":248},[216,475,325],{"class":324},[216,477,234],{"class":233},[216,479,480],{"class":229}," $primary-color",[216,482,296],{"class":233},[216,484,485],{"class":222}," \u002F\u002F 命名冲突风险高\n",[216,487,488],{"class":218,"line":266},[216,489,361],{"class":233},[27,491,492,495],{},[31,493,494],{},"不推荐","，因为会失去模块化的优势，依然可能导致全局污染。",[205,497,498],{"id":498},"同时加载多个模块",[183,500,502],{"className":210,"code":501,"language":212,"meta":189,"style":189},"@use \"variables\";\n@use \"mixins\";\n@use \"components\u002Fbutton\" as btn;\n\n.element {\n  @include btn.style; \u002F\u002F 调用 mixin\n  color: variables.$text-color;\n}\n",[36,503,504,516,529,547,551,560,578,594],{"__ignoreMap":189},[216,505,506,508,510,512,514],{"class":218,"line":219},[216,507,38],{"class":282},[216,509,286],{"class":285},[216,511,290],{"class":289},[216,513,293],{"class":285},[216,515,245],{"class":233},[216,517,518,520,522,525,527],{"class":218,"line":226},[216,519,38],{"class":282},[216,521,286],{"class":285},[216,523,524],{"class":289},"mixins",[216,526,293],{"class":285},[216,528,245],{"class":233},[216,530,531,533,535,538,540,542,545],{"class":218,"line":248},[216,532,38],{"class":282},[216,534,286],{"class":285},[216,536,537],{"class":289},"components\u002Fbutton",[216,539,293],{"class":285},[216,541,399],{"class":282},[216,543,544],{"class":229}," btn",[216,546,245],{"class":233},[216,548,549],{"class":218,"line":266},[216,550,270],{"emptyLinePlaceholder":269},[216,552,553,555,558],{"class":218,"line":273},[216,554,311],{"class":310},[216,556,557],{"class":314},"element",[216,559,318],{"class":233},[216,561,562,565,567,569,573,575],{"class":218,"line":279},[216,563,564],{"class":282},"  @include",[216,566,544],{"class":229},[216,568,311],{"class":233},[216,570,572],{"class":571},"sGLFI","style",[216,574,296],{"class":233},[216,576,577],{"class":222}," \u002F\u002F 调用 mixin\n",[216,579,580,583,585,587,589,592],{"class":218,"line":302},[216,581,582],{"class":324},"  color",[216,584,234],{"class":233},[216,586,330],{"class":229},[216,588,311],{"class":233},[216,590,591],{"class":229},"$text-color",[216,593,245],{"class":233},[216,595,596],{"class":218,"line":307},[216,597,361],{"class":233},[205,599,601,602,86],{"id":600},"配置模块变量需使用-default","配置模块变量（需使用 ",[36,603,604],{},"!default",[183,606,608],{"className":210,"code":607,"language":212,"meta":189,"style":189},"\u002F\u002F _theme.scss\n$primary: blue !default;\n$danger: red !default;\n\n\u002F\u002F main.scss\n@use \"theme\" with (\n  $primary: #2ecc71,\n  $danger: #e74c3c\n);\n",[36,609,610,615,630,644,648,652,669,685,697],{"__ignoreMap":189},[216,611,612],{"class":218,"line":219},[216,613,614],{"class":222},"\u002F\u002F _theme.scss\n",[216,616,617,620,622,625,628],{"class":218,"line":226},[216,618,619],{"class":229},"$primary",[216,621,234],{"class":233},[216,623,624],{"class":241}," blue",[216,626,627],{"class":260}," !default",[216,629,245],{"class":233},[216,631,632,635,637,640,642],{"class":218,"line":248},[216,633,634],{"class":229},"$danger",[216,636,234],{"class":233},[216,638,639],{"class":241}," red",[216,641,627],{"class":260},[216,643,245],{"class":233},[216,645,646],{"class":218,"line":266},[216,647,270],{"emptyLinePlaceholder":269},[216,649,650],{"class":218,"line":273},[216,651,276],{"class":222},[216,653,654,656,658,661,663,666],{"class":218,"line":279},[216,655,38],{"class":282},[216,657,286],{"class":285},[216,659,660],{"class":289},"theme",[216,662,293],{"class":285},[216,664,665],{"class":282}," with",[216,667,668],{"class":233}," (\n",[216,670,671,674,676,678,681],{"class":218,"line":302},[216,672,673],{"class":229},"  $primary",[216,675,234],{"class":233},[216,677,238],{"class":237},[216,679,680],{"class":241},"2ecc71",[216,682,684],{"class":683},"su5hD",",\n",[216,686,687,690,692,694],{"class":218,"line":307},[216,688,689],{"class":229},"  $danger",[216,691,234],{"class":233},[216,693,238],{"class":237},[216,695,696],{"class":241},"e74c3c\n",[216,698,699],{"class":218,"line":321},[216,700,701],{"class":233},");\n",[116,703,705,706,708],{"id":704},"_3-import已废弃","3. ",[36,707,42],{},"（已废弃）",[27,710,711,713,714,75],{},[36,712,42],{}," 是旧版 Sass 的模块加载方式，在现代项目中",[31,715,716],{},"不再推荐使用",[27,718,719,181],{},[31,720,721],{},"主要问题",[132,723,724,730,738,747],{},[135,725,726,729],{},[31,727,728],{},"全局污染","：所有变量、mixin、函数直接注入全局作用域，容易命名冲突。",[135,731,732,735,736,75],{},[31,733,734],{},"依赖关系不透明","：难以追踪某个变量来自哪个 ",[36,737,42],{},[135,739,740,743,744,746],{},[31,741,742],{},"重复加载","：多次 ",[36,745,42],{}," 同一文件会被多次编译，增加 CSS 体积。",[135,748,749,752,753,75],{},[31,750,751],{},"未来将被移除","：Sass 官方计划逐步淘汰 ",[36,754,42],{},[183,756,758],{"className":210,"code":757,"language":212,"meta":189,"style":189},"\u002F\u002F 旧写法（不推荐）\n@import \"variables\";\n@import \"mixins\";\n\n.button {\n  background: $primary-color; \u002F\u002F 不知道来自哪里\n}\n",[36,759,760,765,777,789,793,801,814],{"__ignoreMap":189},[216,761,762],{"class":218,"line":219},[216,763,764],{"class":222},"\u002F\u002F 旧写法（不推荐）\n",[216,766,767,769,771,773,775],{"class":218,"line":226},[216,768,42],{"class":282},[216,770,286],{"class":285},[216,772,290],{"class":289},[216,774,293],{"class":285},[216,776,245],{"class":233},[216,778,779,781,783,785,787],{"class":218,"line":248},[216,780,42],{"class":282},[216,782,286],{"class":285},[216,784,524],{"class":289},[216,786,293],{"class":285},[216,788,245],{"class":233},[216,790,791],{"class":218,"line":266},[216,792,270],{"emptyLinePlaceholder":269},[216,794,795,797,799],{"class":218,"line":273},[216,796,311],{"class":310},[216,798,315],{"class":314},[216,800,318],{"class":233},[216,802,803,805,807,809,811],{"class":218,"line":279},[216,804,325],{"class":324},[216,806,234],{"class":233},[216,808,480],{"class":229},[216,810,296],{"class":233},[216,812,813],{"class":222}," \u002F\u002F 不知道来自哪里\n",[216,815,816],{"class":218,"line":302},[216,817,361],{"class":233},[819,820,821],"blockquote",{},[27,822,823,826,827,829,830,75],{},[31,824,825],{},"⚠️ 注意","：如果你的项目仍在使用 ",[36,828,42],{},"，建议尽快迁移到 ",[36,831,38],{},[116,833,835,836,838,839],{"id":834},"_4-迁移建议import-use","4. 迁移建议：",[36,837,42],{}," → ",[36,840,38],{},[842,843,844,862],"table",{},[845,846,847],"thead",{},[848,849,850,857],"tr",{},[851,852,853,854,856],"th",{},"旧写法 (",[36,855,42],{},")",[851,858,859,860,856],{},"新写法 (",[36,861,38],{},[863,864,865,890,904,912,924],"tbody",{},[848,866,867,879],{},[868,869,870,873,876,877],"td",{},[36,871,872],{},"@import 'variables';",[874,875],"br",{},"直接使用 ",[36,878,619],{},[868,880,881,884,886,887],{},[36,882,883],{},"@use 'variables';",[874,885],{},"使用 ",[36,888,889],{},"variables.$primary",[848,891,892,898],{},[868,893,894,895,897],{},"多个 ",[36,896,42],{}," 顺序混乱",[868,899,900,901,903],{},"所有 ",[36,902,38],{}," 声明写在文件顶部，依赖清晰",[848,905,906,909],{},[868,907,908],{},"全局混合导致命名冲突",[868,910,911],{},"命名空间隔离，显式调用",[848,913,914,917],{},[868,915,916],{},"无法得知变量来源",[868,918,919,920,923],{},"一看 ",[36,921,922],{},"namespace.$var"," 就知道出处",[848,925,926,929],{},[868,927,928],{},"同一文件被多次导入，生成重复 CSS",[868,930,931],{},"模块仅加载一次，避免重复",[27,933,934,181],{},[31,935,936],{},"迁移步骤",[938,939,940,947,955,961,964],"ol",{},[135,941,942,943,946],{},"将所有局部文件重命名为 ",[36,944,945],{},"_xxx.scss","（如果尚未命名）。",[135,948,949,950,952,953,75],{},"在主入口文件中，将所有 ",[36,951,42],{}," 替换为 ",[36,954,38],{},[135,956,957,958,960],{},"为每个 ",[36,959,38],{}," 模块添加命名空间前缀（或自定义别名）。",[135,962,963],{},"检查变量、Mixin、函数调用，加上对应的命名空间。",[135,965,966,967,969],{},"移除 ",[36,968,42],{}," 语句。",[116,971,973],{"id":972},"_5-模块化总结","5. 模块化总结",[842,975,976,993],{},[845,977,978],{},[848,979,980,983,988],{},[851,981,982],{},"特性",[851,984,985,987],{},[36,986,42],{},"（旧）",[851,989,990,992],{},[36,991,38],{},"（新）",[863,994,995,1005,1016,1026,1041],{},[848,996,997,1000,1002],{},[868,998,999],{},"作用域",[868,1001,728],{},[868,1003,1004],{},"命名空间隔离",[848,1006,1007,1010,1013],{},[868,1008,1009],{},"依赖清晰度",[868,1011,1012],{},"低（不透明）",[868,1014,1015],{},"高（显式引用）",[848,1017,1018,1020,1023],{},[868,1019,742],{},[868,1021,1022],{},"可能重复输出",[868,1024,1025],{},"模块只加载一次",[848,1027,1028,1031,1034],{},[868,1029,1030],{},"配置变量",[868,1032,1033],{},"无原生支持",[868,1035,1036,1037,1040],{},"支持 ",[36,1038,1039],{},"with"," 配置",[848,1042,1043,1046,1049],{},[868,1044,1045],{},"官方推荐",[868,1047,1048],{},"❌ 已废弃",[868,1050,1051],{},"✅ 强烈推荐",[27,1053,1054,1057,1058,1061,1062,1064,1065,1068,1069,1071,1072,75],{},[31,1055,1056],{},"最佳实践","：使用 ",[36,1059,1060],{},"_partials.scss"," 组织模块；在入口文件顶部用 ",[36,1063,38],{}," 加载所有依赖；使用默认命名空间（文件名）或自定义简写别名；避免使用 ",[36,1066,1067],{},"@use ... as *","，除非完全确信不会发生命名冲突；逐步将旧项目中的 ",[36,1070,42],{}," 迁移到 ",[36,1073,38],{},[77,1075,1077],{"id":1076},"二内置模块与函数","二、内置模块与函数",[27,1079,1080,1081,1084,1085,1087],{},"Dart Sass 自 1.23.0 起提供以 ",[36,1082,1083],{},"sass:"," 为前缀的内置模块，通过 ",[36,1086,38],{}," 加载，用于颜色、字符串、列表、Map、数学等运算。",[116,1089,1091],{"id":1090},"_1-内置模块列表","1. 内置模块列表",[842,1093,1094,1104],{},[845,1095,1096],{},[848,1097,1098,1101],{},[851,1099,1100],{},"模块",[851,1102,1103],{},"用途",[863,1105,1106,1116,1126,1136,1146,1156,1166],{},[848,1107,1108,1113],{},[868,1109,1110],{},[36,1111,1112],{},"sass:color",[868,1114,1115],{},"颜色操作（生成、调整、混合颜色）",[848,1117,1118,1123],{},[868,1119,1120],{},[36,1121,1122],{},"sass:string",[868,1124,1125],{},"字符串操作（合并、搜索、分割）",[848,1127,1128,1133],{},[868,1129,1130],{},[36,1131,1132],{},"sass:list",[868,1134,1135],{},"列表操作（访问和修改列表中的值）",[848,1137,1138,1143],{},[868,1139,1140],{},[36,1141,1142],{},"sass:map",[868,1144,1145],{},"Map 映射操作（查找键值对等）",[848,1147,1148,1153],{},[868,1149,1150],{},[36,1151,1152],{},"sass:math",[868,1154,1155],{},"数学运算（数值计算）",[848,1157,1158,1163],{},[868,1159,1160],{},[36,1161,1162],{},"sass:meta",[868,1164,1165],{},"内省操作（检查 Sass 内部机制）",[848,1167,1168,1173],{},[868,1169,1170],{},[36,1171,1172],{},"sass:selector",[868,1174,1175],{},"选择器操作",[819,1177,1178],{},[27,1179,1180,1183,1184,1187],{},[31,1181,1182],{},"注意","：传统全局函数（如 ",[36,1185,1186],{},"lighten()","）仍可全局调用，但推荐使用模块函数以获得更明确的命名空间和更好的可维护性。",[116,1189,1191],{"id":1190},"_2-使用模块函数","2. 使用模块函数",[27,1193,1194,1195,1197,1198,1201],{},"需要通过 ",[36,1196,38],{}," 导入模块，然后使用 ",[36,1199,1200],{},"模块名.函数名()"," 的方式调用。",[183,1203,1205],{"className":210,"code":1204,"language":212,"meta":189,"style":189},"@use \"sass:math\";\n@use \"sass:color\";\n\n$width: 960px;\n$columns: 12;\n\n.col {\n  \u002F\u002F 使用 math.div() 代替已过时的 `\u002F` 除法\n  width: math.div($width, $columns); \u002F\u002F 80px\n}\n\n.btn {\n  background: #3498db;\n  &:hover {\n    \u002F\u002F 使用 color.scale() 调整亮度\n    background: color.scale(#3498db, $lightness: 20%);\n  }\n}\n",[36,1206,1207,1219,1231,1235,1249,1261,1265,1274,1279,1312,1316,1320,1330,1343,1358,1364,1403,1409],{"__ignoreMap":189},[216,1208,1209,1211,1213,1215,1217],{"class":218,"line":219},[216,1210,38],{"class":282},[216,1212,286],{"class":285},[216,1214,1152],{"class":289},[216,1216,293],{"class":285},[216,1218,245],{"class":233},[216,1220,1221,1223,1225,1227,1229],{"class":218,"line":226},[216,1222,38],{"class":282},[216,1224,286],{"class":285},[216,1226,1112],{"class":289},[216,1228,293],{"class":285},[216,1230,245],{"class":233},[216,1232,1233],{"class":218,"line":248},[216,1234,270],{"emptyLinePlaceholder":269},[216,1236,1237,1240,1242,1245,1247],{"class":218,"line":266},[216,1238,1239],{"class":229},"$width",[216,1241,234],{"class":233},[216,1243,1244],{"class":256}," 960",[216,1246,261],{"class":260},[216,1248,245],{"class":233},[216,1250,1251,1254,1256,1259],{"class":218,"line":273},[216,1252,1253],{"class":229},"$columns",[216,1255,234],{"class":233},[216,1257,1258],{"class":256}," 12",[216,1260,245],{"class":233},[216,1262,1263],{"class":218,"line":279},[216,1264,270],{"emptyLinePlaceholder":269},[216,1266,1267,1269,1272],{"class":218,"line":302},[216,1268,311],{"class":310},[216,1270,1271],{"class":314},"col",[216,1273,318],{"class":233},[216,1275,1276],{"class":218,"line":307},[216,1277,1278],{"class":222},"  \u002F\u002F 使用 math.div() 代替已过时的 `\u002F` 除法\n",[216,1280,1281,1284,1286,1289,1291,1295,1298,1300,1303,1306,1309],{"class":218,"line":321},[216,1282,1283],{"class":324},"  width",[216,1285,234],{"class":233},[216,1287,1288],{"class":229}," math",[216,1290,311],{"class":233},[216,1292,1294],{"class":1293},"sptTA","div",[216,1296,1297],{"class":233},"(",[216,1299,1239],{"class":229},[216,1301,1302],{"class":233},",",[216,1304,1305],{"class":229}," $columns",[216,1307,1308],{"class":233},");",[216,1310,1311],{"class":222}," \u002F\u002F 80px\n",[216,1313,1314],{"class":218,"line":342},[216,1315,361],{"class":233},[216,1317,1318],{"class":218,"line":358},[216,1319,270],{"emptyLinePlaceholder":269},[216,1321,1323,1325,1328],{"class":218,"line":1322},12,[216,1324,311],{"class":310},[216,1326,1327],{"class":314},"btn",[216,1329,318],{"class":233},[216,1331,1333,1335,1337,1339,1341],{"class":218,"line":1332},13,[216,1334,325],{"class":324},[216,1336,234],{"class":233},[216,1338,238],{"class":237},[216,1340,242],{"class":241},[216,1342,245],{"class":233},[216,1344,1346,1350,1352,1356],{"class":218,"line":1345},14,[216,1347,1349],{"class":1348},"s83vy","  &",[216,1351,234],{"class":310},[216,1353,1355],{"class":1354},"s9AJx","hover",[216,1357,318],{"class":233},[216,1359,1361],{"class":218,"line":1360},15,[216,1362,1363],{"class":222},"    \u002F\u002F 使用 color.scale() 调整亮度\n",[216,1365,1367,1370,1372,1375,1377,1380,1382,1385,1387,1389,1392,1395,1398,1401],{"class":218,"line":1366},16,[216,1368,1369],{"class":324},"    background",[216,1371,234],{"class":233},[216,1373,1374],{"class":229}," color",[216,1376,311],{"class":233},[216,1378,1379],{"class":1293},"scale",[216,1381,1297],{"class":233},[216,1383,1384],{"class":237},"#",[216,1386,242],{"class":241},[216,1388,1302],{"class":233},[216,1390,1391],{"class":229}," $lightness",[216,1393,234],{"class":1394},"s99_P",[216,1396,1397],{"class":256}," 20",[216,1399,1400],{"class":260},"%",[216,1402,701],{"class":233},[216,1404,1406],{"class":218,"line":1405},17,[216,1407,1408],{"class":233},"  }\n",[216,1410,1412],{"class":218,"line":1411},18,[216,1413,361],{"class":233},[27,1415,1416,1419],{},[31,1417,1418],{},"别名使用","（简化命名）：",[183,1421,1423],{"className":210,"code":1422,"language":212,"meta":189,"style":189},"@use \"sass:math\" as math;\n@use \"sass:color\" as c;\n\n.col {\n  width: math.div(960px, 12);\n}\n.btn:hover {\n  background: c.scale(#3498db, $lightness: 20%);\n}\n",[36,1424,1425,1441,1458,1462,1470,1495,1499,1511,1541],{"__ignoreMap":189},[216,1426,1427,1429,1431,1433,1435,1437,1439],{"class":218,"line":219},[216,1428,38],{"class":282},[216,1430,286],{"class":285},[216,1432,1152],{"class":289},[216,1434,293],{"class":285},[216,1436,399],{"class":282},[216,1438,1288],{"class":229},[216,1440,245],{"class":233},[216,1442,1443,1445,1447,1449,1451,1453,1456],{"class":218,"line":226},[216,1444,38],{"class":282},[216,1446,286],{"class":285},[216,1448,1112],{"class":289},[216,1450,293],{"class":285},[216,1452,399],{"class":282},[216,1454,1455],{"class":229}," c",[216,1457,245],{"class":233},[216,1459,1460],{"class":218,"line":248},[216,1461,270],{"emptyLinePlaceholder":269},[216,1463,1464,1466,1468],{"class":218,"line":266},[216,1465,311],{"class":310},[216,1467,1271],{"class":314},[216,1469,318],{"class":233},[216,1471,1472,1474,1476,1478,1480,1482,1484,1487,1489,1491,1493],{"class":218,"line":273},[216,1473,1283],{"class":324},[216,1475,234],{"class":233},[216,1477,1288],{"class":229},[216,1479,311],{"class":233},[216,1481,1294],{"class":1293},[216,1483,1297],{"class":233},[216,1485,1486],{"class":256},"960",[216,1488,261],{"class":260},[216,1490,1302],{"class":233},[216,1492,1258],{"class":256},[216,1494,701],{"class":233},[216,1496,1497],{"class":218,"line":279},[216,1498,361],{"class":233},[216,1500,1501,1503,1505,1507,1509],{"class":218,"line":302},[216,1502,311],{"class":310},[216,1504,1327],{"class":314},[216,1506,234],{"class":310},[216,1508,1355],{"class":1354},[216,1510,318],{"class":233},[216,1512,1513,1515,1517,1519,1521,1523,1525,1527,1529,1531,1533,1535,1537,1539],{"class":218,"line":307},[216,1514,325],{"class":324},[216,1516,234],{"class":233},[216,1518,1455],{"class":229},[216,1520,311],{"class":233},[216,1522,1379],{"class":1293},[216,1524,1297],{"class":233},[216,1526,1384],{"class":237},[216,1528,242],{"class":241},[216,1530,1302],{"class":233},[216,1532,1391],{"class":229},[216,1534,234],{"class":1394},[216,1536,1397],{"class":256},[216,1538,1400],{"class":260},[216,1540,701],{"class":233},[216,1542,1543],{"class":218,"line":321},[216,1544,361],{"class":233},[116,1546,1548],{"id":1547},"_3-常用内置函数速查","3. 常用内置函数速查",[205,1550,1552,1553,86],{"id":1551},"字符串函数sassstring","字符串函数（",[36,1554,1122],{},[842,1556,1557,1570],{},[845,1558,1559],{},[848,1560,1561,1564,1567],{},[851,1562,1563],{},"函数",[851,1565,1566],{},"说明",[851,1568,1569],{},"示例",[863,1571,1572,1590,1608,1626],{},[848,1573,1574,1579,1582],{},[868,1575,1576],{},[36,1577,1578],{},"string.unquote($string)",[868,1580,1581],{},"删除字符串两端的引号",[868,1583,1584,838,1587],{},[36,1585,1586],{},"unquote(\"Helvetica\")",[36,1588,1589],{},"Helvetica",[848,1591,1592,1597,1600],{},[868,1593,1594],{},[36,1595,1596],{},"string.quote($string)",[868,1598,1599],{},"添加引号",[868,1601,1602,838,1605],{},[36,1603,1604],{},"quote(Helvetica)",[36,1606,1607],{},"\"Helvetica\"",[848,1609,1610,1615,1618],{},[868,1611,1612],{},[36,1613,1614],{},"string.length($string)",[868,1616,1617],{},"返回字符串长度",[868,1619,1620,838,1623],{},[36,1621,1622],{},"length(\"foo\")",[36,1624,1625],{},"3",[848,1627,1628,1633,1636],{},[868,1629,1630],{},[36,1631,1632],{},"string.slice($str, $start, $end)",[868,1634,1635],{},"截取子字符串",[868,1637,1638,838,1641],{},[36,1639,1640],{},"slice(\"hello\", 2, 4)",[36,1642,1643],{},"\"ell\"",[205,1645,1647,1648,86],{"id":1646},"数值函数sassmath","数值函数（",[36,1649,1152],{},[842,1651,1652,1662],{},[845,1653,1654],{},[848,1655,1656,1658,1660],{},[851,1657,1563],{},[851,1659,1566],{},[851,1661,1569],{},[863,1663,1664,1682,1700,1718,1735,1755],{},[848,1665,1666,1671,1674],{},[868,1667,1668],{},[36,1669,1670],{},"math.percentage($number)",[868,1672,1673],{},"将无单位数转为百分比",[868,1675,1676,838,1679],{},[36,1677,1678],{},"percentage(0.5)",[36,1680,1681],{},"50%",[848,1683,1684,1689,1692],{},[868,1685,1686],{},[36,1687,1688],{},"math.round($number)",[868,1690,1691],{},"四舍五入取整",[868,1693,1694,838,1697],{},[36,1695,1696],{},"round(12.8)",[36,1698,1699],{},"13",[848,1701,1702,1707,1710],{},[868,1703,1704],{},[36,1705,1706],{},"math.floor($number)",[868,1708,1709],{},"向下取整",[868,1711,1712,838,1715],{},[36,1713,1714],{},"floor(12.8)",[36,1716,1717],{},"12",[848,1719,1720,1725,1728],{},[868,1721,1722],{},[36,1723,1724],{},"math.ceil($number)",[868,1726,1727],{},"向上取整",[868,1729,1730,838,1733],{},[36,1731,1732],{},"ceil(12.1)",[36,1734,1699],{},[848,1736,1737,1742,1747],{},[868,1738,1739],{},[36,1740,1741],{},"math.div($a, $b)",[868,1743,1744,1745,86],{},"除法运算（替代已过时的 ",[36,1746,54],{},[868,1748,1749,838,1752],{},[36,1750,1751],{},"div(10px, 2)",[36,1753,1754],{},"5px",[848,1756,1757,1762,1765],{},[868,1758,1759],{},[36,1760,1761],{},"math.random()",[868,1763,1764],{},"生成随机数（0~1）",[868,1766,1767,838,1770],{},[36,1768,1769],{},"random()",[36,1771,1772],{},"0.456",[205,1774,1776,1777,86],{"id":1775},"颜色函数sasscolor","颜色函数（",[36,1778,1112],{},[842,1780,1781,1791],{},[845,1782,1783],{},[848,1784,1785,1787,1789],{},[851,1786,1563],{},[851,1788,1566],{},[851,1790,1569],{},[863,1792,1793,1811,1829,1844,1859],{},[848,1794,1795,1800,1803],{},[868,1796,1797],{},[36,1798,1799],{},"color.rgb($r, $g, $b)",[868,1801,1802],{},"通过 RGB 创建颜色",[868,1804,1805,838,1808],{},[36,1806,1807],{},"rgb(52, 152, 219)",[36,1809,1810],{},"#3498db",[848,1812,1813,1818,1821],{},[868,1814,1815],{},[36,1816,1817],{},"color.mix($c1, $c2, $weight)",[868,1819,1820],{},"混合两种颜色（weight 为第一色的占比）",[868,1822,1823,838,1826],{},[36,1824,1825],{},"mix(red, blue, 50%)",[36,1827,1828],{},"#800080",[848,1830,1831,1836,1839],{},[868,1832,1833],{},[36,1834,1835],{},"color.adjust($color, $lightness: 10%)",[868,1837,1838],{},"调整颜色的 HSL 分量",[868,1840,1841],{},[36,1842,1843],{},"adjust(#3498db, $lightness: 10%)",[848,1845,1846,1851,1854],{},[868,1847,1848],{},[36,1849,1850],{},"color.scale($color, $lightness: 20%)",[868,1852,1853],{},"按比例缩放分量",[868,1855,1856],{},[36,1857,1858],{},"scale(#3498db, $lightness: 20%)",[848,1860,1861,1866,1869],{},[868,1862,1863],{},[36,1864,1865],{},"color.complement($color)",[868,1867,1868],{},"返回互补色",[868,1870,1871,838,1874],{},[36,1872,1873],{},"complement(#3498db)",[36,1875,1876],{},"#db7f34",[819,1878,1879],{},[27,1880,1881,1884,1885,147,1888,1891,1892,39,1894,1897],{},[31,1882,1883],{},"推荐","：对于品牌色系微调，优先使用 ",[36,1886,1887],{},"color.adjust()",[36,1889,1890],{},"color.scale()","，而非已过时的 ",[36,1893,1186],{},[36,1895,1896],{},"darken()","，因为后者在 HSL 空间中简单增减明暗可能产生意料之外的色调偏移。",[205,1899,1901,1902,86],{"id":1900},"列表函数sasslist","列表函数（",[36,1903,1132],{},[842,1905,1906,1916],{},[845,1907,1908],{},[848,1909,1910,1912,1914],{},[851,1911,1563],{},[851,1913,1566],{},[851,1915,1569],{},[863,1917,1918,1935,1953,1971],{},[848,1919,1920,1925,1928],{},[868,1921,1922],{},[36,1923,1924],{},"list.length($list)",[868,1926,1927],{},"返回列表长度",[868,1929,1930,838,1933],{},[36,1931,1932],{},"length(10px 20px 30px)",[36,1934,1625],{},[848,1936,1937,1942,1945],{},[868,1938,1939],{},[36,1940,1941],{},"list.nth($list, $n)",[868,1943,1944],{},"获取第 n 项（从 1 开始）",[868,1946,1947,838,1950],{},[36,1948,1949],{},"nth(10px 20px 30px, 2)",[36,1951,1952],{},"20px",[848,1954,1955,1960,1963],{},[868,1956,1957],{},[36,1958,1959],{},"list.append($list, $val, $separator)",[868,1961,1962],{},"向列表末尾追加元素",[868,1964,1965,838,1968],{},[36,1966,1967],{},"append((10px, 20px), 30px)",[36,1969,1970],{},"10px, 20px, 30px",[848,1972,1973,1978,1981],{},[868,1974,1975],{},[36,1976,1977],{},"list.join($list1, $list2)",[868,1979,1980],{},"合并两个列表",[868,1982,1983,838,1986],{},[36,1984,1985],{},"join((10px, 20px), (30px))",[36,1987,1988],{},"10px 20px 30px",[205,1990,1992,1993,86],{"id":1991},"map-函数sassmap","Map 函数（",[36,1994,1142],{},[842,1996,1997,2007],{},[845,1998,1999],{},[848,2000,2001,2003,2005],{},[851,2002,1563],{},[851,2004,1566],{},[851,2006,1569],{},[863,2008,2009,2027,2045,2063,2081],{},[848,2010,2011,2016,2019],{},[868,2012,2013],{},[36,2014,2015],{},"map.get($map, $key)",[868,2017,2018],{},"获取 Map 中指定键的值",[868,2020,2021,838,2024],{},[36,2022,2023],{},"get((primary: blue), primary)",[36,2025,2026],{},"blue",[848,2028,2029,2034,2037],{},[868,2030,2031],{},[36,2032,2033],{},"map.has-key($map, $key)",[868,2035,2036],{},"判断 Map 是否包含某键",[868,2038,2039,838,2042],{},[36,2040,2041],{},"has-key((a:1), b)",[36,2043,2044],{},"false",[848,2046,2047,2052,2055],{},[868,2048,2049],{},[36,2050,2051],{},"map.merge($map1, $map2)",[868,2053,2054],{},"合并两个 Map",[868,2056,2057,838,2060],{},[36,2058,2059],{},"merge((a:1), (b:2))",[36,2061,2062],{},"(a:1, b:2)",[848,2064,2065,2070,2073],{},[868,2066,2067],{},[36,2068,2069],{},"map.keys($map)",[868,2071,2072],{},"返回 Map 的所有键组成的列表",[868,2074,2075,838,2078],{},[36,2076,2077],{},"keys((a:1, b:2))",[36,2079,2080],{},"a, b",[848,2082,2083,2088,2091],{},[868,2084,2085],{},[36,2086,2087],{},"map.values($map)",[868,2089,2090],{},"返回 Map 的所有值组成的列表",[868,2092,2093,838,2096],{},[36,2094,2095],{},"values((a:1, b:2))",[36,2097,2098],{},"1, 2",[205,2100,2102,2103,86],{"id":2101},"内省函数sassmeta","内省函数（",[36,2104,1162],{},[842,2106,2107,2117],{},[845,2108,2109],{},[848,2110,2111,2113,2115],{},[851,2112,1563],{},[851,2114,1566],{},[851,2116,1569],{},[863,2118,2119,2137,2154],{},[848,2120,2121,2126,2129],{},[868,2122,2123],{},[36,2124,2125],{},"meta.type-of($value)",[868,2127,2128],{},"返回值的类型",[868,2130,2131,838,2134],{},[36,2132,2133],{},"type-of(10px)",[36,2135,2136],{},"number",[848,2138,2139,2144,2147],{},[868,2140,2141],{},[36,2142,2143],{},"meta.unit($number)",[868,2145,2146],{},"返回数值的单位",[868,2148,2149,838,2152],{},[36,2150,2151],{},"unit(10px)",[36,2153,261],{},[848,2155,2156,2161,2164],{},[868,2157,2158],{},[36,2159,2160],{},"meta.global-variable-exists($name)",[868,2162,2163],{},"检查全局变量是否存在",[868,2165,2166],{},[36,2167,2168],{},"variable-exists(\"theme\")",[116,2170,2172],{"id":2171},"_4-自定义函数","4. 自定义函数",[27,2174,886,2175,2178],{},[36,2176,2177],{},"@function"," 可以创建自己的 Sass 函数，用于封装复杂的计算逻辑。",[183,2180,2182],{"className":210,"code":2181,"language":212,"meta":189,"style":189},"@use \"sass:math\";\n\n\u002F\u002F 将 px 转换为 rem\n@function px-to-rem($px, $base: 16px) {\n  @return math.div($px, $base) * 1rem;\n}\n\nh1 {\n  font-size: px-to-rem(32px); \u002F\u002F 输出 2rem\n}\n\n\u002F\u002F 带条件判断的复杂函数\n@function opposite-color($color) {\n  @if lightness($color) > 50% {\n    @return black;\n  } @else {\n    @return white;\n  }\n}\n",[36,2183,2184,2196,2200,2205,2233,2265,2269,2273,2279,2300,2304,2308,2313,2329,2353,2363,2374,2383,2387],{"__ignoreMap":189},[216,2185,2186,2188,2190,2192,2194],{"class":218,"line":219},[216,2187,38],{"class":282},[216,2189,286],{"class":285},[216,2191,1152],{"class":289},[216,2193,293],{"class":285},[216,2195,245],{"class":233},[216,2197,2198],{"class":218,"line":226},[216,2199,270],{"emptyLinePlaceholder":269},[216,2201,2202],{"class":218,"line":248},[216,2203,2204],{"class":222},"\u002F\u002F 将 px 转换为 rem\n",[216,2206,2207,2209,2212,2214,2217,2219,2222,2224,2227,2229,2231],{"class":218,"line":266},[216,2208,2177],{"class":282},[216,2210,2211],{"class":1293}," px-to-rem",[216,2213,1297],{"class":233},[216,2215,2216],{"class":229},"$px",[216,2218,1302],{"class":233},[216,2220,2221],{"class":229}," $base",[216,2223,234],{"class":1394},[216,2225,2226],{"class":256}," 16",[216,2228,261],{"class":260},[216,2230,856],{"class":233},[216,2232,318],{"class":233},[216,2234,2235,2238,2240,2242,2244,2246,2248,2250,2252,2254,2257,2260,2263],{"class":218,"line":273},[216,2236,2237],{"class":282},"  @return",[216,2239,1288],{"class":229},[216,2241,311],{"class":233},[216,2243,1294],{"class":1293},[216,2245,1297],{"class":233},[216,2247,2216],{"class":229},[216,2249,1302],{"class":233},[216,2251,2221],{"class":229},[216,2253,856],{"class":233},[216,2255,458],{"class":2256},"smGrS",[216,2258,2259],{"class":256}," 1",[216,2261,2262],{"class":260},"rem",[216,2264,245],{"class":233},[216,2266,2267],{"class":218,"line":279},[216,2268,361],{"class":233},[216,2270,2271],{"class":218,"line":302},[216,2272,270],{"emptyLinePlaceholder":269},[216,2274,2275,2277],{"class":218,"line":307},[216,2276,23],{"class":1348},[216,2278,318],{"class":233},[216,2280,2281,2284,2286,2288,2290,2293,2295,2297],{"class":218,"line":321},[216,2282,2283],{"class":324},"  font-size",[216,2285,234],{"class":233},[216,2287,2211],{"class":1293},[216,2289,1297],{"class":233},[216,2291,2292],{"class":256},"32",[216,2294,261],{"class":260},[216,2296,1308],{"class":233},[216,2298,2299],{"class":222}," \u002F\u002F 输出 2rem\n",[216,2301,2302],{"class":218,"line":342},[216,2303,361],{"class":233},[216,2305,2306],{"class":218,"line":358},[216,2307,270],{"emptyLinePlaceholder":269},[216,2309,2310],{"class":218,"line":1322},[216,2311,2312],{"class":222},"\u002F\u002F 带条件判断的复杂函数\n",[216,2314,2315,2317,2320,2322,2325,2327],{"class":218,"line":1332},[216,2316,2177],{"class":282},[216,2318,2319],{"class":1293}," opposite-color",[216,2321,1297],{"class":233},[216,2323,2324],{"class":229},"$color",[216,2326,856],{"class":233},[216,2328,318],{"class":233},[216,2330,2331,2334,2337,2339,2341,2343,2346,2349,2351],{"class":218,"line":1345},[216,2332,2333],{"class":282},"  @if",[216,2335,2336],{"class":1293}," lightness",[216,2338,1297],{"class":233},[216,2340,2324],{"class":229},[216,2342,856],{"class":233},[216,2344,2345],{"class":2256}," >",[216,2347,2348],{"class":256}," 50",[216,2350,1400],{"class":260},[216,2352,318],{"class":233},[216,2354,2355,2358,2361],{"class":218,"line":1360},[216,2356,2357],{"class":282},"    @return",[216,2359,2360],{"class":241}," black",[216,2362,245],{"class":233},[216,2364,2365,2368,2371],{"class":218,"line":1366},[216,2366,2367],{"class":233},"  }",[216,2369,2370],{"class":282}," @else ",[216,2372,2373],{"class":233},"{\n",[216,2375,2376,2378,2381],{"class":218,"line":1405},[216,2377,2357],{"class":282},[216,2379,2380],{"class":241}," white",[216,2382,245],{"class":233},[216,2384,2385],{"class":218,"line":1411},[216,2386,1408],{"class":233},[216,2388,2390],{"class":218,"line":2389},19,[216,2391,361],{"class":233},[27,2393,2394,181],{},[31,2395,2396],{},"自定义函数注意事项",[132,2398,2399,2406,2412,2415],{},[135,2400,2401,2402,2405],{},"函数名遵循 Sass 命名规则（可包含 ",[36,2403,2404],{},"-","，不强制前缀）。",[135,2407,886,2408,2411],{},[36,2409,2410],{},"@return"," 返回值。",[135,2413,2414],{},"可以调用其他内置或自定义函数。",[135,2416,2417,2418,47,2420,2422],{},"函数内可以使用控制指令（",[36,2419,53],{},[36,2421,60],{}," 等，见下一节）。",[116,2424,2426],{"id":2425},"_5-模块导入最佳实践","5. 模块导入最佳实践",[132,2428,2429,2435,2445,2458],{},[135,2430,2431,2434],{},[31,2432,2433],{},"按需导入","：只导入需要使用的模块，避免全局命名污染。",[135,2436,2437,2440,2441,2444],{},[31,2438,2439],{},"使用命名空间","：通过 ",[36,2442,2443],{},"@use \"sass:math\" as math"," 使代码可读性更强。",[135,2446,2447,2450,2451,2454,2455,2457],{},[31,2448,2449],{},"避免与旧全局函数混用","：例如同时使用 ",[36,2452,2453],{},"math.div()"," 和已过时的 ",[36,2456,54],{}," 除法可能导致混乱。",[135,2459,2460,2462,2463,2465,2466,2469],{},[31,2461,1030],{},"：一些模块允许使用 ",[36,2464,1039],{}," 配置，例如 ",[36,2467,2468],{},"@use \"sass:color\" with ($hue: 120);","（部分模块支持）。",[77,2471,2473],{"id":2472},"三控制指令","三、控制指令",[27,2475,2476,2477,47,2479,47,2481,47,2483,2485],{},"控制指令（",[36,2478,53],{},[36,2480,57],{},[36,2482,60],{},[36,2484,63],{},"）用于在样式表中做条件判断与循环，生成重复或按数据驱动的规则。",[116,2487,2489,2490,39,2492,39,2495],{"id":2488},"_1-if-else-if-else","1. ",[36,2491,53],{},[36,2493,2494],{},"@else if",[36,2496,2497],{},"@else",[27,2499,2500],{},"根据条件输出不同的样式块，类似编程语言中的条件语句。",[183,2502,2504],{"className":210,"code":2503,"language":212,"meta":189,"style":189},"$theme: \"dark\";\n\n.button {\n  @if $theme == \"dark\" {\n    background: black;\n    color: white;\n  } @else if $theme == \"light\" {\n    background: white;\n    color: black;\n  } @else {\n    background: gray;\n  }\n}\n",[36,2505,2506,2522,2526,2534,2552,2562,2573,2593,2603,2613,2621,2632,2636],{"__ignoreMap":189},[216,2507,2508,2511,2513,2515,2518,2520],{"class":218,"line":219},[216,2509,2510],{"class":229},"$theme",[216,2512,234],{"class":233},[216,2514,286],{"class":285},[216,2516,2517],{"class":289},"dark",[216,2519,293],{"class":285},[216,2521,245],{"class":233},[216,2523,2524],{"class":218,"line":226},[216,2525,270],{"emptyLinePlaceholder":269},[216,2527,2528,2530,2532],{"class":218,"line":248},[216,2529,311],{"class":310},[216,2531,315],{"class":314},[216,2533,318],{"class":233},[216,2535,2536,2538,2541,2544,2546,2548,2550],{"class":218,"line":266},[216,2537,2333],{"class":282},[216,2539,2540],{"class":229}," $theme",[216,2542,2543],{"class":2256}," ==",[216,2545,286],{"class":285},[216,2547,2517],{"class":289},[216,2549,293],{"class":285},[216,2551,318],{"class":233},[216,2553,2554,2556,2558,2560],{"class":218,"line":273},[216,2555,1369],{"class":324},[216,2557,234],{"class":233},[216,2559,2360],{"class":241},[216,2561,245],{"class":233},[216,2563,2564,2567,2569,2571],{"class":218,"line":279},[216,2565,2566],{"class":324},"    color",[216,2568,234],{"class":233},[216,2570,2380],{"class":241},[216,2572,245],{"class":233},[216,2574,2575,2577,2580,2582,2584,2586,2589,2591],{"class":218,"line":302},[216,2576,2367],{"class":233},[216,2578,2579],{"class":282}," @else if",[216,2581,2540],{"class":229},[216,2583,2543],{"class":2256},[216,2585,286],{"class":285},[216,2587,2588],{"class":289},"light",[216,2590,293],{"class":285},[216,2592,318],{"class":233},[216,2594,2595,2597,2599,2601],{"class":218,"line":307},[216,2596,1369],{"class":324},[216,2598,234],{"class":233},[216,2600,2380],{"class":241},[216,2602,245],{"class":233},[216,2604,2605,2607,2609,2611],{"class":218,"line":321},[216,2606,2566],{"class":324},[216,2608,234],{"class":233},[216,2610,2360],{"class":241},[216,2612,245],{"class":233},[216,2614,2615,2617,2619],{"class":218,"line":342},[216,2616,2367],{"class":233},[216,2618,2370],{"class":282},[216,2620,2373],{"class":233},[216,2622,2623,2625,2627,2630],{"class":218,"line":358},[216,2624,1369],{"class":324},[216,2626,234],{"class":233},[216,2628,2629],{"class":241}," gray",[216,2631,245],{"class":233},[216,2633,2634],{"class":218,"line":1322},[216,2635,1408],{"class":233},[216,2637,2638],{"class":218,"line":1332},[216,2639,361],{"class":233},[27,2641,2642,2645,2646,2649],{},[31,2643,2644],{},"编译结果","（当 ",[36,2647,2648],{},"$theme: \"dark\""," 时）：",[183,2651,2654],{"className":2652,"code":2653,"language":12,"meta":189,"style":189},"language-css shiki shiki-themes material-theme-lighter github-light github-dark",".button {\n  background: black;\n  color: white;\n}\n",[36,2655,2656,2664,2674,2684],{"__ignoreMap":189},[216,2657,2658,2660,2662],{"class":218,"line":219},[216,2659,311],{"class":310},[216,2661,315],{"class":314},[216,2663,318],{"class":233},[216,2665,2666,2668,2670,2672],{"class":218,"line":226},[216,2667,325],{"class":324},[216,2669,234],{"class":233},[216,2671,2360],{"class":241},[216,2673,245],{"class":233},[216,2675,2676,2678,2680,2682],{"class":218,"line":248},[216,2677,582],{"class":324},[216,2679,234],{"class":233},[216,2681,2380],{"class":241},[216,2683,245],{"class":233},[216,2685,2686],{"class":218,"line":266},[216,2687,361],{"class":233},[27,2689,2690,2693],{},[31,2691,2692],{},"适用场景","：主题切换、响应式断点选择、不同环境样式差异。",[116,2695,195,2697,2699],{"id":2696},"_2-for-循环",[36,2698,57],{}," 循环",[27,2701,2702,2704],{},[36,2703,57],{}," 循环有两种语法形式：",[132,2706,2707,2715],{},[135,2708,2709,2714],{},[31,2710,2711],{},[36,2712,2713],{},"through","：包含终止值（包头包尾）",[135,2716,2717,2722],{},[31,2718,2719],{},[36,2720,2721],{},"to","：不包含终止值（包头不包尾）",[183,2724,2726],{"className":210,"code":2725,"language":212,"meta":189,"style":189},"\u002F\u002F through：从 1 到 4（包含 4）\n@for $i from 1 through 4 {\n  .col-#{$i} {\n    width: 100% \u002F 4 * $i;\n  }\n}\n\n\u002F\u002F to：从 1 到 4（不包含 4，即只到 3）\n@for $i from 1 to 4 {\n  .item-#{$i} {\n    transform: translateX($i * 10px);\n  }\n}\n",[36,2727,2728,2733,2752,2772,2795,2799,2803,2807,2812,2829,2844,2867,2871],{"__ignoreMap":189},[216,2729,2730],{"class":218,"line":219},[216,2731,2732],{"class":222},"\u002F\u002F through：从 1 到 4（包含 4）\n",[216,2734,2735,2737,2740,2743,2745,2748,2750],{"class":218,"line":226},[216,2736,57],{"class":282},[216,2738,2739],{"class":229}," $i",[216,2741,2742],{"class":282}," from",[216,2744,2259],{"class":256},[216,2746,2747],{"class":282}," through",[216,2749,257],{"class":256},[216,2751,318],{"class":233},[216,2753,2754,2757,2760,2764,2767,2770],{"class":218,"line":248},[216,2755,2756],{"class":310},"  .",[216,2758,2759],{"class":314},"col-",[216,2761,2763],{"class":2762},"sPlvq","#{",[216,2765,2766],{"class":229},"$i",[216,2768,2769],{"class":2762},"}",[216,2771,318],{"class":233},[216,2773,2774,2777,2779,2782,2784,2787,2789,2791,2793],{"class":218,"line":266},[216,2775,2776],{"class":324},"    width",[216,2778,234],{"class":233},[216,2780,2781],{"class":256}," 100",[216,2783,1400],{"class":260},[216,2785,2786],{"class":2256}," \u002F",[216,2788,257],{"class":256},[216,2790,458],{"class":2256},[216,2792,2739],{"class":229},[216,2794,245],{"class":233},[216,2796,2797],{"class":218,"line":273},[216,2798,1408],{"class":233},[216,2800,2801],{"class":218,"line":279},[216,2802,361],{"class":233},[216,2804,2805],{"class":218,"line":302},[216,2806,270],{"emptyLinePlaceholder":269},[216,2808,2809],{"class":218,"line":307},[216,2810,2811],{"class":222},"\u002F\u002F to：从 1 到 4（不包含 4，即只到 3）\n",[216,2813,2814,2816,2818,2820,2822,2825,2827],{"class":218,"line":321},[216,2815,57],{"class":282},[216,2817,2739],{"class":229},[216,2819,2742],{"class":282},[216,2821,2259],{"class":256},[216,2823,2824],{"class":282}," to",[216,2826,257],{"class":256},[216,2828,318],{"class":233},[216,2830,2831,2833,2836,2838,2840,2842],{"class":218,"line":342},[216,2832,2756],{"class":310},[216,2834,2835],{"class":314},"item-",[216,2837,2763],{"class":2762},[216,2839,2766],{"class":229},[216,2841,2769],{"class":2762},[216,2843,318],{"class":233},[216,2845,2846,2849,2851,2854,2856,2858,2860,2863,2865],{"class":218,"line":358},[216,2847,2848],{"class":324},"    transform",[216,2850,234],{"class":233},[216,2852,2853],{"class":1293}," translateX",[216,2855,1297],{"class":233},[216,2857,2766],{"class":229},[216,2859,458],{"class":2256},[216,2861,2862],{"class":256}," 10",[216,2864,261],{"class":260},[216,2866,701],{"class":233},[216,2868,2869],{"class":218,"line":1322},[216,2870,1408],{"class":233},[216,2872,2873],{"class":218,"line":1332},[216,2874,361],{"class":233},[27,2876,2877,181],{},[31,2878,2879],{},"编译结果（through）",[183,2881,2883],{"className":2652,"code":2882,"language":12,"meta":189,"style":189},".col-1 {\n  width: 25%;\n}\n.col-2 {\n  width: 50%;\n}\n.col-3 {\n  width: 75%;\n}\n.col-4 {\n  width: 100%;\n}\n",[36,2884,2885,2894,2907,2911,2920,2932,2936,2945,2958,2962,2971,2983],{"__ignoreMap":189},[216,2886,2887,2889,2892],{"class":218,"line":219},[216,2888,311],{"class":310},[216,2890,2891],{"class":314},"col-1",[216,2893,318],{"class":233},[216,2895,2896,2898,2900,2903,2905],{"class":218,"line":226},[216,2897,1283],{"class":324},[216,2899,234],{"class":233},[216,2901,2902],{"class":256}," 25",[216,2904,1400],{"class":260},[216,2906,245],{"class":233},[216,2908,2909],{"class":218,"line":248},[216,2910,361],{"class":233},[216,2912,2913,2915,2918],{"class":218,"line":266},[216,2914,311],{"class":310},[216,2916,2917],{"class":314},"col-2",[216,2919,318],{"class":233},[216,2921,2922,2924,2926,2928,2930],{"class":218,"line":273},[216,2923,1283],{"class":324},[216,2925,234],{"class":233},[216,2927,2348],{"class":256},[216,2929,1400],{"class":260},[216,2931,245],{"class":233},[216,2933,2934],{"class":218,"line":279},[216,2935,361],{"class":233},[216,2937,2938,2940,2943],{"class":218,"line":302},[216,2939,311],{"class":310},[216,2941,2942],{"class":314},"col-3",[216,2944,318],{"class":233},[216,2946,2947,2949,2951,2954,2956],{"class":218,"line":307},[216,2948,1283],{"class":324},[216,2950,234],{"class":233},[216,2952,2953],{"class":256}," 75",[216,2955,1400],{"class":260},[216,2957,245],{"class":233},[216,2959,2960],{"class":218,"line":321},[216,2961,361],{"class":233},[216,2963,2964,2966,2969],{"class":218,"line":342},[216,2965,311],{"class":310},[216,2967,2968],{"class":314},"col-4",[216,2970,318],{"class":233},[216,2972,2973,2975,2977,2979,2981],{"class":218,"line":358},[216,2974,1283],{"class":324},[216,2976,234],{"class":233},[216,2978,2781],{"class":256},[216,2980,1400],{"class":260},[216,2982,245],{"class":233},[216,2984,2985],{"class":218,"line":1322},[216,2986,361],{"class":233},[27,2988,2989,2991],{},[31,2990,2692],{},"：生成栅格系统、等差数列样式、索引类名。",[116,2993,705,2995,2699],{"id":2994},"_3-each-循环",[36,2996,60],{},[27,2998,2999],{},"遍历列表（List）中的每个元素，或遍历 Map 中的每个键值对。",[205,3001,3002],{"id":3002},"遍历列表",[183,3004,3006],{"className":210,"code":3005,"language":212,"meta":189,"style":189},"$colors: red blue green;\n\n@each $color in $colors {\n  .bg-#{$color} {\n    background: $color;\n  }\n}\n",[36,3007,3008,3024,3028,3043,3058,3068,3072],{"__ignoreMap":189},[216,3009,3010,3013,3015,3017,3019,3022],{"class":218,"line":219},[216,3011,3012],{"class":229},"$colors",[216,3014,234],{"class":233},[216,3016,639],{"class":241},[216,3018,624],{"class":241},[216,3020,3021],{"class":241}," green",[216,3023,245],{"class":233},[216,3025,3026],{"class":218,"line":226},[216,3027,270],{"emptyLinePlaceholder":269},[216,3029,3030,3032,3035,3038,3041],{"class":218,"line":248},[216,3031,60],{"class":282},[216,3033,3034],{"class":229}," $color",[216,3036,3037],{"class":282}," in",[216,3039,3040],{"class":229}," $colors",[216,3042,318],{"class":233},[216,3044,3045,3047,3050,3052,3054,3056],{"class":218,"line":266},[216,3046,2756],{"class":310},[216,3048,3049],{"class":314},"bg-",[216,3051,2763],{"class":2762},[216,3053,2324],{"class":229},[216,3055,2769],{"class":2762},[216,3057,318],{"class":233},[216,3059,3060,3062,3064,3066],{"class":218,"line":273},[216,3061,1369],{"class":324},[216,3063,234],{"class":233},[216,3065,3034],{"class":229},[216,3067,245],{"class":233},[216,3069,3070],{"class":218,"line":279},[216,3071,1408],{"class":233},[216,3073,3074],{"class":218,"line":302},[216,3075,361],{"class":233},[27,3077,3078],{},"编译结果：",[183,3080,3082],{"className":2652,"code":3081,"language":12,"meta":189,"style":189},".bg-red {\n  background: red;\n}\n.bg-blue {\n  background: blue;\n}\n.bg-green {\n  background: green;\n}\n",[36,3083,3084,3093,3103,3107,3116,3126,3130,3139,3149],{"__ignoreMap":189},[216,3085,3086,3088,3091],{"class":218,"line":219},[216,3087,311],{"class":310},[216,3089,3090],{"class":314},"bg-red",[216,3092,318],{"class":233},[216,3094,3095,3097,3099,3101],{"class":218,"line":226},[216,3096,325],{"class":324},[216,3098,234],{"class":233},[216,3100,639],{"class":241},[216,3102,245],{"class":233},[216,3104,3105],{"class":218,"line":248},[216,3106,361],{"class":233},[216,3108,3109,3111,3114],{"class":218,"line":266},[216,3110,311],{"class":310},[216,3112,3113],{"class":314},"bg-blue",[216,3115,318],{"class":233},[216,3117,3118,3120,3122,3124],{"class":218,"line":273},[216,3119,325],{"class":324},[216,3121,234],{"class":233},[216,3123,624],{"class":241},[216,3125,245],{"class":233},[216,3127,3128],{"class":218,"line":279},[216,3129,361],{"class":233},[216,3131,3132,3134,3137],{"class":218,"line":302},[216,3133,311],{"class":310},[216,3135,3136],{"class":314},"bg-green",[216,3138,318],{"class":233},[216,3140,3141,3143,3145,3147],{"class":218,"line":307},[216,3142,325],{"class":324},[216,3144,234],{"class":233},[216,3146,3021],{"class":241},[216,3148,245],{"class":233},[216,3150,3151],{"class":218,"line":321},[216,3152,361],{"class":233},[205,3154,3156],{"id":3155},"遍历-map","遍历 Map",[183,3158,3160],{"className":210,"code":3159,"language":212,"meta":189,"style":189},"$themes: (\n  primary: #3498db,\n  success: #2ecc71,\n  danger: #e74c3c,\n);\n\n@each $name, $color in $themes {\n  .btn-#{$name} {\n    background: $color;\n  }\n}\n",[36,3161,3162,3171,3185,3198,3212,3216,3220,3239,3255,3265,3269],{"__ignoreMap":189},[216,3163,3164,3167,3169],{"class":218,"line":219},[216,3165,3166],{"class":229},"$themes",[216,3168,234],{"class":233},[216,3170,668],{"class":233},[216,3172,3173,3177,3179,3181,3183],{"class":218,"line":226},[216,3174,3176],{"class":3175},"sZMiF","  primary",[216,3178,234],{"class":233},[216,3180,238],{"class":237},[216,3182,242],{"class":241},[216,3184,684],{"class":233},[216,3186,3187,3190,3192,3194,3196],{"class":218,"line":248},[216,3188,3189],{"class":3175},"  success",[216,3191,234],{"class":233},[216,3193,238],{"class":237},[216,3195,680],{"class":241},[216,3197,684],{"class":233},[216,3199,3200,3203,3205,3207,3210],{"class":218,"line":266},[216,3201,3202],{"class":3175},"  danger",[216,3204,234],{"class":233},[216,3206,238],{"class":237},[216,3208,3209],{"class":241},"e74c3c",[216,3211,684],{"class":233},[216,3213,3214],{"class":218,"line":273},[216,3215,701],{"class":233},[216,3217,3218],{"class":218,"line":279},[216,3219,270],{"emptyLinePlaceholder":269},[216,3221,3222,3224,3227,3230,3232,3234,3237],{"class":218,"line":302},[216,3223,60],{"class":282},[216,3225,3226],{"class":229}," $name",[216,3228,3229],{"class":683},", ",[216,3231,2324],{"class":229},[216,3233,3037],{"class":282},[216,3235,3236],{"class":229}," $themes",[216,3238,318],{"class":233},[216,3240,3241,3243,3246,3248,3251,3253],{"class":218,"line":307},[216,3242,2756],{"class":310},[216,3244,3245],{"class":314},"btn-",[216,3247,2763],{"class":2762},[216,3249,3250],{"class":229},"$name",[216,3252,2769],{"class":2762},[216,3254,318],{"class":233},[216,3256,3257,3259,3261,3263],{"class":218,"line":321},[216,3258,1369],{"class":324},[216,3260,234],{"class":233},[216,3262,3034],{"class":229},[216,3264,245],{"class":233},[216,3266,3267],{"class":218,"line":342},[216,3268,1408],{"class":233},[216,3270,3271],{"class":218,"line":358},[216,3272,361],{"class":233},[27,3274,3078],{},[183,3276,3278],{"className":2652,"code":3277,"language":12,"meta":189,"style":189},".btn-primary {\n  background: #3498db;\n}\n.btn-success {\n  background: #2ecc71;\n}\n.btn-danger {\n  background: #e74c3c;\n}\n",[36,3279,3280,3289,3301,3305,3314,3326,3330,3339,3351],{"__ignoreMap":189},[216,3281,3282,3284,3287],{"class":218,"line":219},[216,3283,311],{"class":310},[216,3285,3286],{"class":314},"btn-primary",[216,3288,318],{"class":233},[216,3290,3291,3293,3295,3297,3299],{"class":218,"line":226},[216,3292,325],{"class":324},[216,3294,234],{"class":233},[216,3296,238],{"class":237},[216,3298,242],{"class":241},[216,3300,245],{"class":233},[216,3302,3303],{"class":218,"line":248},[216,3304,361],{"class":233},[216,3306,3307,3309,3312],{"class":218,"line":266},[216,3308,311],{"class":310},[216,3310,3311],{"class":314},"btn-success",[216,3313,318],{"class":233},[216,3315,3316,3318,3320,3322,3324],{"class":218,"line":273},[216,3317,325],{"class":324},[216,3319,234],{"class":233},[216,3321,238],{"class":237},[216,3323,680],{"class":241},[216,3325,245],{"class":233},[216,3327,3328],{"class":218,"line":279},[216,3329,361],{"class":233},[216,3331,3332,3334,3337],{"class":218,"line":302},[216,3333,311],{"class":310},[216,3335,3336],{"class":314},"btn-danger",[216,3338,318],{"class":233},[216,3340,3341,3343,3345,3347,3349],{"class":218,"line":307},[216,3342,325],{"class":324},[216,3344,234],{"class":233},[216,3346,238],{"class":237},[216,3348,3209],{"class":241},[216,3350,245],{"class":233},[216,3352,3353],{"class":218,"line":321},[216,3354,361],{"class":233},[27,3356,3357,3359],{},[31,3358,2692],{},"：批量生成工具类、主题配置、图标映射等。",[116,3361,3363,3364,2699],{"id":3362},"_4-while-循环","4. ",[36,3365,63],{},[27,3367,3368,3369,3371],{},"基于条件重复执行样式块，直到条件为 ",[36,3370,2044],{},"。需手动控制循环变量，避免无限循环。",[183,3373,3375],{"className":210,"code":3374,"language":212,"meta":189,"style":189},"$i: 6;\n@while $i > 0 {\n  .item-#{$i} {\n    width: $i * 10px;\n  }\n  $i: $i - 1;\n}\n",[36,3376,3377,3388,3401,3415,3431,3435,3451],{"__ignoreMap":189},[216,3378,3379,3381,3383,3386],{"class":218,"line":219},[216,3380,2766],{"class":229},[216,3382,234],{"class":233},[216,3384,3385],{"class":256}," 6",[216,3387,245],{"class":233},[216,3389,3390,3392,3394,3396,3399],{"class":218,"line":226},[216,3391,63],{"class":282},[216,3393,2739],{"class":229},[216,3395,2345],{"class":2256},[216,3397,3398],{"class":256}," 0",[216,3400,318],{"class":233},[216,3402,3403,3405,3407,3409,3411,3413],{"class":218,"line":248},[216,3404,2756],{"class":310},[216,3406,2835],{"class":314},[216,3408,2763],{"class":2762},[216,3410,2766],{"class":229},[216,3412,2769],{"class":2762},[216,3414,318],{"class":233},[216,3416,3417,3419,3421,3423,3425,3427,3429],{"class":218,"line":266},[216,3418,2776],{"class":324},[216,3420,234],{"class":233},[216,3422,2739],{"class":229},[216,3424,458],{"class":2256},[216,3426,2862],{"class":256},[216,3428,261],{"class":260},[216,3430,245],{"class":233},[216,3432,3433],{"class":218,"line":273},[216,3434,1408],{"class":233},[216,3436,3437,3440,3442,3444,3447,3449],{"class":218,"line":279},[216,3438,3439],{"class":229},"  $i",[216,3441,234],{"class":233},[216,3443,2739],{"class":229},[216,3445,3446],{"class":2256}," -",[216,3448,2259],{"class":256},[216,3450,245],{"class":233},[216,3452,3453],{"class":218,"line":302},[216,3454,361],{"class":233},[27,3456,3078],{},[183,3458,3460],{"className":2652,"code":3459,"language":12,"meta":189,"style":189},".item-6 {\n  width: 60px;\n}\n.item-5 {\n  width: 50px;\n}\n.item-4 {\n  width: 40px;\n}\n.item-3 {\n  width: 30px;\n}\n.item-2 {\n  width: 20px;\n}\n.item-1 {\n  width: 10px;\n}\n",[36,3461,3462,3471,3484,3488,3497,3509,3513,3522,3535,3539,3548,3561,3565,3574,3586,3590,3599,3611],{"__ignoreMap":189},[216,3463,3464,3466,3469],{"class":218,"line":219},[216,3465,311],{"class":310},[216,3467,3468],{"class":314},"item-6",[216,3470,318],{"class":233},[216,3472,3473,3475,3477,3480,3482],{"class":218,"line":226},[216,3474,1283],{"class":324},[216,3476,234],{"class":233},[216,3478,3479],{"class":256}," 60",[216,3481,261],{"class":260},[216,3483,245],{"class":233},[216,3485,3486],{"class":218,"line":248},[216,3487,361],{"class":233},[216,3489,3490,3492,3495],{"class":218,"line":266},[216,3491,311],{"class":310},[216,3493,3494],{"class":314},"item-5",[216,3496,318],{"class":233},[216,3498,3499,3501,3503,3505,3507],{"class":218,"line":273},[216,3500,1283],{"class":324},[216,3502,234],{"class":233},[216,3504,2348],{"class":256},[216,3506,261],{"class":260},[216,3508,245],{"class":233},[216,3510,3511],{"class":218,"line":279},[216,3512,361],{"class":233},[216,3514,3515,3517,3520],{"class":218,"line":302},[216,3516,311],{"class":310},[216,3518,3519],{"class":314},"item-4",[216,3521,318],{"class":233},[216,3523,3524,3526,3528,3531,3533],{"class":218,"line":307},[216,3525,1283],{"class":324},[216,3527,234],{"class":233},[216,3529,3530],{"class":256}," 40",[216,3532,261],{"class":260},[216,3534,245],{"class":233},[216,3536,3537],{"class":218,"line":321},[216,3538,361],{"class":233},[216,3540,3541,3543,3546],{"class":218,"line":342},[216,3542,311],{"class":310},[216,3544,3545],{"class":314},"item-3",[216,3547,318],{"class":233},[216,3549,3550,3552,3554,3557,3559],{"class":218,"line":358},[216,3551,1283],{"class":324},[216,3553,234],{"class":233},[216,3555,3556],{"class":256}," 30",[216,3558,261],{"class":260},[216,3560,245],{"class":233},[216,3562,3563],{"class":218,"line":1322},[216,3564,361],{"class":233},[216,3566,3567,3569,3572],{"class":218,"line":1332},[216,3568,311],{"class":310},[216,3570,3571],{"class":314},"item-2",[216,3573,318],{"class":233},[216,3575,3576,3578,3580,3582,3584],{"class":218,"line":1345},[216,3577,1283],{"class":324},[216,3579,234],{"class":233},[216,3581,1397],{"class":256},[216,3583,261],{"class":260},[216,3585,245],{"class":233},[216,3587,3588],{"class":218,"line":1360},[216,3589,361],{"class":233},[216,3591,3592,3594,3597],{"class":218,"line":1366},[216,3593,311],{"class":310},[216,3595,3596],{"class":314},"item-1",[216,3598,318],{"class":233},[216,3600,3601,3603,3605,3607,3609],{"class":218,"line":1405},[216,3602,1283],{"class":324},[216,3604,234],{"class":233},[216,3606,2862],{"class":256},[216,3608,261],{"class":260},[216,3610,245],{"class":233},[216,3612,3613],{"class":218,"line":1411},[216,3614,361],{"class":233},[27,3616,3617,3619,3620,147,3622,3624],{},[31,3618,2692],{},"：复杂条件循环（如某些特定步长或直到某个条件满足），但通常 ",[36,3621,57],{},[36,3623,60],{}," 更简洁直观。",[77,3626,3627],{"id":3627},"总结",[842,3629,3630,3642],{},[845,3631,3632],{},[848,3633,3634,3637,3640],{},[851,3635,3636],{},"主题",[851,3638,3639],{},"常用语法",[851,3641,1103],{},[863,3643,3644,3657,3671,3686,3700,3714,3728],{},[848,3645,3646,3649,3654],{},[868,3647,3648],{},"模块化",[868,3650,3651],{},[36,3652,3653],{},"@use \"x\" as ns",[868,3655,3656],{},"命名空间隔离、避免全局污染",[848,3658,3659,3662,3668],{},[868,3660,3661],{},"内置模块",[868,3663,3664,47,3666],{},[36,3665,2453],{},[36,3667,1890],{},[868,3669,3670],{},"数值\u002F颜色\u002F字符串\u002F列表\u002FMap 计算",[848,3672,3673,3676,3683],{},[868,3674,3675],{},"自定义函数",[868,3677,3678,3680,3681],{},[36,3679,2177],{}," + ",[36,3682,2410],{},[868,3684,3685],{},"封装复杂计算逻辑",[848,3687,3688,3692,3697],{},[868,3689,3690],{},[36,3691,53],{},[868,3693,3694],{},[36,3695,3696],{},"@if $a == 1 { ... }",[868,3698,3699],{},"条件判断",[848,3701,3702,3706,3711],{},[868,3703,3704],{},[36,3705,57],{},[868,3707,3708],{},[36,3709,3710],{},"@for $i from 1 through 5",[868,3712,3713],{},"已知范围循环（含边界）",[848,3715,3716,3720,3725],{},[868,3717,3718],{},[36,3719,60],{},[868,3721,3722],{},[36,3723,3724],{},"@each $item in $list",[868,3726,3727],{},"遍历列表或 Map",[848,3729,3730,3734,3739],{},[868,3731,3732],{},[36,3733,63],{},[868,3735,3736],{},[36,3737,3738],{},"@while $i > 0 { ... }",[868,3740,3741],{},"不定条件循环（慎用）",[27,3743,3744,3745,3747,3748,3750,3751,39,3753,3755,3756,75],{},"优先使用 ",[36,3746,38],{}," 而非 ",[36,3749,42],{},"；控制指令中优先 ",[36,3752,60],{},[36,3754,57],{},"，慎用复杂 ",[36,3757,63],{},[77,3759,3760],{"id":3760},"参考文献",[842,3762,3763,3772],{},[845,3764,3765],{},[848,3766,3767,3770],{},[851,3768,3769],{},"资料",[851,3771,1566],{},[863,3773,3774,3786,3798,3809,3821,3832],{},[848,3775,3776,3783],{},[868,3777,3778],{},[66,3779,3782],{"href":3780,"rel":3781},"https:\u002F\u002Fsass-lang.com\u002Fdocumentation\u002Fat-rules\u002Fuse",[113],"Sass：@use",[868,3784,3785],{},"模块加载",[848,3787,3788,3795],{},[868,3789,3790],{},[66,3791,3794],{"href":3792,"rel":3793},"https:\u002F\u002Fsass-lang.com\u002Fdocumentation\u002Fat-rules\u002Fforward",[113],"Sass：@forward",[868,3796,3797],{},"转发模块成员",[848,3799,3800,3806],{},[868,3801,3802],{},[66,3803,3805],{"href":111,"rel":3804},[113],"Sass：@import 弃用",[868,3807,3808],{},"迁移说明",[848,3810,3811,3818],{},[868,3812,3813],{},[66,3814,3817],{"href":3815,"rel":3816},"https:\u002F\u002Fsass-lang.com\u002Fdocumentation\u002Fmodules",[113],"Sass：Built-in Modules",[868,3819,3820],{},"sass:math、color 等",[848,3822,3823,3830],{},[868,3824,3825],{},[66,3826,3829],{"href":3827,"rel":3828},"https:\u002F\u002Fsass-lang.com\u002Fdocumentation\u002Fat-rules\u002Ffunction",[113],"Sass：@function",[868,3831,3675],{},[848,3833,3834,3841],{},[868,3835,3836],{},[66,3837,3840],{"href":3838,"rel":3839},"https:\u002F\u002Fsass-lang.com\u002Fdocumentation\u002Fat-rules\u002Fcontrol",[113],"Sass：Control Directives",[868,3842,3843],{},"@if、@for、@each",[572,3845,3846],{},"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 .sMMDD, html code.shiki .sMMDD{--shiki-light:#90A4AE;--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sP7_E, html code.shiki .sP7_E{--shiki-light:#39ADB5;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s39Yj, html code.shiki .s39Yj{--shiki-light:#39ADB5;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s_hVV, html code.shiki .s_hVV{--shiki-light:#90A4AE;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .srdBf, html code.shiki .srdBf{--shiki-light:#F76D47;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sw1J6, html code.shiki .sw1J6{--shiki-light:#F76D47;--shiki-default:#D73A49;--shiki-dark:#F97583}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 .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 pre.shiki code .stp6e, html code.shiki .stp6e{--shiki-light:#39ADB5;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sbgvK, html code.shiki .sbgvK{--shiki-light:#E2931D;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .soE4H, html code.shiki .soE4H{--shiki-light:#8796B0;--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);}html pre.shiki code .sGLFI, html code.shiki .sGLFI{--shiki-light:#6182B8;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .su5hD, html code.shiki .su5hD{--shiki-light:#90A4AE;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sptTA, html code.shiki .sptTA{--shiki-light:#6182B8;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s83vy, html code.shiki .s83vy{--shiki-light:#E2931D;--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .s9AJx, html code.shiki .s9AJx{--shiki-light:#9C3EDA;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s99_P, html code.shiki .s99_P{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#E36209;--shiki-default-font-style:inherit;--shiki-dark:#FFAB70;--shiki-dark-font-style:inherit}html pre.shiki code .smGrS, html code.shiki .smGrS{--shiki-light:#39ADB5;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sPlvq, html code.shiki .sPlvq{--shiki-light:#39ADB5;--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sZMiF, html code.shiki .sZMiF{--shiki-light:#E2931D;--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":189,"searchDepth":226,"depth":226,"links":3848},[3849,3860,3867,3877,3878],{"id":79,"depth":226,"text":3850,"children":3851},"一、模块化（@use vs @import）",[3852,3853,3855,3857,3859],{"id":118,"depth":248,"text":119},{"id":194,"depth":248,"text":3854},"2. @use 用法（现代模块系统）",{"id":704,"depth":248,"text":3856},"3. @import（已废弃）",{"id":834,"depth":248,"text":3858},"4. 迁移建议：@import → @use",{"id":972,"depth":248,"text":973},{"id":1076,"depth":226,"text":1077,"children":3861},[3862,3863,3864,3865,3866],{"id":1090,"depth":248,"text":1091},{"id":1190,"depth":248,"text":1191},{"id":1547,"depth":248,"text":1548},{"id":2171,"depth":248,"text":2172},{"id":2425,"depth":248,"text":2426},{"id":2472,"depth":226,"text":2473,"children":3868},[3869,3871,3873,3875],{"id":2488,"depth":248,"text":3870},"1. @if \u002F @else if \u002F @else",{"id":2696,"depth":248,"text":3872},"2. @for 循环",{"id":2994,"depth":248,"text":3874},"3. @each 循环",{"id":3362,"depth":248,"text":3876},"4. @while 循环",{"id":3627,"depth":226,"text":3627},{"id":3760,"depth":226,"text":3760},{"title":8,"description":9},"knowledge\u002Fbooklet\u002Fweb\u002FCss\u002FSass\u002Fsass-modules","knowledge\u002Fknowledge\u002Fbooklet\u002Fweb\u002FCss\u002FSass\u002Fsass-modules.md","md",{"items":3884},[3885,3889,3892,3895,3899,3903],{"path":3886,"title":3887,"description":3888,"category":10,"score":321},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-intro","Sass 简介与安装","Sass（Syntactically Awesome Style Sheets）是 CSS 预处理器，在 CSS 语法上增加变量、嵌套、混合、模块、控制指令等；有 SCSS 与缩进语法两种源码语法，官方实现为 Dart Sass。",{"path":73,"title":3890,"description":3891,"category":10,"score":321},"复用机制：Mixin 与继承","Mixin（@mixin\u002F@include）支持参数与 @content，适合动态样式；@extend 与 %placeholder 通过合并选择器复用完全相同的静态样式，减少 CSS 体积。",{"path":68,"title":3893,"description":3894,"category":10,"score":321},"语法基础：变量、嵌套与运算","Sass 语法基础：$ 变量与插值、选择器嵌套与 & 父选择器引用、数学\u002F颜色\u002F字符串运算、三种注释语法及与原生 CSS 嵌套的关系。",{"path":3896,"title":3897,"description":3898,"category":10,"score":266},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fless\u002Fless-core","Less 基础与核心语法","Less 是 JavaScript 实现的 CSS 预处理器，在 CSS 语法上扩展变量（@）、嵌套、混合、运算与函数，编译为普通 CSS 后由浏览器加载；本文覆盖安装、CLI、构建工具集成与全部核心语法。",{"path":3900,"title":3901,"description":3902,"category":10,"score":266},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fcolor","颜色与背景","color 设置前景（多为文字）色；background-* 设置元素背景（颜色、图像、渐变）。二者共同决定对比度与视觉层次，直接影响 无障碍 阅读体验。排版中的文本颜色用法见 排版与文本。",{"path":3904,"title":3905,"description":3906,"category":10,"score":266},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fless\u002Fproject","工程化集成与扩展","Less 可集成到 Vite、Webpack、Vue CLI 等工具链，实现编译、全局变量注入与路径处理。",{"series":3908,"title":13,"items":3909,"index":219,"prev":3914,"next":3915},"booklet\u002Fweb\u002Fcss\u002Fsass",[3910,3911,3912,3913],{"path":3886,"title":3887,"date":17,"pinned":18},{"path":7,"title":8,"date":17,"pinned":18},{"path":73,"title":3890,"date":17,"pinned":18},{"path":68,"title":3893,"date":17,"pinned":18},{"path":3886,"title":3887,"date":17,"pinned":18},{"path":73,"title":3890,"date":17,"pinned":18}]