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