[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"knowledge-\u002Fapi\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fcss-sass-less":3,"knowledge-related-\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fcss-sass-less":953,"knowledge-series-\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fcss-sass-less":977},{"source":4,"connector":5,"page":6},"sqlite","better-sqlite3",{"path":7,"title":8,"description":9,"category":10,"tags":11,"date":14,"pinned":15,"draft":15,"body":16,"seo":949,"stem":950,"id":951,"extension":952},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fcss-sass-less","CSS、Sass 与 Less","本文对比原生 CSS 与两种主流预处理器 Sass（通常指 SCSS 语法）、Less，便于选型。语法细节见 Sass 基础、Less 基础。","技能小册",[12,13],"css","preprocessor","2019-09-28",false,{"type":17,"value":18,"toc":934},"minimark",[19,23,50,54,160,179,182,352,356,398,404,408,429,439,443,466,471,475,501,514,517,526,530,543,555,637,705,781,792,795,847,850,853,930],[20,21,8],"h1",{"id":22},"csssass-与-less",[24,25,26,27,31,32,35,36,39,40,35,45,49],"p",{},"本文对比",[28,29,30],"strong",{},"原生 CSS"," 与两种主流预处理器 ",[28,33,34],{},"Sass（通常指 SCSS 语法）","、",[28,37,38],{},"Less","，便于选型。语法细节见 ",[41,42,44],"a",{"href":43},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-intro","Sass 简介",[41,46,48],{"href":47},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fless\u002Fless-core","Less 核心语法","。",[51,52,53],"h2",{"id":53},"分别是什么",[55,56,57,73],"table",{},[58,59,60],"thead",{},[61,62,63,67,70],"tr",{},[64,65,66],"th",{},"名称",[64,68,69],{},"类型",[64,71,72],{},"说明",[74,75,76,99,120,145],"tbody",{},[61,77,78,84,87],{},[79,80,81],"td",{},[28,82,83],{},"CSS",[79,85,86],{},"样式表语言",[79,88,89,90,94,95,98],{},"浏览器直接解析；现代 CSS 已支持嵌套、自定义属性（",[91,92,93],"code",{},"--var","）、",[91,96,97],{},"@layer"," 等",[61,100,101,106,109],{},[79,102,103],{},[28,104,105],{},"Sass",[79,107,108],{},"CSS 预处理器",[79,110,111,112,115,116,119],{},"官方实现为 ",[28,113,114],{},"Dart Sass","（npm 包 ",[91,117,118],{},"sass","），需编译为 CSS",[61,121,122,127,130],{},[79,123,124],{},[28,125,126],{},"SCSS",[79,128,129],{},"Sass 的一种语法",[79,131,132,133,136,137,140,141,144],{},"使用 ",[91,134,135],{},"{}"," 与 ",[91,138,139],{},";","，合法 CSS 即合法 SCSS，为当前主流写法（",[91,142,143],{},".scss","）",[61,146,147,151,153],{},[79,148,149],{},[28,150,38],{},[79,152,108],{},[79,154,155,156,159],{},"JavaScript 实现，npm 包 ",[91,157,158],{},"less","，需编译为 CSS",[161,162,163],"blockquote",{},[24,164,165,166,169,170,173,174,176,177,49],{},"Sass 与 SCSS 是",[28,167,168],{},"同一工具的不同语法","：",[91,171,172],{},".sass"," 为缩进语法，",[91,175,143],{}," 为大括号语法。日常说「用 Sass」多指 ",[28,178,126],{},[51,180,181],{"id":181},"核心对比",[55,183,184,197],{},[58,185,186],{},[61,187,188,191,193,195],{},[64,189,190],{},"维度",[64,192,83],{},[64,194,126],{},[64,196,38],{},[74,198,199,212,233,251,276,297,329],{},[61,200,201,204,207,210],{},[79,202,203],{},"浏览器直接运行",[79,205,206],{},"是",[79,208,209],{},"否（需编译）",[79,211,209],{},[61,213,214,217,223,228],{},[79,215,216],{},"变量",[79,218,219,220],{},"自定义属性 ",[91,221,222],{},"--x",[79,224,225],{},[91,226,227],{},"$x",[79,229,230],{},[91,231,232],{},"@x",[61,234,235,238,241,247],{},[79,236,237],{},"嵌套",[79,239,240],{},"原生嵌套（现代浏览器）",[79,242,243,244,144],{},"支持（",[91,245,246],{},"&",[79,248,243,249,144],{},[91,250,246],{},[61,252,253,256,261,270],{},[79,254,255],{},"复用块",[79,257,258,260],{},[91,259,97],{},"、类名",[79,262,263,266,267],{},[91,264,265],{},"@mixin"," \u002F ",[91,268,269],{},"@include",[79,271,272,273,144],{},"混合（",[91,274,275],{},".mixin()",[61,277,278,281,287,293],{},[79,279,280],{},"模块化",[79,282,283,286],{},[91,284,285],{},"@import","（原生，有层叠问题）",[79,288,289,290],{},"推荐 ",[91,291,292],{},"@use",[79,294,295],{},[91,296,285],{},[61,298,299,302,312,323],{},[79,300,301],{},"逻辑",[79,303,304,305,35,308,311],{},"有限（",[91,306,307],{},"@media",[91,309,310],{},"@supports"," 等）",[79,313,314,35,317,35,320,98],{},[91,315,316],{},"@if",[91,318,319],{},"@for",[91,321,322],{},"@each",[79,324,325,328],{},[91,326,327],{},"when"," 守卫、较少循环",[61,330,331,334,337,345],{},[79,332,333],{},"官方编译器",[79,335,336],{},"—",[79,338,339,341,342,144],{},[28,340,114],{},"（",[91,343,344],{},"npm i -D sass",[79,346,347,341,349,144],{},[28,348,38],{},[91,350,351],{},"npm i -D less",[51,353,355],{"id":354},"sassscss-与缩进语法","Sass：SCSS 与缩进语法",[55,357,358,374],{},[58,359,360],{},[61,361,362,364,369],{},[64,363],{},[64,365,366,367,144],{},"SCSS（",[91,368,143],{},[64,370,371,372,144],{},"缩进语法（",[91,373,172],{},[74,375,376,387],{},[61,377,378,381,384],{},[79,379,380],{},"与 CSS",[79,382,383],{},"超集，可复制粘贴 CSS",[79,385,386],{},"语法不同，不能直接贴 CSS",[61,388,389,392,395],{},[79,390,391],{},"采用率",[79,393,394],{},"主流",[79,396,397],{},"少见，多为历史项目",[24,399,400,403],{},[28,401,402],{},"新项目建议 SCSS","，勿将缩进语法作为团队默认。",[51,405,407],{"id":406},"何时用原生-css","何时用原生 CSS",[409,410,411,415,426],"ul",{},[412,413,414],"li",{},"样式量少、无构建步骤的静态页",[412,416,417,418,421,422,425],{},"团队规范以",[28,419,420],{},"现代 CSS"," 为主（嵌套、",[91,423,424],{},"clamp()","、自定义属性、Grid\u002FFlex）",[412,427,428],{},"不希望增加编译链路",[24,430,431,432,438],{},"预处理器仍擅长：",[28,433,434,435,437],{},"跨文件变量主题、",[91,436,265],{}," 参数化、复杂循环生成样式"," 等原生不便表达的场景。",[51,440,442],{"id":441},"何时用-scss","何时用 SCSS",[409,444,445,448,460],{},[412,446,447],{},"中大型项目、组件库源码（如 Bootstrap 5+ 使用 Sass）",[412,449,450,451,453,454,456,457,98],{},"需要 ",[91,452,292],{}," 模块化、",[91,455,265],{}," 带参数、",[91,458,459],{},"@content",[412,461,462,463,465],{},"与 Vite \u002F Webpack 等已集成 ",[91,464,118],{}," 的工具链配合",[24,467,468],{},[28,469,470],{},"无历史包袱时，SCSS 是常见默认选择。",[51,472,474],{"id":473},"何时用-less","何时用 Less",[409,476,477,488,495],{},[412,478,479,480,483,484,487],{},"维护",[28,481,482],{},"已基于 Less 的主题或工程","（如 Ant Design ",[28,485,486],{},"4 及更早","版本的主题变量体系）",[412,489,490,491,494],{},"团队已有 Less 规范与 ",[91,492,493],{},"less-loader"," 配置",[412,496,497,498,144],{},"需要较轻量的 JS 侧编译器（",[91,499,500],{},"lessc",[161,502,503],{},[24,504,505,506,509,510,513],{},"Ant Design ",[28,507,508],{},"5+"," 采用 ",[28,511,512],{},"CSS-in-JS"," 方案，不再以 Less 作为默认样式入口；选型请以所用 UI 库官方文档为准。",[51,515,516],{"id":516},"构建工具",[24,518,519,520,522,523,525],{},"Vite、Webpack、Vue CLI 等均可通过安装 ",[91,521,118],{}," 或 ",[91,524,158],{}," 处理对应文件，无需单独安装 Ruby。",[51,527,529],{"id":528},"与原生-css-演进的关系","与原生 CSS 演进的关系",[24,531,532,533,536,537,542],{},"原生 CSS 已逐步吸收部分预处理概念（嵌套、变量、",[91,534,535],{},"color-mix()"," 等），但",[28,538,539,540],{},"循环、带参 mixin、模块 ",[91,541,292],{}," 等仍依赖预处理器。采用 SCSS 语法与原生嵌套、逻辑属性并存的项目较多。",[544,545,547,548,551,552],"h3",{"id":546},"变量scss-与-css","变量：SCSS ",[91,549,550],{},"$"," 与 CSS ",[91,553,554],{},"--",[55,556,557,575],{},[58,558,559],{},[61,560,561,563,569],{},[64,562],{},[64,564,565,566],{},"SCSS ",[91,567,568],{},"$variable",[64,570,571,572],{},"CSS ",[91,573,574],{},"--custom-property",[74,576,577,594,608,623],{},[61,578,579,582,588],{},[79,580,581],{},"生效阶段",[79,583,584,587],{},[28,585,586],{},"编译期","替换为具体值",[79,589,590,593],{},[28,591,592],{},"运行时","由浏览器解析",[61,595,596,599,605],{},[79,597,598],{},"作用域",[79,600,601,602,604],{},"文件\u002F模块（",[91,603,292],{}," 命名空间）",[79,606,607],{},"继承、受层叠与 DOM 结构影响",[61,609,610,613,620],{},[79,611,612],{},"用于选择器、属性名",[79,614,615,616,619],{},"可以（如 ",[91,617,618],{},"#{$id}"," 插值）",[79,621,622],{},"不行（仅属性值等）",[61,624,625,628,631],{},[79,626,627],{},"参与媒体查询",[79,629,630],{},"可以（编译期已知）",[79,632,633,634,311],{},"不行（需 ",[91,635,636],{},"@custom-media",[638,639,644],"pre",{"className":640,"code":641,"language":642,"meta":643,"style":643},"language-scss shiki shiki-themes material-theme-lighter github-light github-dark","\u002F\u002F SCSS：编译后消失\n$gap: 1rem;\n.card { padding: $gap; }\n","scss","",[91,645,646,655,677],{"__ignoreMap":643},[647,648,651],"span",{"class":649,"line":650},"line",1,[647,652,654],{"class":653},"sutJx","\u002F\u002F SCSS：编译后消失\n",[647,656,658,662,666,670,674],{"class":649,"line":657},2,[647,659,661],{"class":660},"sMMDD","$gap",[647,663,665],{"class":664},"sP7_E",":",[647,667,669],{"class":668},"srdBf"," 1",[647,671,673],{"class":672},"sw1J6","rem",[647,675,676],{"class":664},";\n",[647,678,680,684,688,691,695,697,700,702],{"class":649,"line":679},3,[647,681,683],{"class":682},"stp6e",".",[647,685,687],{"class":686},"sbgvK","card",[647,689,690],{"class":664}," {",[647,692,694],{"class":693},"soE4H"," padding",[647,696,665],{"class":664},[647,698,699],{"class":660}," $gap",[647,701,139],{"class":664},[647,703,704],{"class":664}," }\n",[638,706,709],{"className":707,"code":708,"language":12,"meta":643,"style":643},"language-css shiki shiki-themes material-theme-lighter github-light github-dark","\u002F* CSS：保留在输出中，可随主题切换 *\u002F\n:root {\n    --gap: 1rem;\n}\n.card {\n    padding: var(--gap);\n}\n",[91,710,711,716,727,740,746,755,776],{"__ignoreMap":643},[647,712,713],{"class":649,"line":650},[647,714,715],{"class":653},"\u002F* CSS：保留在输出中，可随主题切换 *\u002F\n",[647,717,718,720,724],{"class":649,"line":657},[647,719,665],{"class":682},[647,721,723],{"class":722},"s9AJx","root",[647,725,726],{"class":664}," {\n",[647,728,729,732,734,736,738],{"class":649,"line":679},[647,730,731],{"class":660},"    --gap",[647,733,665],{"class":664},[647,735,669],{"class":668},[647,737,673],{"class":672},[647,739,676],{"class":664},[647,741,743],{"class":649,"line":742},4,[647,744,745],{"class":664},"}\n",[647,747,749,751,753],{"class":649,"line":748},5,[647,750,683],{"class":682},[647,752,687],{"class":686},[647,754,726],{"class":664},[647,756,758,761,763,767,770,773],{"class":649,"line":757},6,[647,759,760],{"class":693},"    padding",[647,762,665],{"class":664},[647,764,766],{"class":765},"sptTA"," var",[647,768,769],{"class":664},"(",[647,771,772],{"class":660},"--gap",[647,774,775],{"class":664},");\n",[647,777,779],{"class":649,"line":778},7,[647,780,745],{"class":664},[24,782,783,784,787,788,791],{},"主题切换、深色模式、组件库对外 API 常优先 ",[28,785,786],{},"CSS 自定义属性","；设计令牌源文件用 ",[28,789,790],{},"SCSS 变量"," 生成多主题 CSS 也常见。",[51,793,794],{"id":794},"速查",[55,796,797,807],{},[58,798,799],{},[61,800,801,804],{},[64,802,803],{},"需求",[64,805,806],{},"建议",[74,808,809,819,829,838],{},[61,810,811,814],{},[79,812,813],{},"零编译、依赖最少",[79,815,816,818],{},[28,817,83],{},"（善用现代特性）",[61,820,821,824],{},[79,822,823],{},"功能完整、生态大、长期维护",[79,825,826,828],{},[28,827,126],{}," + Dart Sass",[61,830,831,834],{},[79,832,833],{},"延续 Less 主题 \u002F 老项目",[79,835,836],{},[28,837,38],{},[61,839,840,843],{},[79,841,842],{},"Bootstrap 5+、多数新 UI 源码",[79,844,845],{},[28,846,126],{},[51,848,849],{"id":849},"参考文献",[24,851,852],{},"以下链接在编写时均可正常访问：",[55,854,855,864],{},[58,856,857],{},[61,858,859,862],{},[64,860,861],{},"资料",[64,863,72],{},[74,865,866,879,891,903,918],{},[61,867,868,876],{},[79,869,870],{},[41,871,875],{"href":872,"rel":873},"https:\u002F\u002Fsass-lang.com\u002Fdocumentation\u002F",[874],"nofollow","Sass 官方文档",[79,877,878],{},"SCSS 语法、@use、编译（英文）",[61,880,881,888],{},[79,882,883],{},[41,884,887],{"href":885,"rel":886},"https:\u002F\u002Flesscss.org\u002F",[874],"Less 官方文档",[79,889,890],{},"语法与函数（英文）",[61,892,893,900],{},[79,894,895],{},[41,896,899],{"href":897,"rel":898},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS",[874],"MDN：CSS",[79,901,902],{},"原生 CSS 参考",[61,904,905,912],{},[79,906,907],{},[41,908,911],{"href":909,"rel":910},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002FCSS_cascading_variables\u002FUsing_CSS_custom_properties",[874],"MDN：使用 CSS 自定义属性",[79,913,914,917],{},[91,915,916],{},"--*"," 变量",[61,919,920,927],{},[79,921,922],{},[41,923,926],{"href":924,"rel":925},"https:\u002F\u002Fsass-lang.com\u002Fdocumentation\u002Fat-rules\u002Fimport",[874],"Sass：@import 弃用说明",[79,928,929],{},"迁移至 @use",[931,932,933],"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 .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 .sP7_E, html code.shiki .sP7_E{--shiki-light:#39ADB5;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sMMDD, html code.shiki .sMMDD{--shiki-light:#90A4AE;--shiki-default:#E36209;--shiki-dark:#FFAB70}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 .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 pre.shiki code .sptTA, html code.shiki .sptTA{--shiki-light:#6182B8;--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);}",{"title":643,"searchDepth":657,"depth":657,"links":935},[936,937,938,939,940,941,942,943,947,948],{"id":53,"depth":657,"text":53},{"id":181,"depth":657,"text":181},{"id":354,"depth":657,"text":355},{"id":406,"depth":657,"text":407},{"id":441,"depth":657,"text":442},{"id":473,"depth":657,"text":474},{"id":516,"depth":657,"text":516},{"id":528,"depth":657,"text":529,"children":944},[945],{"id":546,"depth":679,"text":946},"变量：SCSS $ 与 CSS --",{"id":794,"depth":657,"text":794},{"id":849,"depth":657,"text":849},{"title":8,"description":9},"knowledge\u002Fbooklet\u002Fweb\u002FCss\u002Fcss-sass-less","knowledge\u002Fknowledge\u002Fbooklet\u002Fweb\u002FCss\u002Fcss-sass-less.md","md",{"items":954},[955,958,961,965,969,973],{"path":47,"title":956,"description":957,"category":10,"score":757},"Less 基础与核心语法","Less 是 JavaScript 实现的 CSS 预处理器，在 CSS 语法上扩展变量（@）、嵌套、混合、运算与函数，编译为普通 CSS 后由浏览器加载；本文覆盖安装、CLI、构建工具集成与全部核心语法。",{"path":43,"title":959,"description":960,"category":10,"score":757},"Sass 简介与安装","Sass（Syntactically Awesome Style Sheets）是 CSS 预处理器，在 CSS 语法上增加变量、嵌套、混合、模块、控制指令等；有 SCSS 与缩进语法两种源码语法，官方实现为 Dart Sass。",{"path":962,"title":963,"description":964,"category":10,"score":757},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-modules","模块与控制流：@use、内置函数、@if\u002F@for\u002F@each","Dart Sass 推荐用 @use\u002F@forward 替代已弃用的 @import；内置 sass:* 模块提供颜色、字符串、列表、Map、数学等函数；@if\u002F@for\u002F@each\u002F@while 用于条件与循环生成样式。",{"path":966,"title":967,"description":968,"category":10,"score":757},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-reuse","复用机制：Mixin 与继承","Mixin（@mixin\u002F@include）支持参数与 @content，适合动态样式；@extend 与 %placeholder 通过合并选择器复用完全相同的静态样式，减少 CSS 体积。",{"path":970,"title":971,"description":972,"category":10,"score":757},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-syntax","语法基础：变量、嵌套与运算","Sass 语法基础：$ 变量与插值、选择器嵌套与 & 父选择器引用、数学\u002F颜色\u002F字符串运算、三种注释语法及与原生 CSS 嵌套的关系。",{"path":974,"title":975,"description":976,"category":10,"score":757},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fcolor","颜色与背景","color 设置前景（多为文字）色；background-* 设置元素背景（颜色、图像、渐变）。二者共同决定对比度与视觉层次，直接影响 无障碍 阅读体验。排版中的文本颜色用法见 排版与文本。",{"series":978,"title":12,"items":979,"index":657,"prev":1041,"next":1042},"booklet\u002Fweb\u002Fcss",[980,984,986,987,991,995,999,1003,1007,1011,1013,1017,1021,1025,1029,1033,1034,1035,1036,1037],{"path":981,"title":982,"date":983,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fanimation","变换、过渡与动画","2023-01-09",{"path":974,"title":975,"date":985,"pinned":15},"2025-05-01",{"path":7,"title":8,"date":14,"pinned":15},{"path":988,"title":989,"date":990,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fdisplay","display 与常规流","2024-01-30",{"path":992,"title":993,"date":994,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fflex","弹性盒子","2020-09-29",{"path":996,"title":997,"date":998,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Ffont-optimization","字体优化策略","2021-04-23",{"path":1000,"title":1001,"date":1002,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Ffont-unit","字体单位","2021-10-12",{"path":1004,"title":1005,"date":1006,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fgrid","网格布局","2020-11-09",{"path":1008,"title":1009,"date":1010,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Flayout-text","排版与文本","2024-01-25",{"path":47,"title":956,"date":1012,"pinned":15},"2026-07-23",{"path":1014,"title":1015,"date":1016,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fmodel","盒模型","2023-09-04",{"path":1018,"title":1019,"date":1020,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fnew-css","现代 CSS 特性概览","2021-11-09",{"path":1022,"title":1023,"date":1024,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fposition","定位","2022-11-08",{"path":1026,"title":1027,"date":1028,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fless\u002Fproject","工程化集成与扩展","2024-07-02",{"path":1030,"title":1031,"date":1032,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fresponsive","响应式设计与交互","2022-01-31",{"path":43,"title":959,"date":1012,"pinned":15},{"path":962,"title":963,"date":1012,"pinned":15},{"path":966,"title":967,"date":1012,"pinned":15},{"path":970,"title":971,"date":1012,"pinned":15},{"path":1038,"title":1039,"date":1040,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fvisual-effects","视觉效果","2021-11-04",{"path":974,"title":975,"date":985,"pinned":15},{"path":988,"title":989,"date":990,"pinned":15}]