[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"knowledge-\u002Fapi\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-reuse":3,"knowledge-related-\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-reuse":2248,"knowledge-series-\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-reuse":2273},{"source":4,"connector":5,"page":6},"sqlite","better-sqlite3",{"path":7,"title":8,"description":9,"category":10,"tags":11,"date":16,"pinned":17,"draft":17,"body":18,"seo":2244,"stem":2245,"id":2246,"extension":2247},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-reuse","复用机制：Mixin 与继承","Mixin（@mixin\u002F@include）支持参数与 @content，适合动态样式；@extend 与 %placeholder 通过合并选择器复用完全相同的静态样式，减少 CSS 体积。","技能小册",[12,13,14,15],"css","sass","mixins","extends","2026-07-23",false,{"type":19,"value":20,"toc":2221},"minimark",[21,25,72,82,87,90,235,238,293,296,300,303,495,498,607,613,649,656,667,811,813,903,906,913,922,1066,1068,1146,1152,1156,1228,1232,1239,1244,1375,1377,1485,1491,1497,1516,1522,1535,1642,1644,1699,1704,1731,1737,1818,1828,1942,1947,1981,1985,2041,2044,2158,2164,2167,2217],[22,23,8],"h1",{"id":24},"复用机制mixin-与继承",[26,27,28,29,33,34,38,39,42,43,33,46,49,50,53,54,57,58,61,62,65,66,71],"p",{},"Sass 提供两类核心的样式复用机制：",[30,31,32],"strong",{},"Mixin","（",[35,36,37],"code",{},"@mixin"," \u002F ",[35,40,41],{},"@include","，支持参数与内容块）与 ",[30,44,45],{},"继承",[35,47,48],{},"@extend","、",[35,51,52],{},"%placeholder","，通过合并选择器减少重复）。两者适用场景不同，本文末尾给出对比与选择建议。跨文件使用时需先 ",[35,55,56],{},"@use"," 引入模块，例如 ",[35,59,60],{},"@use \"mixins\" as m;"," 再 ",[35,63,64],{},"@include m.clearfix;","（见 ",[67,68,70],"a",{"href":69},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-modules","模块与控制流","）。",[73,74,76,77,38,79,81],"h2",{"id":75},"一mixinmixin-include","一、Mixin（",[35,78,37],{},[35,80,41],{},"）",[83,84,86],"h3",{"id":85},"_1-定义与调用无参数","1. 定义与调用（无参数）",[26,88,89],{},"最简单的 Mixin 不接收参数，封装一组通用样式。",[91,92,97],"pre",{"className":93,"code":94,"language":95,"meta":96,"style":96},"language-scss shiki shiki-themes material-theme-lighter github-light github-dark","\u002F\u002F 定义\n@mixin clearfix {\n  &::after {\n    content: \"\";\n    display: table;\n    clear: both;\n  }\n}\n\n\u002F\u002F 调用\n.container {\n  @include clearfix;\n}\n","scss","",[35,98,99,108,122,139,155,170,183,189,195,202,208,220,230],{"__ignoreMap":96},[100,101,104],"span",{"class":102,"line":103},"line",1,[100,105,107],{"class":106},"sutJx","\u002F\u002F 定义\n",[100,109,111,114,118],{"class":102,"line":110},2,[100,112,37],{"class":113},"sVHd0",[100,115,117],{"class":116},"sGLFI"," clearfix",[100,119,121],{"class":120},"sP7_E"," {\n",[100,123,125,129,133,137],{"class":102,"line":124},3,[100,126,128],{"class":127},"s83vy","  &",[100,130,132],{"class":131},"stp6e","::",[100,134,136],{"class":135},"s9AJx","after",[100,138,121],{"class":120},[100,140,142,145,148,152],{"class":102,"line":141},4,[100,143,144],{"class":127},"    content",[100,146,147],{"class":120},":",[100,149,151],{"class":150},"sjJ54"," \"\"",[100,153,154],{"class":120},";\n",[100,156,158,162,164,168],{"class":102,"line":157},5,[100,159,161],{"class":160},"soE4H","    display",[100,163,147],{"class":120},[100,165,167],{"class":166},"s_hVV"," table",[100,169,154],{"class":120},[100,171,173,176,178,181],{"class":102,"line":172},6,[100,174,175],{"class":160},"    clear",[100,177,147],{"class":120},[100,179,180],{"class":166}," both",[100,182,154],{"class":120},[100,184,186],{"class":102,"line":185},7,[100,187,188],{"class":120},"  }\n",[100,190,192],{"class":102,"line":191},8,[100,193,194],{"class":120},"}\n",[100,196,198],{"class":102,"line":197},9,[100,199,201],{"emptyLinePlaceholder":200},true,"\n",[100,203,205],{"class":102,"line":204},10,[100,206,207],{"class":106},"\u002F\u002F 调用\n",[100,209,211,214,218],{"class":102,"line":210},11,[100,212,213],{"class":131},".",[100,215,217],{"class":216},"sbgvK","container",[100,219,121],{"class":120},[100,221,223,226,228],{"class":102,"line":222},12,[100,224,225],{"class":113},"  @include",[100,227,117],{"class":116},[100,229,154],{"class":120},[100,231,233],{"class":102,"line":232},13,[100,234,194],{"class":120},[26,236,237],{},"编译后：",[91,239,242],{"className":240,"code":241,"language":12,"meta":96,"style":96},"language-css shiki shiki-themes material-theme-lighter github-light github-dark",".container::after {\n  content: \"\";\n  display: table;\n  clear: both;\n}\n",[35,243,244,256,267,278,289],{"__ignoreMap":96},[100,245,246,248,250,252,254],{"class":102,"line":103},[100,247,213],{"class":131},[100,249,217],{"class":216},[100,251,132],{"class":131},[100,253,136],{"class":135},[100,255,121],{"class":120},[100,257,258,261,263,265],{"class":102,"line":110},[100,259,260],{"class":160},"  content",[100,262,147],{"class":120},[100,264,151],{"class":150},[100,266,154],{"class":120},[100,268,269,272,274,276],{"class":102,"line":124},[100,270,271],{"class":160},"  display",[100,273,147],{"class":120},[100,275,167],{"class":166},[100,277,154],{"class":120},[100,279,280,283,285,287],{"class":102,"line":141},[100,281,282],{"class":160},"  clear",[100,284,147],{"class":120},[100,286,180],{"class":166},[100,288,154],{"class":120},[100,290,291],{"class":102,"line":157},[100,292,194],{"class":120},[26,294,295],{},"适用于无需配置的通用模式（如清除浮动、文本截断等）。",[83,297,299],{"id":298},"_2-带参数的-mixin","2. 带参数的 Mixin",[26,301,302],{},"通过参数使 Mixin 更灵活，可设置默认值。",[91,304,306],{"className":93,"code":305,"language":95,"meta":96,"style":96},"\u002F\u002F 定义：第二个参数有默认值\n@mixin button($bg-color, $text-color: white) {\n  background: $bg-color;\n  color: $text-color;\n  padding: 10px 20px;\n  border-radius: 4px;\n}\n\n\u002F\u002F 调用\n.primary-btn {\n  @include button(#3498db); \u002F\u002F 使用默认文字颜色\n}\n\n.secondary-btn {\n  @include button(#e74c3c, #333); \u002F\u002F 两个参数都指定\n}\n",[35,307,308,313,344,356,368,390,404,408,412,416,425,446,450,454,464,490],{"__ignoreMap":96},[100,309,310],{"class":102,"line":103},[100,311,312],{"class":106},"\u002F\u002F 定义：第二个参数有默认值\n",[100,314,315,317,320,323,327,331,334,336,339,342],{"class":102,"line":110},[100,316,37],{"class":113},[100,318,319],{"class":116}," button",[100,321,322],{"class":120},"(",[100,324,326],{"class":325},"sMMDD","$bg-color",[100,328,330],{"class":329},"su5hD",", ",[100,332,333],{"class":325},"$text-color",[100,335,147],{"class":120},[100,337,338],{"class":166}," white",[100,340,341],{"class":120},")",[100,343,121],{"class":120},[100,345,346,349,351,354],{"class":102,"line":124},[100,347,348],{"class":160},"  background",[100,350,147],{"class":120},[100,352,353],{"class":325}," $bg-color",[100,355,154],{"class":120},[100,357,358,361,363,366],{"class":102,"line":141},[100,359,360],{"class":160},"  color",[100,362,147],{"class":120},[100,364,365],{"class":325}," $text-color",[100,367,154],{"class":120},[100,369,370,373,375,379,383,386,388],{"class":102,"line":157},[100,371,372],{"class":160},"  padding",[100,374,147],{"class":120},[100,376,378],{"class":377},"srdBf"," 10",[100,380,382],{"class":381},"sw1J6","px",[100,384,385],{"class":377}," 20",[100,387,382],{"class":381},[100,389,154],{"class":120},[100,391,392,395,397,400,402],{"class":102,"line":172},[100,393,394],{"class":160},"  border-radius",[100,396,147],{"class":120},[100,398,399],{"class":377}," 4",[100,401,382],{"class":381},[100,403,154],{"class":120},[100,405,406],{"class":102,"line":185},[100,407,194],{"class":120},[100,409,410],{"class":102,"line":191},[100,411,201],{"emptyLinePlaceholder":200},[100,413,414],{"class":102,"line":197},[100,415,207],{"class":106},[100,417,418,420,423],{"class":102,"line":204},[100,419,213],{"class":131},[100,421,422],{"class":216},"primary-btn",[100,424,121],{"class":120},[100,426,427,429,431,433,437,440,443],{"class":102,"line":210},[100,428,225],{"class":113},[100,430,319],{"class":116},[100,432,322],{"class":120},[100,434,436],{"class":435},"s39Yj","#",[100,438,439],{"class":166},"3498db",[100,441,442],{"class":120},");",[100,444,445],{"class":106}," \u002F\u002F 使用默认文字颜色\n",[100,447,448],{"class":102,"line":222},[100,449,194],{"class":120},[100,451,452],{"class":102,"line":232},[100,453,201],{"emptyLinePlaceholder":200},[100,455,457,459,462],{"class":102,"line":456},14,[100,458,213],{"class":131},[100,460,461],{"class":216},"secondary-btn",[100,463,121],{"class":120},[100,465,467,469,471,473,475,478,480,482,485,487],{"class":102,"line":466},15,[100,468,225],{"class":113},[100,470,319],{"class":116},[100,472,322],{"class":120},[100,474,436],{"class":435},[100,476,477],{"class":166},"e74c3c",[100,479,330],{"class":329},[100,481,436],{"class":435},[100,483,484],{"class":166},"333",[100,486,442],{"class":120},[100,488,489],{"class":106}," \u002F\u002F 两个参数都指定\n",[100,491,493],{"class":102,"line":492},16,[100,494,194],{"class":120},[26,496,497],{},"编译结果：",[91,499,501],{"className":240,"code":500,"language":12,"meta":96,"style":96},".primary-btn {\n  background: #3498db;\n  color: white;\n  padding: 10px 20px;\n  border-radius: 4px;\n}\n.secondary-btn {\n  background: #e74c3c;\n  color: #333;\n  \u002F* ... *\u002F\n}\n",[35,502,503,511,524,534,550,562,566,574,586,598,603],{"__ignoreMap":96},[100,504,505,507,509],{"class":102,"line":103},[100,506,213],{"class":131},[100,508,422],{"class":216},[100,510,121],{"class":120},[100,512,513,515,517,520,522],{"class":102,"line":110},[100,514,348],{"class":160},[100,516,147],{"class":120},[100,518,519],{"class":435}," #",[100,521,439],{"class":166},[100,523,154],{"class":120},[100,525,526,528,530,532],{"class":102,"line":124},[100,527,360],{"class":160},[100,529,147],{"class":120},[100,531,338],{"class":166},[100,533,154],{"class":120},[100,535,536,538,540,542,544,546,548],{"class":102,"line":141},[100,537,372],{"class":160},[100,539,147],{"class":120},[100,541,378],{"class":377},[100,543,382],{"class":381},[100,545,385],{"class":377},[100,547,382],{"class":381},[100,549,154],{"class":120},[100,551,552,554,556,558,560],{"class":102,"line":157},[100,553,394],{"class":160},[100,555,147],{"class":120},[100,557,399],{"class":377},[100,559,382],{"class":381},[100,561,154],{"class":120},[100,563,564],{"class":102,"line":172},[100,565,194],{"class":120},[100,567,568,570,572],{"class":102,"line":185},[100,569,213],{"class":131},[100,571,461],{"class":216},[100,573,121],{"class":120},[100,575,576,578,580,582,584],{"class":102,"line":191},[100,577,348],{"class":160},[100,579,147],{"class":120},[100,581,519],{"class":435},[100,583,477],{"class":166},[100,585,154],{"class":120},[100,587,588,590,592,594,596],{"class":102,"line":197},[100,589,360],{"class":160},[100,591,147],{"class":120},[100,593,519],{"class":435},[100,595,484],{"class":166},[100,597,154],{"class":120},[100,599,600],{"class":102,"line":204},[100,601,602],{"class":106},"  \u002F* ... *\u002F\n",[100,604,605],{"class":102,"line":210},[100,606,194],{"class":120},[26,608,609,612],{},[30,610,611],{},"支持关键字参数","，提高可读性：",[91,614,616],{"className":93,"code":615,"language":95,"meta":96,"style":96},"@include button($bg-color: #f39c12, $text-color: #fff);\n",[35,617,618],{"__ignoreMap":96},[100,619,620,622,624,626,628,630,632,635,637,639,641,643,646],{"class":102,"line":103},[100,621,41],{"class":113},[100,623,319],{"class":116},[100,625,322],{"class":120},[100,627,326],{"class":325},[100,629,147],{"class":120},[100,631,519],{"class":435},[100,633,634],{"class":166},"f39c12",[100,636,330],{"class":329},[100,638,333],{"class":325},[100,640,147],{"class":120},[100,642,519],{"class":435},[100,644,645],{"class":166},"fff",[100,647,648],{"class":120},");\n",[83,650,652,653,81],{"id":651},"_3-可变参数","3. 可变参数（",[35,654,655],{},"...",[26,657,658,659,662,663,666],{},"当参数个数不确定时，使用 ",[35,660,661],{},"$args..."," 将所有参数作为",[30,664,665],{},"列表","传递给 Mixin。",[91,668,670],{"className":93,"code":669,"language":95,"meta":96,"style":96},"\u002F\u002F 定义\n@mixin box-shadow($shadows...) {\n  box-shadow: $shadows;\n}\n\n\u002F\u002F 调用：可传入任意数量的阴影\n.card {\n  @include box-shadow(0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.1));\n}\n",[35,671,672,676,694,706,710,714,719,728,807],{"__ignoreMap":96},[100,673,674],{"class":102,"line":103},[100,675,107],{"class":106},[100,677,678,680,683,685,688,690,692],{"class":102,"line":110},[100,679,37],{"class":113},[100,681,682],{"class":116}," box-shadow",[100,684,322],{"class":120},[100,686,687],{"class":325},"$shadows",[100,689,655],{"class":329},[100,691,341],{"class":120},[100,693,121],{"class":120},[100,695,696,699,701,704],{"class":102,"line":124},[100,697,698],{"class":160},"  box-shadow",[100,700,147],{"class":120},[100,702,703],{"class":325}," $shadows",[100,705,154],{"class":120},[100,707,708],{"class":102,"line":141},[100,709,194],{"class":120},[100,711,712],{"class":102,"line":157},[100,713,201],{"emptyLinePlaceholder":200},[100,715,716],{"class":102,"line":172},[100,717,718],{"class":106},"\u002F\u002F 调用：可传入任意数量的阴影\n",[100,720,721,723,726],{"class":102,"line":185},[100,722,213],{"class":131},[100,724,725],{"class":216},"card",[100,727,121],{"class":120},[100,729,730,732,734,736,739,742,744,746,748,752,754,756,759,762,764,766,768,771,773,775,777,779,781,784,786,788,790,792,794,796,798,800,802,804],{"class":102,"line":191},[100,731,225],{"class":113},[100,733,682],{"class":116},[100,735,322],{"class":120},[100,737,738],{"class":377},"0",[100,740,741],{"class":377}," 2",[100,743,382],{"class":381},[100,745,399],{"class":377},[100,747,382],{"class":381},[100,749,751],{"class":750},"sptTA"," rgba",[100,753,322],{"class":120},[100,755,738],{"class":377},[100,757,758],{"class":120},",",[100,760,761],{"class":377}," 0",[100,763,758],{"class":120},[100,765,761],{"class":377},[100,767,758],{"class":120},[100,769,770],{"class":377}," 0.1",[100,772,341],{"class":120},[100,774,330],{"class":329},[100,776,738],{"class":377},[100,778,399],{"class":377},[100,780,382],{"class":381},[100,782,783],{"class":377}," 8",[100,785,382],{"class":381},[100,787,751],{"class":750},[100,789,322],{"class":120},[100,791,738],{"class":377},[100,793,758],{"class":120},[100,795,761],{"class":377},[100,797,758],{"class":120},[100,799,761],{"class":377},[100,801,758],{"class":120},[100,803,770],{"class":377},[100,805,806],{"class":120},"));\n",[100,808,809],{"class":102,"line":197},[100,810,194],{"class":120},[26,812,237],{},[91,814,816],{"className":240,"code":815,"language":12,"meta":96,"style":96},".card {\n  box-shadow:\n    0 2px 4px rgba(0, 0, 0, 0.1),\n    0 4px 8px rgba(0, 0, 0, 0.1);\n}\n",[35,817,818,826,833,867,899],{"__ignoreMap":96},[100,819,820,822,824],{"class":102,"line":103},[100,821,213],{"class":131},[100,823,725],{"class":216},[100,825,121],{"class":120},[100,827,828,830],{"class":102,"line":110},[100,829,698],{"class":160},[100,831,832],{"class":120},":\n",[100,834,835,838,840,842,844,846,848,850,852,854,856,858,860,862,864],{"class":102,"line":124},[100,836,837],{"class":377},"    0",[100,839,741],{"class":377},[100,841,382],{"class":381},[100,843,399],{"class":377},[100,845,382],{"class":381},[100,847,751],{"class":750},[100,849,322],{"class":120},[100,851,738],{"class":377},[100,853,758],{"class":120},[100,855,761],{"class":377},[100,857,758],{"class":120},[100,859,761],{"class":377},[100,861,758],{"class":120},[100,863,770],{"class":377},[100,865,866],{"class":120},"),\n",[100,868,869,871,873,875,877,879,881,883,885,887,889,891,893,895,897],{"class":102,"line":141},[100,870,837],{"class":377},[100,872,399],{"class":377},[100,874,382],{"class":381},[100,876,783],{"class":377},[100,878,382],{"class":381},[100,880,751],{"class":750},[100,882,322],{"class":120},[100,884,738],{"class":377},[100,886,758],{"class":120},[100,888,761],{"class":377},[100,890,758],{"class":120},[100,892,761],{"class":377},[100,894,758],{"class":120},[100,896,770],{"class":377},[100,898,648],{"class":120},[100,900,901],{"class":102,"line":157},[100,902,194],{"class":120},[26,904,905],{},"可变参还支持将列表值传递给其他 Mixin 或函数。",[83,907,909,910,81],{"id":908},"_4-内容块content","4. 内容块（",[35,911,912],{},"@content",[26,914,915,917,918,921],{},[35,916,912],{}," 允许调用者向 Mixin 中传递",[30,919,920],{},"一整块样式代码","，实现高度定制。",[91,923,925],{"className":93,"code":924,"language":95,"meta":96,"style":96},"\u002F\u002F 定义：响应式断点 Mixin\n@mixin respond-to($breakpoint) {\n  @media (min-width: $breakpoint) {\n    @content; \u002F\u002F 调用时传入的内容会放置在此处\n  }\n}\n\n\u002F\u002F 调用\n.sidebar {\n  width: 100%;\n\n  @include respond-to(768px) {\n    width: 30%; \u002F\u002F 这段样式会插入到 @content 位置\n  }\n}\n",[35,926,927,932,948,969,980,984,988,992,996,1005,1020,1024,1041,1058,1062],{"__ignoreMap":96},[100,928,929],{"class":102,"line":103},[100,930,931],{"class":106},"\u002F\u002F 定义：响应式断点 Mixin\n",[100,933,934,936,939,941,944,946],{"class":102,"line":110},[100,935,37],{"class":113},[100,937,938],{"class":116}," respond-to",[100,940,322],{"class":120},[100,942,943],{"class":325},"$breakpoint",[100,945,341],{"class":120},[100,947,121],{"class":120},[100,949,950,953,956,960,962,965,967],{"class":102,"line":124},[100,951,952],{"class":113},"  @media",[100,954,955],{"class":120}," (",[100,957,959],{"class":958},"sZMiF","min-width",[100,961,147],{"class":120},[100,963,964],{"class":325}," $breakpoint",[100,966,341],{"class":120},[100,968,121],{"class":120},[100,970,971,974,977],{"class":102,"line":141},[100,972,973],{"class":113},"    @content",[100,975,976],{"class":120},";",[100,978,979],{"class":106}," \u002F\u002F 调用时传入的内容会放置在此处\n",[100,981,982],{"class":102,"line":157},[100,983,188],{"class":120},[100,985,986],{"class":102,"line":172},[100,987,194],{"class":120},[100,989,990],{"class":102,"line":185},[100,991,201],{"emptyLinePlaceholder":200},[100,993,994],{"class":102,"line":191},[100,995,207],{"class":106},[100,997,998,1000,1003],{"class":102,"line":197},[100,999,213],{"class":131},[100,1001,1002],{"class":216},"sidebar",[100,1004,121],{"class":120},[100,1006,1007,1010,1012,1015,1018],{"class":102,"line":204},[100,1008,1009],{"class":160},"  width",[100,1011,147],{"class":120},[100,1013,1014],{"class":377}," 100",[100,1016,1017],{"class":381},"%",[100,1019,154],{"class":120},[100,1021,1022],{"class":102,"line":210},[100,1023,201],{"emptyLinePlaceholder":200},[100,1025,1026,1028,1030,1032,1035,1037,1039],{"class":102,"line":222},[100,1027,225],{"class":113},[100,1029,938],{"class":116},[100,1031,322],{"class":120},[100,1033,1034],{"class":377},"768",[100,1036,382],{"class":381},[100,1038,341],{"class":120},[100,1040,121],{"class":120},[100,1042,1043,1046,1048,1051,1053,1055],{"class":102,"line":232},[100,1044,1045],{"class":160},"    width",[100,1047,147],{"class":120},[100,1049,1050],{"class":377}," 30",[100,1052,1017],{"class":381},[100,1054,976],{"class":120},[100,1056,1057],{"class":106}," \u002F\u002F 这段样式会插入到 @content 位置\n",[100,1059,1060],{"class":102,"line":456},[100,1061,188],{"class":120},[100,1063,1064],{"class":102,"line":466},[100,1065,194],{"class":120},[26,1067,237],{},[91,1069,1071],{"className":240,"code":1070,"language":12,"meta":96,"style":96},".sidebar {\n  width: 100%;\n}\n@media (min-width: 768px) {\n  .sidebar {\n    width: 30%;\n  }\n}\n",[35,1072,1073,1081,1093,1097,1117,1126,1138,1142],{"__ignoreMap":96},[100,1074,1075,1077,1079],{"class":102,"line":103},[100,1076,213],{"class":131},[100,1078,1002],{"class":216},[100,1080,121],{"class":120},[100,1082,1083,1085,1087,1089,1091],{"class":102,"line":110},[100,1084,1009],{"class":160},[100,1086,147],{"class":120},[100,1088,1014],{"class":377},[100,1090,1017],{"class":381},[100,1092,154],{"class":120},[100,1094,1095],{"class":102,"line":124},[100,1096,194],{"class":120},[100,1098,1099,1102,1104,1106,1108,1111,1113,1115],{"class":102,"line":141},[100,1100,1101],{"class":113},"@media",[100,1103,955],{"class":120},[100,1105,959],{"class":958},[100,1107,147],{"class":120},[100,1109,1110],{"class":377}," 768",[100,1112,382],{"class":381},[100,1114,341],{"class":120},[100,1116,121],{"class":120},[100,1118,1119,1122,1124],{"class":102,"line":157},[100,1120,1121],{"class":131},"  .",[100,1123,1002],{"class":216},[100,1125,121],{"class":120},[100,1127,1128,1130,1132,1134,1136],{"class":102,"line":172},[100,1129,1045],{"class":160},[100,1131,147],{"class":120},[100,1133,1050],{"class":377},[100,1135,1017],{"class":381},[100,1137,154],{"class":120},[100,1139,1140],{"class":102,"line":185},[100,1141,188],{"class":120},[100,1143,1144],{"class":102,"line":191},[100,1145,194],{"class":120},[26,1147,1148,1151],{},[30,1149,1150],{},"典型应用","：媒体查询封装、主题切换（暗色\u002F亮色）、复杂动画的定制。",[83,1153,1155],{"id":1154},"_5-mixin-的不足","5. Mixin 的不足",[1157,1158,1159,1175],"table",{},[1160,1161,1162],"thead",{},[1163,1164,1165,1169,1172],"tr",{},[1166,1167,1168],"th",{},"不足",[1166,1170,1171],{},"说明",[1166,1173,1174],{},"示例场景",[1176,1177,1178,1199,1215],"tbody",{},[1163,1179,1180,1186,1192],{},[1181,1182,1183],"td",{},[30,1184,1185],{},"CSS 冗余",[1181,1187,1188,1189,1191],{},"每次 ",[35,1190,41],{}," 都会完整输出一份样式代码，多次调用会产生重复 CSS",[1181,1193,1194,1195,1198],{},"若在10个地方调用同一个无参数的 ",[35,1196,1197],{},"clearfix","，CSS 中会出现10份完全相同的代码块",[1163,1200,1201,1206,1209],{},[1181,1202,1203],{},[30,1204,1205],{},"无法合并选择器",[1181,1207,1208],{},"即使样式完全一样，也不会自动合并",[1181,1210,1211,1212,1214],{},"与 ",[35,1213,48],{}," 不同，Mixin 不会用逗号合并选择器",[1163,1216,1217,1222,1225],{},[1181,1218,1219],{},[30,1220,1221],{},"调试稍复杂",[1181,1223,1224],{},"浏览器调试时看到的是展开后的完整代码，不易追溯到 Mixin 源",[1181,1226,1227],{},"适合配合 sourcemap 使用",[73,1229,1231],{"id":1230},"二继承与占位符","二、继承与占位符",[83,1233,1235,1236,1238],{"id":1234},"_1-extend-继承","1. ",[35,1237,48],{}," 继承",[26,1240,1241,1243],{},[35,1242,48],{}," 允许一个选择器继承另一个选择器的样式，编译后多个选择器会被合并到同一条 CSS 规则中，从而减少冗余。",[91,1245,1247],{"className":93,"code":1246,"language":95,"meta":96,"style":96},".message {\n  padding: 10px;\n  border: 1px solid #ccc;\n}\n\n.success {\n  @extend .message;\n  border-color: green;\n}\n\n.error {\n  @extend .message;\n  border-color: red;\n}\n",[35,1248,1249,1258,1270,1292,1296,1300,1309,1321,1333,1337,1341,1350,1360,1371],{"__ignoreMap":96},[100,1250,1251,1253,1256],{"class":102,"line":103},[100,1252,213],{"class":131},[100,1254,1255],{"class":216},"message",[100,1257,121],{"class":120},[100,1259,1260,1262,1264,1266,1268],{"class":102,"line":110},[100,1261,372],{"class":160},[100,1263,147],{"class":120},[100,1265,378],{"class":377},[100,1267,382],{"class":381},[100,1269,154],{"class":120},[100,1271,1272,1275,1277,1280,1282,1285,1287,1290],{"class":102,"line":124},[100,1273,1274],{"class":160},"  border",[100,1276,147],{"class":120},[100,1278,1279],{"class":377}," 1",[100,1281,382],{"class":381},[100,1283,1284],{"class":166}," solid",[100,1286,519],{"class":435},[100,1288,1289],{"class":166},"ccc",[100,1291,154],{"class":120},[100,1293,1294],{"class":102,"line":141},[100,1295,194],{"class":120},[100,1297,1298],{"class":102,"line":157},[100,1299,201],{"emptyLinePlaceholder":200},[100,1301,1302,1304,1307],{"class":102,"line":172},[100,1303,213],{"class":131},[100,1305,1306],{"class":216},"success",[100,1308,121],{"class":120},[100,1310,1311,1314,1317,1319],{"class":102,"line":185},[100,1312,1313],{"class":113},"  @extend",[100,1315,1316],{"class":131}," .",[100,1318,1255],{"class":216},[100,1320,154],{"class":120},[100,1322,1323,1326,1328,1331],{"class":102,"line":191},[100,1324,1325],{"class":160},"  border-color",[100,1327,147],{"class":120},[100,1329,1330],{"class":166}," green",[100,1332,154],{"class":120},[100,1334,1335],{"class":102,"line":197},[100,1336,194],{"class":120},[100,1338,1339],{"class":102,"line":204},[100,1340,201],{"emptyLinePlaceholder":200},[100,1342,1343,1345,1348],{"class":102,"line":210},[100,1344,213],{"class":131},[100,1346,1347],{"class":216},"error",[100,1349,121],{"class":120},[100,1351,1352,1354,1356,1358],{"class":102,"line":222},[100,1353,1313],{"class":113},[100,1355,1316],{"class":131},[100,1357,1255],{"class":216},[100,1359,154],{"class":120},[100,1361,1362,1364,1366,1369],{"class":102,"line":232},[100,1363,1325],{"class":160},[100,1365,147],{"class":120},[100,1367,1368],{"class":166}," red",[100,1370,154],{"class":120},[100,1372,1373],{"class":102,"line":456},[100,1374,194],{"class":120},[26,1376,497],{},[91,1378,1380],{"className":240,"code":1379,"language":12,"meta":96,"style":96},".message,\n.success,\n.error {\n  padding: 10px;\n  border: 1px solid #ccc;\n}\n.success {\n  border-color: green;\n}\n.error {\n  border-color: red;\n}\n",[35,1381,1382,1391,1399,1407,1419,1437,1441,1449,1459,1463,1471,1481],{"__ignoreMap":96},[100,1383,1384,1386,1388],{"class":102,"line":103},[100,1385,213],{"class":131},[100,1387,1255],{"class":216},[100,1389,1390],{"class":120},",\n",[100,1392,1393,1395,1397],{"class":102,"line":110},[100,1394,213],{"class":131},[100,1396,1306],{"class":216},[100,1398,1390],{"class":120},[100,1400,1401,1403,1405],{"class":102,"line":124},[100,1402,213],{"class":131},[100,1404,1347],{"class":216},[100,1406,121],{"class":120},[100,1408,1409,1411,1413,1415,1417],{"class":102,"line":141},[100,1410,372],{"class":160},[100,1412,147],{"class":120},[100,1414,378],{"class":377},[100,1416,382],{"class":381},[100,1418,154],{"class":120},[100,1420,1421,1423,1425,1427,1429,1431,1433,1435],{"class":102,"line":157},[100,1422,1274],{"class":160},[100,1424,147],{"class":120},[100,1426,1279],{"class":377},[100,1428,382],{"class":381},[100,1430,1284],{"class":166},[100,1432,519],{"class":435},[100,1434,1289],{"class":166},[100,1436,154],{"class":120},[100,1438,1439],{"class":102,"line":172},[100,1440,194],{"class":120},[100,1442,1443,1445,1447],{"class":102,"line":185},[100,1444,213],{"class":131},[100,1446,1306],{"class":216},[100,1448,121],{"class":120},[100,1450,1451,1453,1455,1457],{"class":102,"line":191},[100,1452,1325],{"class":160},[100,1454,147],{"class":120},[100,1456,1330],{"class":166},[100,1458,154],{"class":120},[100,1460,1461],{"class":102,"line":197},[100,1462,194],{"class":120},[100,1464,1465,1467,1469],{"class":102,"line":204},[100,1466,213],{"class":131},[100,1468,1347],{"class":216},[100,1470,121],{"class":120},[100,1472,1473,1475,1477,1479],{"class":102,"line":210},[100,1474,1325],{"class":160},[100,1476,147],{"class":120},[100,1478,1368],{"class":166},[100,1480,154],{"class":120},[100,1482,1483],{"class":102,"line":222},[100,1484,194],{"class":120},[26,1486,1487,1490],{},[30,1488,1489],{},"优点","：生成的 CSS 体积更小（相同样式只出现一次）。",[26,1492,1493,1496],{},[30,1494,1495],{},"缺点","：",[1498,1499,1500,1504,1507],"ul",{},[1501,1502,1503],"li",{},"不能传递参数，灵活性差。",[1501,1505,1506],{},"可能会生成较长的选择器列表（当继承链较深时）。",[1501,1508,1509,1510,1512,1513,1515],{},"不能在 ",[35,1511,1101],{}," 内部直接使用 ",[35,1514,48],{}," 继承外部规则（除非该选择器也在同一声明块内）。",[83,1517,1519,1520],{"id":1518},"_2-占位符选择器-placeholder","2. 占位符选择器 ",[35,1521,52],{},[26,1523,1524,1525,1527,1528,1531,1532,1534],{},"占位符是以 ",[35,1526,1017],{}," 开头的特殊选择器，",[30,1529,1530],{},"本身不会生成 CSS","，只有通过 ",[35,1533,48],{}," 被引用时，引用它的选择器才会出现在编译结果中。这使得占位符非常适合定义“抽象基类”，避免污染全局命名空间。",[91,1536,1538],{"className":93,"code":1537,"language":95,"meta":96,"style":96},"%flex-center {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.header {\n  @extend %flex-center;\n}\n\n.footer {\n  @extend %flex-center;\n}\n",[35,1539,1540,1549,1560,1572,1583,1587,1591,1600,1611,1615,1619,1628,1638],{"__ignoreMap":96},[100,1541,1542,1544,1547],{"class":102,"line":103},[100,1543,1017],{"class":131},[100,1545,1546],{"class":135},"flex-center",[100,1548,121],{"class":120},[100,1550,1551,1553,1555,1558],{"class":102,"line":110},[100,1552,271],{"class":160},[100,1554,147],{"class":120},[100,1556,1557],{"class":166}," flex",[100,1559,154],{"class":120},[100,1561,1562,1565,1567,1570],{"class":102,"line":124},[100,1563,1564],{"class":160},"  justify-content",[100,1566,147],{"class":120},[100,1568,1569],{"class":166}," center",[100,1571,154],{"class":120},[100,1573,1574,1577,1579,1581],{"class":102,"line":141},[100,1575,1576],{"class":160},"  align-items",[100,1578,147],{"class":120},[100,1580,1569],{"class":166},[100,1582,154],{"class":120},[100,1584,1585],{"class":102,"line":157},[100,1586,194],{"class":120},[100,1588,1589],{"class":102,"line":172},[100,1590,201],{"emptyLinePlaceholder":200},[100,1592,1593,1595,1598],{"class":102,"line":185},[100,1594,213],{"class":131},[100,1596,1597],{"class":216},"header",[100,1599,121],{"class":120},[100,1601,1602,1604,1607,1609],{"class":102,"line":191},[100,1603,1313],{"class":113},[100,1605,1606],{"class":131}," %",[100,1608,1546],{"class":135},[100,1610,154],{"class":120},[100,1612,1613],{"class":102,"line":197},[100,1614,194],{"class":120},[100,1616,1617],{"class":102,"line":204},[100,1618,201],{"emptyLinePlaceholder":200},[100,1620,1621,1623,1626],{"class":102,"line":210},[100,1622,213],{"class":131},[100,1624,1625],{"class":216},"footer",[100,1627,121],{"class":120},[100,1629,1630,1632,1634,1636],{"class":102,"line":222},[100,1631,1313],{"class":113},[100,1633,1606],{"class":131},[100,1635,1546],{"class":135},[100,1637,154],{"class":120},[100,1639,1640],{"class":102,"line":232},[100,1641,194],{"class":120},[26,1643,497],{},[91,1645,1647],{"className":240,"code":1646,"language":12,"meta":96,"style":96},".header,\n.footer {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n",[35,1648,1649,1657,1665,1675,1685,1695],{"__ignoreMap":96},[100,1650,1651,1653,1655],{"class":102,"line":103},[100,1652,213],{"class":131},[100,1654,1597],{"class":216},[100,1656,1390],{"class":120},[100,1658,1659,1661,1663],{"class":102,"line":110},[100,1660,213],{"class":131},[100,1662,1625],{"class":216},[100,1664,121],{"class":120},[100,1666,1667,1669,1671,1673],{"class":102,"line":124},[100,1668,271],{"class":160},[100,1670,147],{"class":120},[100,1672,1557],{"class":166},[100,1674,154],{"class":120},[100,1676,1677,1679,1681,1683],{"class":102,"line":141},[100,1678,1564],{"class":160},[100,1680,147],{"class":120},[100,1682,1569],{"class":166},[100,1684,154],{"class":120},[100,1686,1687,1689,1691,1693],{"class":102,"line":157},[100,1688,1576],{"class":160},[100,1690,147],{"class":120},[100,1692,1569],{"class":166},[100,1694,154],{"class":120},[100,1696,1697],{"class":102,"line":172},[100,1698,194],{"class":120},[26,1700,1701,1496],{},[30,1702,1703],{},"占位符的限制",[1498,1705,1706,1712,1722],{},[1501,1707,1708,1711],{},[30,1709,1710],{},"必须定义在顶层作用域","（不能在规则内部或媒体查询内部定义）。",[1501,1713,1714,1717,1718,1721],{},[30,1715,1716],{},"不支持复合选择器","（如 ",[35,1719,1720],{},"%foo:hover"," 会报错）。",[1501,1723,1724,1727,1728,1730],{},[30,1725,1726],{},"不能直接在媒体查询内定义","，但可以在媒体查询内 ",[35,1729,48],{}," 外部定义的占位符。",[26,1732,1733,1736],{},[30,1734,1735],{},"如何处理响应式场景","：通常结合 Mixin 来传递媒体查询逻辑。例如：",[91,1738,1740],{"className":93,"code":1739,"language":95,"meta":96,"style":96},"%flex-column {\n  flex-direction: column;\n}\n\n@mixin responsive-column {\n  @media (max-width: 768px) {\n    @extend %flex-column;\n  }\n}\n",[35,1741,1742,1751,1763,1767,1771,1780,1799,1810,1814],{"__ignoreMap":96},[100,1743,1744,1746,1749],{"class":102,"line":103},[100,1745,1017],{"class":131},[100,1747,1748],{"class":135},"flex-column",[100,1750,121],{"class":120},[100,1752,1753,1756,1758,1761],{"class":102,"line":110},[100,1754,1755],{"class":160},"  flex-direction",[100,1757,147],{"class":120},[100,1759,1760],{"class":166}," column",[100,1762,154],{"class":120},[100,1764,1765],{"class":102,"line":124},[100,1766,194],{"class":120},[100,1768,1769],{"class":102,"line":141},[100,1770,201],{"emptyLinePlaceholder":200},[100,1772,1773,1775,1778],{"class":102,"line":157},[100,1774,37],{"class":113},[100,1776,1777],{"class":116}," responsive-column",[100,1779,121],{"class":120},[100,1781,1782,1784,1786,1789,1791,1793,1795,1797],{"class":102,"line":172},[100,1783,952],{"class":113},[100,1785,955],{"class":120},[100,1787,1788],{"class":958},"max-width",[100,1790,147],{"class":120},[100,1792,1110],{"class":377},[100,1794,382],{"class":381},[100,1796,341],{"class":120},[100,1798,121],{"class":120},[100,1800,1801,1804,1806,1808],{"class":102,"line":185},[100,1802,1803],{"class":113},"    @extend",[100,1805,1606],{"class":131},[100,1807,1748],{"class":135},[100,1809,154],{"class":120},[100,1811,1812],{"class":102,"line":191},[100,1813,188],{"class":120},[100,1815,1816],{"class":102,"line":197},[100,1817,194],{"class":120},[73,1819,1821,1822,1824,1825,1827],{"id":1820},"三extend-占位符-vs-mixin-对比","三、",[35,1823,48],{}," \u002F 占位符 vs ",[35,1826,37],{}," 对比",[1157,1829,1830,1846],{},[1160,1831,1832],{},[1163,1833,1834,1837,1842],{},[1166,1835,1836],{},"特性",[1166,1838,1839,1841],{},[35,1840,48],{}," \u002F 占位符",[1166,1843,1844],{},[35,1845,37],{},[1176,1847,1848,1861,1874,1887,1901,1914,1927],{},[1163,1849,1850,1855,1858],{},[1181,1851,1852],{},[30,1853,1854],{},"输出方式",[1181,1856,1857],{},"合并选择器，生成一条共享规则",[1181,1859,1860],{},"每次调用直接复制样式代码",[1163,1862,1863,1868,1871],{},[1181,1864,1865],{},[30,1866,1867],{},"CSS 体积",[1181,1869,1870],{},"通常更小（无重复）",[1181,1872,1873],{},"可能因多次调用产生大量重复代码",[1163,1875,1876,1881,1884],{},[1181,1877,1878],{},[30,1879,1880],{},"参数支持",[1181,1882,1883],{},"❌ 不支持",[1181,1885,1886],{},"✅ 支持",[1163,1888,1889,1897,1899],{},[1181,1890,1891],{},[30,1892,1893,1894,81],{},"条件分支（",[35,1895,1896],{},"@if",[1181,1898,1883],{},[1181,1900,1886],{},[1163,1902,1903,1910,1912],{},[1181,1904,1905],{},[30,1906,1907,1909],{},[35,1908,912],{}," 内容块",[1181,1911,1883],{},[1181,1913,1886],{},[1163,1915,1916,1921,1924],{},[1181,1917,1918],{},[30,1919,1920],{},"适用场景",[1181,1922,1923],{},"样式完全相同的静态复用",[1181,1925,1926],{},"需要动态值或条件逻辑",[1163,1928,1929,1934,1937],{},[1181,1930,1931],{},[30,1932,1933],{},"可维护性",[1181,1935,1936],{},"修改一处，所有继承处自动更新",[1181,1938,1939,1940],{},"需重新编译所有 ",[35,1941,41],{},[26,1943,1944,1496],{},[30,1945,1946],{},"选择建议",[1498,1948,1949,1962,1975],{},[1501,1950,1951,1952,1955,1956,1959,1960],{},"需要",[30,1953,1954],{},"参数","或",[30,1957,1958],{},"内容块"," → 使用 ",[35,1961,37],{},[1501,1963,1964,1965,1968,1969,1971,1972,1974],{},"样式",[30,1966,1967],{},"完全相同","且无需参数 → 优先考虑 ",[35,1970,48],{}," 或占位符（",[35,1973,52],{},"）以减少 CSS 体积",[1501,1976,1977,1978,1980],{},"不要为每个小组件都使用 ",[35,1979,48],{},"，否则选择器列表过长，可能导致 gzip 后体积不减反增，且增加浏览器匹配开销。",[73,1982,1984],{"id":1983},"四注意事项与反模式","四、注意事项与反模式",[1986,1987,1988,2001,2010,2028],"ol",{},[1501,1989,1990,1496,1993,1996,1997,2000],{},[30,1991,1992],{},"避免链式继承过深",[35,1994,1995],{},"%a → %b → %c"," 会导致最终选择器列表非常长（",[35,1998,1999],{},".a, .b, .c, .d ...","），影响浏览器解析速度。",[1501,2002,2003,2006,2007,2009],{},[30,2004,2005],{},"警惕选择器爆炸","：如果大量使用 ",[35,2008,48],{}," 组合，编译后的选择器列表可能包含上百个类名，反而降低性能并增大 CSS 体积。",[1501,2011,2012,2015,2016,2018,2019,2021,2022,2024,2025,2027],{},[30,2013,2014],{},"不要在媒体查询内继承外部选择器","：Sass 不允许跨 ",[35,2017,1101],{}," 作用域继承（会报错）。正确的做法是将公共样式定义为 ",[35,2020,52],{},"，然后在媒体查询内 ",[35,2023,48],{},"（占位符须在外部定义），或使用 Mixin 配合 ",[35,2026,912],{},"。",[1501,2029,2030,2033,2034,2036,2037,2040],{},[30,2031,2032],{},"使用占位符代替普通类继承","：当继承的目标不是实际 DOM 中使用的类（即仅作为样式基类），应使用 ",[35,2035,52],{}," 而非普通 ",[35,2038,2039],{},".class","，以避免产生无关的 CSS 类名。",[73,2042,2043],{"id":2043},"总结",[1157,2045,2046,2058],{},[1160,2047,2048],{},[1163,2049,2050,2052,2055],{},[1166,2051,1836],{},[1166,2053,2054],{},"语法",[1166,2056,2057],{},"用途",[1176,2059,2060,2073,2086,2099,2112,2127,2141],{},[1163,2061,2062,2065,2070],{},[1181,2063,2064],{},"Mixin 定义",[1181,2066,2067],{},[35,2068,2069],{},"@mixin name { ... }",[1181,2071,2072],{},"创建可复用块",[1163,2074,2075,2078,2083],{},[1181,2076,2077],{},"Mixin 调用（无参）",[1181,2079,2080],{},[35,2081,2082],{},"@include name;",[1181,2084,2085],{},"使用无参混合",[1163,2087,2088,2091,2096],{},[1181,2089,2090],{},"带参数",[1181,2092,2093],{},[35,2094,2095],{},"@mixin name($param, $default: val)",[1181,2097,2098],{},"配置化样式",[1163,2100,2101,2104,2109],{},[1181,2102,2103],{},"可变参数",[1181,2105,2106],{},[35,2107,2108],{},"@mixin name($args...)",[1181,2110,2111],{},"接收不定数量参数",[1163,2113,2114,2116,2124],{},[1181,2115,1958],{},[1181,2117,2118,2120,2121],{},[35,2119,912],{}," + ",[35,2122,2123],{},"@include name { ... }",[1181,2125,2126],{},"注入自定义样式",[1163,2128,2129,2133,2138],{},[1181,2130,2131],{},[35,2132,48],{},[1181,2134,2135],{},[35,2136,2137],{},".a { @extend .b; }",[1181,2139,2140],{},"合并选择器，减少重复",[1163,2142,2143,2147,2155],{},[1181,2144,2145],{},[35,2146,52],{},[1181,2148,2149,2120,2152],{},[35,2150,2151],{},"%name { ... }",[35,2153,2154],{},"@extend %name",[1181,2156,2157],{},"抽象基类，不生成无用 CSS",[26,2159,2160,2161,2163],{},"需要参数或注入代码块时用 Mixin；样式完全相同且无参的静态复用优先评估 ",[35,2162,48],{}," 或占位符，以在可维护性与输出 CSS 体积之间取得平衡。",[73,2165,2166],{"id":2166},"参考文献",[1157,2168,2169,2178],{},[1160,2170,2171],{},[1163,2172,2173,2176],{},[1166,2174,2175],{},"资料",[1166,2177,1171],{},[1176,2179,2180,2193,2205],{},[1163,2181,2182,2190],{},[1181,2183,2184],{},[67,2185,2189],{"href":2186,"rel":2187},"https:\u002F\u002Fsass-lang.com\u002Fdocumentation\u002Fat-rules\u002Fmixin",[2188],"nofollow","Sass：@mixin",[1181,2191,2192],{},"定义与 @content",[1163,2194,2195,2202],{},[1181,2196,2197],{},[67,2198,2201],{"href":2199,"rel":2200},"https:\u002F\u002Fsass-lang.com\u002Fdocumentation\u002Fat-rules\u002Finclude",[2188],"Sass：@include",[1181,2203,2204],{},"调用 mixin",[1163,2206,2207,2214],{},[1181,2208,2209],{},[67,2210,2213],{"href":2211,"rel":2212},"https:\u002F\u002Fsass-lang.com\u002Fdocumentation\u002Fat-rules\u002Fextend",[2188],"Sass：@extend",[1181,2215,2216],{},"继承与占位符",[2218,2219,2220],"style",{},"html pre.shiki code .sutJx, html code.shiki .sutJx{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#6A737D;--shiki-default-font-style:inherit;--shiki-dark:#6A737D;--shiki-dark-font-style:inherit}html pre.shiki code .sVHd0, html code.shiki .sVHd0{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#D73A49;--shiki-default-font-style:inherit;--shiki-dark:#F97583;--shiki-dark-font-style:inherit}html pre.shiki code .sGLFI, html code.shiki .sGLFI{--shiki-light:#6182B8;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sP7_E, html code.shiki .sP7_E{--shiki-light:#39ADB5;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s83vy, html code.shiki .s83vy{--shiki-light:#E2931D;--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .stp6e, html code.shiki .stp6e{--shiki-light:#39ADB5;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s9AJx, html code.shiki .s9AJx{--shiki-light:#9C3EDA;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sjJ54, html code.shiki .sjJ54{--shiki-light:#39ADB5;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .soE4H, html code.shiki .soE4H{--shiki-light:#8796B0;--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 .sbgvK, html code.shiki .sbgvK{--shiki-light:#E2931D;--shiki-default:#6F42C1;--shiki-dark:#B392F0}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 .sMMDD, html code.shiki .sMMDD{--shiki-light:#90A4AE;--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .su5hD, html code.shiki .su5hD{--shiki-light:#90A4AE;--shiki-default:#24292E;--shiki-dark:#E1E4E8}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 .s39Yj, html code.shiki .s39Yj{--shiki-light:#39ADB5;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sptTA, html code.shiki .sptTA{--shiki-light:#6182B8;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sZMiF, html code.shiki .sZMiF{--shiki-light:#E2931D;--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":96,"searchDepth":110,"depth":110,"links":2222},[2223,2233,2239,2241,2242,2243],{"id":75,"depth":110,"text":2224,"children":2225},"一、Mixin（@mixin \u002F @include）",[2226,2227,2228,2230,2232],{"id":85,"depth":124,"text":86},{"id":298,"depth":124,"text":299},{"id":651,"depth":124,"text":2229},"3. 可变参数（...）",{"id":908,"depth":124,"text":2231},"4. 内容块（@content）",{"id":1154,"depth":124,"text":1155},{"id":1230,"depth":110,"text":1231,"children":2234},[2235,2237],{"id":1234,"depth":124,"text":2236},"1. @extend 继承",{"id":1518,"depth":124,"text":2238},"2. 占位符选择器 %placeholder",{"id":1820,"depth":110,"text":2240},"三、@extend \u002F 占位符 vs @mixin 对比",{"id":1983,"depth":110,"text":1984},{"id":2043,"depth":110,"text":2043},{"id":2166,"depth":110,"text":2166},{"title":8,"description":9},"knowledge\u002Fbooklet\u002Fweb\u002FCss\u002FSass\u002Fsass-reuse","knowledge\u002Fknowledge\u002Fbooklet\u002Fweb\u002FCss\u002FSass\u002Fsass-reuse.md","md",{"items":2249},[2250,2254,2257,2261,2265,2269],{"path":2251,"title":2252,"description":2253,"category":10,"score":197},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-intro","Sass 简介与安装","Sass（Syntactically Awesome Style Sheets）是 CSS 预处理器，在 CSS 语法上增加变量、嵌套、混合、模块、控制指令等；有 SCSS 与缩进语法两种源码语法，官方实现为 Dart Sass。",{"path":69,"title":2255,"description":2256,"category":10,"score":197},"模块与控制流：@use、内置函数、@if\u002F@for\u002F@each","Dart Sass 推荐用 @use\u002F@forward 替代已弃用的 @import；内置 sass:* 模块提供颜色、字符串、列表、Map、数学等函数；@if\u002F@for\u002F@each\u002F@while 用于条件与循环生成样式。",{"path":2258,"title":2259,"description":2260,"category":10,"score":197},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-syntax","语法基础：变量、嵌套与运算","Sass 语法基础：$ 变量与插值、选择器嵌套与 & 父选择器引用、数学\u002F颜色\u002F字符串运算、三种注释语法及与原生 CSS 嵌套的关系。",{"path":2262,"title":2263,"description":2264,"category":10,"score":141},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fless\u002Fless-core","Less 基础与核心语法","Less 是 JavaScript 实现的 CSS 预处理器，在 CSS 语法上扩展变量（@）、嵌套、混合、运算与函数，编译为普通 CSS 后由浏览器加载；本文覆盖安装、CLI、构建工具集成与全部核心语法。",{"path":2266,"title":2267,"description":2268,"category":10,"score":141},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fcolor","颜色与背景","color 设置前景（多为文字）色；background-* 设置元素背景（颜色、图像、渐变）。二者共同决定对比度与视觉层次，直接影响 无障碍 阅读体验。排版中的文本颜色用法见 排版与文本。",{"path":2270,"title":2271,"description":2272,"category":10,"score":141},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fless\u002Fproject","工程化集成与扩展","Less 可集成到 Vite、Webpack、Vue CLI 等工具链，实现编译、全局变量注入与路径处理。",{"series":2274,"title":13,"items":2275,"index":110,"prev":2280,"next":2281},"booklet\u002Fweb\u002Fcss\u002Fsass",[2276,2277,2278,2279],{"path":2251,"title":2252,"date":16,"pinned":17},{"path":69,"title":2255,"date":16,"pinned":17},{"path":7,"title":8,"date":16,"pinned":17},{"path":2258,"title":2259,"date":16,"pinned":17},{"path":69,"title":2255,"date":16,"pinned":17},{"path":2258,"title":2259,"date":16,"pinned":17}]