[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"knowledge-\u002Fapi\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-intro":3,"knowledge-related-\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-intro":1101,"knowledge-series-\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-intro":1124},{"source":4,"connector":5,"page":6},"sqlite","better-sqlite3",{"path":7,"title":8,"description":9,"category":10,"tags":11,"date":15,"pinned":16,"draft":16,"body":17,"seo":1097,"stem":1098,"id":1099,"extension":1100},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-intro","Sass 简介与安装","Sass（Syntactically Awesome Style Sheets）是 CSS 预处理器，在 CSS 语法上增加变量、嵌套、混合、模块、控制指令等；有 SCSS 与缩进语法两种源码语法，官方实现为 Dart Sass。","技能小册",[12,13,14],"css","sass","sass-scss","2026-07-23",false,{"type":18,"value":19,"toc":1080},"minimark",[20,24,46,51,62,72,76,83,151,155,267,270,279,454,461,521,530,533,560,563,608,622,626,713,717,721,755,768,811,815,868,882,885,945,949,1014,1017,1076],[21,22,8],"h1",{"id":23},"sass-简介与安装",[25,26,27,28,32,33,36,37,41,42,45],"p",{},"Sass（Syntactically Awesome Style Sheets）是 ",[29,30,31],"strong",{},"CSS 预处理器","：在 CSS 语法上增加变量、嵌套、混合、模块、控制指令等能力，最终编译为标准 CSS 供浏览器使用。",[29,34,35],{},"不能","在浏览器中直接运行 ",[38,39,40],"code",{},".scss"," \u002F ",[38,43,44],{},".sass"," 文件，必须先编译。",[47,48,50],"h2",{"id":49},"一sass-是什么","一、Sass 是什么",[25,52,53,54,57,58,61],{},"Sass 是预处理器的",[29,55,56],{},"产品名","，而不是某一种具体的文件格式。它的价值在于弥补原生 CSS 早期缺乏变量、嵌套、逻辑控制等能力的短板，让样式代码更易维护、更易复用。随着原生 CSS 陆续引入自定义属性、原生嵌套等特性，Sass 与 CSS 的边界有所重叠，但在",[29,59,60],{},"跨文件变量主题、带参数的 Mixin、编译期循环生成样式","等场景，Sass 仍然是主流选择。",[63,64,70],"pre",{"className":65,"code":67,"language":68,"meta":69},[66],"language-text",".scss \u002F .sass 源文件 → Dart Sass 编译 → .css → 在 HTML 中引用\n","text","",[38,71,67],{"__ignoreMap":69},[47,73,75],{"id":74},"二两种语法scss-与缩进语法","二、两种语法：SCSS 与缩进语法",[25,77,78,79,82],{},"Sass 提供两种",[29,80,81],{},"源码语法","，编译目标相同，选择其一即可，不能在同一文件内混用：",[84,85,86,102],"table",{},[87,88,89],"thead",{},[90,91,92,96,99],"tr",{},[93,94,95],"th",{},"语法",[93,97,98],{},"扩展名",[93,100,101],{},"特点",[103,104,105,131],"tbody",{},[90,106,107,113,117],{},[108,109,110],"td",{},[29,111,112],{},"SCSS",[108,114,115],{},[38,116,40],{},[108,118,119,120,123,124,127,128],{},"使用 ",[38,121,122],{},"{}"," 与 ",[38,125,126],{},";","，合法 CSS 即合法 SCSS；当前",[29,129,130],{},"绝对主流",[90,132,133,138,142],{},[108,134,135],{},[29,136,137],{},"缩进语法",[108,139,140],{},[38,141,44],{},[108,143,144,145,147,148,150],{},"无 ",[38,146,122],{},"、无 ",[38,149,126],{},"，靠缩进表达层级；历史上更早出现",[152,153,154],"h3",{"id":154},"对比维度",[84,156,157,172],{},[87,158,159],{},[90,160,161,163,167],{},[93,162,154],{},[93,164,165],{},[29,166,112],{},[93,168,169],{},[29,170,171],{},"缩进语法（Sass）",[103,173,174,189,208,224,237,250],{},[90,175,176,181,185],{},[108,177,178],{},[29,179,180],{},"文件扩展名",[108,182,183],{},[38,184,40],{},[108,186,187],{},[38,188,44],{},[90,190,191,196,205],{},[108,192,193],{},[29,194,195],{},"语法风格",[108,197,198,199,201,202,204],{},"大括号 ",[38,200,122],{}," 表示嵌套层级，分号 ",[38,203,126],{}," 分隔属性",[108,206,207],{},"缩进（通常两个空格）表示嵌套层级，无大括号、无分号",[90,209,210,215,218],{},[108,211,212],{},[29,213,214],{},"与 CSS 的关系",[108,216,217],{},"CSS 的超集——任何合法 CSS 代码都是合法 SCSS 代码",[108,219,220,221,223],{},"完全不同的语法，CSS 代码不能直接复制到 ",[38,222,44],{}," 文件中",[90,225,226,231,234],{},[108,227,228],{},[29,229,230],{},"学习曲线",[108,232,233],{},"平缓，CSS 开发者零成本上手",[108,235,236],{},"较陡，需适应基于缩进的书写方式",[90,238,239,244,247],{},[108,240,241],{},[29,242,243],{},"可读性",[108,245,246],{},"清晰易读，尤其是较长的样式文件",[108,248,249],{},"简洁干净，适合习惯 Python 缩进风格的人",[90,251,252,257,264],{},[108,253,254],{},[29,255,256],{},"社区流行度",[108,258,259,261,262],{},[29,260,130],{},"，绝大多数项目使用 ",[38,263,40],{},[108,265,266],{},"小众，多用于个人偏好或老项目",[152,268,269],{"id":269},"代码示例对比",[25,271,272,278],{},[29,273,274,275,277],{},"SCSS（",[38,276,40],{},"）","：",[63,280,284],{"className":281,"code":282,"language":283,"meta":69,"style":69},"language-scss shiki shiki-themes material-theme-lighter github-light github-dark","$primary-color: #3498db;\n\n.nav {\n  ul {\n    margin: 0;\n    li {\n      display: inline-block;\n      a {\n        color: $primary-color;\n        &:hover {\n          text-decoration: underline;\n        }\n      }\n    }\n  }\n}\n","scss",[38,285,286,310,317,331,340,355,363,376,384,397,411,424,430,436,442,448],{"__ignoreMap":69},[287,288,291,295,299,303,307],"span",{"class":289,"line":290},"line",1,[287,292,294],{"class":293},"sMMDD","$primary-color",[287,296,298],{"class":297},"sP7_E",":",[287,300,302],{"class":301},"s39Yj"," #",[287,304,306],{"class":305},"s_hVV","3498db",[287,308,309],{"class":297},";\n",[287,311,313],{"class":289,"line":312},2,[287,314,316],{"emptyLinePlaceholder":315},true,"\n",[287,318,320,324,328],{"class":289,"line":319},3,[287,321,323],{"class":322},"stp6e",".",[287,325,327],{"class":326},"sbgvK","nav",[287,329,330],{"class":297}," {\n",[287,332,334,338],{"class":289,"line":333},4,[287,335,337],{"class":336},"s83vy","  ul",[287,339,330],{"class":297},[287,341,343,347,349,353],{"class":289,"line":342},5,[287,344,346],{"class":345},"soE4H","    margin",[287,348,298],{"class":297},[287,350,352],{"class":351},"srdBf"," 0",[287,354,309],{"class":297},[287,356,358,361],{"class":289,"line":357},6,[287,359,360],{"class":336},"    li",[287,362,330],{"class":297},[287,364,366,369,371,374],{"class":289,"line":365},7,[287,367,368],{"class":345},"      display",[287,370,298],{"class":297},[287,372,373],{"class":305}," inline-block",[287,375,309],{"class":297},[287,377,379,382],{"class":289,"line":378},8,[287,380,381],{"class":336},"      a",[287,383,330],{"class":297},[287,385,387,390,392,395],{"class":289,"line":386},9,[287,388,389],{"class":345},"        color",[287,391,298],{"class":297},[287,393,394],{"class":293}," $primary-color",[287,396,309],{"class":297},[287,398,400,403,405,409],{"class":289,"line":399},10,[287,401,402],{"class":336},"        &",[287,404,298],{"class":322},[287,406,408],{"class":407},"s9AJx","hover",[287,410,330],{"class":297},[287,412,414,417,419,422],{"class":289,"line":413},11,[287,415,416],{"class":345},"          text-decoration",[287,418,298],{"class":297},[287,420,421],{"class":305}," underline",[287,423,309],{"class":297},[287,425,427],{"class":289,"line":426},12,[287,428,429],{"class":297},"        }\n",[287,431,433],{"class":289,"line":432},13,[287,434,435],{"class":297},"      }\n",[287,437,439],{"class":289,"line":438},14,[287,440,441],{"class":297},"    }\n",[287,443,445],{"class":289,"line":444},15,[287,446,447],{"class":297},"  }\n",[287,449,451],{"class":289,"line":450},16,[287,452,453],{"class":297},"}\n",[25,455,456,278],{},[29,457,458,459,277],{},"缩进语法（",[38,460,44],{},[63,462,465],{"className":463,"code":464,"language":13,"meta":69,"style":69},"language-sass shiki shiki-themes material-theme-lighter github-light github-dark","$primary-color: #3498db\n\n.nav\n  ul\n    margin: 0\n    li\n      display: inline-block\n      a\n        color: $primary-color\n        &:hover\n          text-decoration: underline\n",[38,466,467,472,476,481,486,491,496,501,506,511,516],{"__ignoreMap":69},[287,468,469],{"class":289,"line":290},[287,470,471],{},"$primary-color: #3498db\n",[287,473,474],{"class":289,"line":312},[287,475,316],{"emptyLinePlaceholder":315},[287,477,478],{"class":289,"line":319},[287,479,480],{},".nav\n",[287,482,483],{"class":289,"line":333},[287,484,485],{},"  ul\n",[287,487,488],{"class":289,"line":342},[287,489,490],{},"    margin: 0\n",[287,492,493],{"class":289,"line":357},[287,494,495],{},"    li\n",[287,497,498],{"class":289,"line":365},[287,499,500],{},"      display: inline-block\n",[287,502,503],{"class":289,"line":378},[287,504,505],{},"      a\n",[287,507,508],{"class":289,"line":386},[287,509,510],{},"        color: $primary-color\n",[287,512,513],{"class":289,"line":399},[287,514,515],{},"        &:hover\n",[287,517,518],{"class":289,"line":413},[287,519,520],{},"          text-decoration: underline\n",[25,522,523,524,526,527,529],{},"可以看出：SCSS 保留了 ",[38,525,122],{}," 和 ",[38,528,126],{},"，符合传统 CSS 习惯；缩进语法用换行与缩进替代大括号和分号。",[152,531,532],{"id":532},"历史背景",[534,535,536,549],"ul",{},[537,538,539,542,543,545,546,548],"li",{},[29,540,541],{},"2006 年","：最初的 Sass 语法就是",[29,544,137],{},"（",[38,547,44],{},"），设计灵感来自 Haml，旨在减少符号噪音。",[537,550,551,554,555,545,557,559],{},[29,552,553],{},"2010 年","：Sass 3 引入了 ",[29,556,112],{},[38,558,40],{},"），目的是降低 CSS 开发者的入门门槛。此后 SCSS 迅速成为主流，原缩进语法被很多人称为“老式 Sass”。",[152,561,562],{"id":562},"实际项目中如何选择",[84,564,565,575],{},[87,566,567],{},[90,568,569,572],{},[93,570,571],{},"场景",[93,573,574],{},"推荐",[103,576,577,587,597],{},[90,578,579,582],{},[108,580,581],{},"新项目、团队协作、大多数日常工作",[108,583,584,586],{},[29,585,112],{}," —— 生态系统全面，IDE 支持好，易于迁移和维护",[90,588,589,592],{},[108,590,591],{},"个人极简主义偏好，希望代码更精简",[108,593,458,594,596],{},[38,595,44],{},"）—— 但不建议团队使用",[90,598,599,605],{},[108,600,601,602,604],{},"维护已有 ",[38,603,44],{}," 的老项目",[108,606,607],{},"保持原样，或逐步迁移到 SCSS（可混用不同文件）",[25,609,610,613,614,618,619,621],{},[29,611,612],{},"结论","：二者是同一预处理器的不同语法；新项目与团队协作请默认 ",[29,615,274,616,277],{},[38,617,40],{},"。日常说「用 Sass」多数场景下指的就是 ",[29,620,112],{},"。",[47,623,625],{"id":624},"三核心能力速览","三、核心能力速览",[84,627,628,638],{},[87,629,630],{},[90,631,632,635],{},[93,633,634],{},"特性",[93,636,637],{},"说明",[103,639,640,656,681],{},[90,641,642,645],{},[108,643,644],{},"变量、嵌套、运算",[108,646,647,650,651],{},[38,648,649],{},"$name: value","、选择器嵌套、数学\u002F颜色运算 → 详见 ",[652,653,655],"a",{"href":654},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-syntax","语法基础",[90,657,658,661],{},[108,659,660],{},"Mixin、继承",[108,662,663,41,666,669,670,669,673,676,677],{},[38,664,665],{},"@mixin",[38,667,668],{},"@include","、",[38,671,672],{},"@extend",[38,674,675],{},"%placeholder"," → 详见 ",[652,678,680],{"href":679},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-reuse","复用机制",[90,682,683,686],{},[108,684,685],{},"模块、内置函数、控制指令",[108,687,688,691,692,669,695,698,699,702,703,702,706,676,709],{},[38,689,690],{},"@use"," 替代 ",[38,693,694],{},"@import",[38,696,697],{},"sass:*"," 内置模块、",[38,700,701],{},"@if","\u002F",[38,704,705],{},"@for",[38,707,708],{},"@each",[652,710,712],{"href":711},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-modules","模块与控制流",[47,714,716],{"id":715},"四安装与使用","四、安装与使用",[152,718,720],{"id":719},"安装-dart-sass官方实现","安装 Dart Sass（官方实现）",[63,722,726],{"className":723,"code":724,"language":725,"meta":69,"style":69},"language-bash shiki shiki-themes material-theme-lighter github-light github-dark","npm install -D sass\nnpx sass --version\n","bash",[38,727,728,744],{"__ignoreMap":69},[287,729,730,733,737,741],{"class":289,"line":290},[287,731,732],{"class":326},"npm",[287,734,736],{"class":735},"s_sjI"," install",[287,738,740],{"class":739},"stzsN"," -D",[287,742,743],{"class":735}," sass\n",[287,745,746,749,752],{"class":289,"line":312},[287,747,748],{"class":326},"npx",[287,750,751],{"class":735}," sass",[287,753,754],{"class":739}," --version\n",[25,756,757,758,764,765],{},"也可用 Homebrew 安装独立 CLI（见 ",[652,759,763],{"href":760,"rel":761},"https:\u002F\u002Fsass-lang.com\u002Finstall",[762],"nofollow","Sass 安装","）。",[29,766,767],{},"现代工作流不需要 Ruby。",[84,769,770,780],{},[87,771,772],{},[90,773,774,777],{},[93,775,776],{},"实现",[93,778,779],{},"状态",[103,781,782,790,801],{},[90,783,784,787],{},[108,785,786],{},"Ruby Sass",[108,788,789],{},"已停止维护",[90,791,792,798],{},[108,793,794,795],{},"LibSass \u002F ",[38,796,797],{},"node-sass",[108,799,800],{},"已弃用，勿用于新项目",[90,802,803,808],{},[108,804,805],{},[29,806,807],{},"Dart Sass",[108,809,810],{},"官方唯一推荐实现",[152,812,814],{"id":813},"常用-cli","常用 CLI",[84,816,817,826],{},[87,818,819],{},[90,820,821,824],{},[93,822,823],{},"命令",[93,825,637],{},[103,827,828,838,848,858],{},[90,829,830,835],{},[108,831,832],{},[38,833,834],{},"sass input.scss output.css",[108,836,837],{},"单文件编译",[90,839,840,845],{},[108,841,842],{},[38,843,844],{},"sass --watch scss:css",[108,846,847],{},"监听目录",[90,849,850,855],{},[108,851,852],{},[38,853,854],{},"sass --style=compressed in.scss out.css",[108,856,857],{},"压缩输出",[90,859,860,865],{},[108,861,862],{},[38,863,864],{},"sass --source-map ...",[108,866,867],{},"生成 source map",[25,869,870,871,874,875,878,879,764],{},"除法运算请使用 ",[38,872,873],{},"sass:math"," 的 ",[38,876,877],{},"math.div()","（见 ",[652,880,881],{"href":654},"运算",[152,883,884],{"id":884},"在构建工具中使用",[84,886,887,896],{},[87,888,889],{},[90,890,891,894],{},[93,892,893],{},"工具",[93,895,637],{},[103,897,898,914,929],{},[90,899,900,905],{},[108,901,902],{},[29,903,904],{},"Vite",[108,906,907,908,910,911],{},"安装 ",[38,909,13],{}," 后即可直接 ",[38,912,913],{},"import '.\u002Fx.scss'",[90,915,916,921],{},[108,917,918],{},[29,919,920],{},"Webpack",[108,922,923,926,927],{},[38,924,925],{},"sass-loader"," + ",[38,928,13],{},[90,930,931,936],{},[108,932,933],{},[29,934,935],{},"Vue \u002F React",[108,937,938,939,942,943],{},"单文件组件 ",[38,940,941],{},"lang=\"scss\""," + 项目依赖 ",[38,944,13],{},[47,946,948],{"id":947},"五常见错误","五、常见错误",[84,950,951,961],{},[87,952,953],{},[90,954,955,958],{},[93,956,957],{},"现象",[93,959,960],{},"处理",[103,962,963,978,993,1003],{},[90,964,965,968],{},[108,966,967],{},"变量未定义",[108,969,970,971,974,975,977],{},"检查 ",[38,972,973],{},"$","、作用域、",[38,976,690],{}," 命名空间是否正确",[90,979,980,985],{},[108,981,982,984],{},[38,983,702],{}," 被当除法警告",[108,986,119,987,989,990],{},[38,988,877],{}," 或原生 ",[38,991,992],{},"calc()",[90,994,995,1000],{},[108,996,997,999],{},[38,998,44],{}," 缩进错误",[108,1001,1002],{},"统一 2 空格缩进，勿混用 Tab",[90,1004,1005,1011],{},[108,1006,1007,1008,1010],{},"SCSS 与 ",[38,1009,44],{}," 混用报错",[108,1012,1013],{},"两种语法不能在同一文件内混写，需分文件维护",[47,1015,1016],{"id":1016},"参考文献",[84,1018,1019,1028],{},[87,1020,1021],{},[90,1022,1023,1026],{},[93,1024,1025],{},"资料",[93,1027,637],{},[103,1029,1030,1042,1052,1064],{},[90,1031,1032,1039],{},[108,1033,1034],{},[652,1035,1038],{"href":1036,"rel":1037},"https:\u002F\u002Fsass-lang.com\u002Fdocumentation\u002F",[762],"Sass 官方文档",[108,1040,1041],{},"语法与 API",[90,1043,1044,1049],{},[108,1045,1046],{},[652,1047,763],{"href":760,"rel":1048},[762],[108,1050,1051],{},"Dart Sass 安装方式",[90,1053,1054,1061],{},[108,1055,1056],{},[652,1057,1060],{"href":1058,"rel":1059},"https:\u002F\u002Fsass-lang.com\u002Fdocumentation\u002Fsyntax",[762],"Sass：Syntax",[108,1062,1063],{},"SCSS 与缩进语法",[90,1065,1066,1073],{},[108,1067,1068],{},[652,1069,1072],{"href":1070,"rel":1071},"https:\u002F\u002Fsass-lang.com\u002Fdocumentation\u002Fat-rules\u002Fuse",[762],"Sass：@use",[108,1074,1075],{},"模块系统",[1077,1078,1079],"style",{},"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 .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 .s83vy, html code.shiki .s83vy{--shiki-light:#E2931D;--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .soE4H, html code.shiki .soE4H{--shiki-light:#8796B0;--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 .s9AJx, html code.shiki .s9AJx{--shiki-light:#9C3EDA;--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 .s_sjI, html code.shiki .s_sjI{--shiki-light:#91B859;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .stzsN, html code.shiki .stzsN{--shiki-light:#91B859;--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":69,"searchDepth":312,"depth":312,"links":1081},[1082,1083,1089,1090,1095,1096],{"id":49,"depth":312,"text":50},{"id":74,"depth":312,"text":75,"children":1084},[1085,1086,1087,1088],{"id":154,"depth":319,"text":154},{"id":269,"depth":319,"text":269},{"id":532,"depth":319,"text":532},{"id":562,"depth":319,"text":562},{"id":624,"depth":312,"text":625},{"id":715,"depth":312,"text":716,"children":1091},[1092,1093,1094],{"id":719,"depth":319,"text":720},{"id":813,"depth":319,"text":814},{"id":884,"depth":319,"text":884},{"id":947,"depth":312,"text":948},{"id":1016,"depth":312,"text":1016},{"title":8,"description":9},"knowledge\u002Fbooklet\u002Fweb\u002FCss\u002FSass\u002Fsass-intro","knowledge\u002Fknowledge\u002Fbooklet\u002Fweb\u002FCss\u002FSass\u002Fsass-intro.md","md",{"items":1102},[1103,1106,1109,1112,1116,1120],{"path":711,"title":1104,"description":1105,"category":10,"score":386},"模块与控制流：@use、内置函数、@if\u002F@for\u002F@each","Dart Sass 推荐用 @use\u002F@forward 替代已弃用的 @import；内置 sass:* 模块提供颜色、字符串、列表、Map、数学等函数；@if\u002F@for\u002F@each\u002F@while 用于条件与循环生成样式。",{"path":679,"title":1107,"description":1108,"category":10,"score":386},"复用机制：Mixin 与继承","Mixin（@mixin\u002F@include）支持参数与 @content，适合动态样式；@extend 与 %placeholder 通过合并选择器复用完全相同的静态样式，减少 CSS 体积。",{"path":654,"title":1110,"description":1111,"category":10,"score":386},"语法基础：变量、嵌套与运算","Sass 语法基础：$ 变量与插值、选择器嵌套与 & 父选择器引用、数学\u002F颜色\u002F字符串运算、三种注释语法及与原生 CSS 嵌套的关系。",{"path":1113,"title":1114,"description":1115,"category":10,"score":333},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fless\u002Fless-core","Less 基础与核心语法","Less 是 JavaScript 实现的 CSS 预处理器，在 CSS 语法上扩展变量（@）、嵌套、混合、运算与函数，编译为普通 CSS 后由浏览器加载；本文覆盖安装、CLI、构建工具集成与全部核心语法。",{"path":1117,"title":1118,"description":1119,"category":10,"score":333},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fcolor","颜色与背景","color 设置前景（多为文字）色；background-* 设置元素背景（颜色、图像、渐变）。二者共同决定对比度与视觉层次，直接影响 无障碍 阅读体验。排版中的文本颜色用法见 排版与文本。",{"path":1121,"title":1122,"description":1123,"category":10,"score":333},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fless\u002Fproject","工程化集成与扩展","Less 可集成到 Vite、Webpack、Vue CLI 等工具链，实现编译、全局变量注入与路径处理。",{"series":1125,"title":13,"items":1126,"index":1131,"prev":1132,"next":1133},"booklet\u002Fweb\u002Fcss\u002Fsass",[1127,1128,1129,1130],{"path":7,"title":8,"date":15,"pinned":16},{"path":711,"title":1104,"date":15,"pinned":16},{"path":679,"title":1107,"date":15,"pinned":16},{"path":654,"title":1110,"date":15,"pinned":16},0,null,{"path":711,"title":1104,"date":15,"pinned":16}]