freeCodeCamp 课程源码解析Inherit CSS Variables——在 :root 定义 CSS 变量并理解继承机制【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp本文以 freeCodeCamp 响应式网页设计Responsive Web Design课程中 Inherit CSS Variables继承 CSS 变量练习挑战为研究对象。该挑战文件位于课程数据目录curriculum/challenges/english/blocks/basic-css/下属于 basic-css 课程块中CSS 变量Custom Properties教学序列的一环。读完本文你将掌握CSS 变量为何可以被后代元素自动使用、:root伪类选择器的作用、var()回退值与变量继承的配合关系以及该练习在仓库中如何通过种子代码seed与正则断言assert完成自动判题。课程定位这道挑战处于哪个知识点序列挑战文件 5a9d7295424fe3d0e10cad14.md 的 YAML 元数据声明了它的基本属性id: 5a9d7295424fe3d0e10cad14 title: Inherit CSS Variables challengeType: 0 videoUrl: https://scrimba.com/c/cyLZZhZ forumTopicId: 301088 dashedName: inherit-css-variableschallengeType: 0表示这是一道修改代码型练习dashedName用于生成论坛与路由标识。课程块的组织结构定义在 basic-css.json 中。按challengeOrder数组的顺序CSS 变量这一教学序列依次是顺序挑战标题文件1Use CSS Variables to change several elements at once5a9d725e424fe3d0e10cad10.md2Create a custom CSS Variable5a9d726c424fe3d0e10cad11.md3Use a custom CSS Variable5a9d727a424fe3d0e10cad12.md4Attach a Fallback value to a CSS Variable5a9d7286424fe3d0e10cad13.md5Inherit CSS Variables本篇5a9d7295424fe3d0e10cad14.md6Change a variable for a specific area5a9d72a1424fe3d0e10cad15.md7Use a media query to change a variable5a9d72ad424fe3d0e10cad16.md可以看到本篇是承上启下的关键一步前序挑战刚教会定义变量 → 用var()取用变量 → 附加回退值本篇要求把变量上移到:root验证继承行为随后的两道挑战则进一步演示在局部作用域覆盖变量值。该课程块同时被多个超块引用例如 responsive-web-design.json 将basic-css列为第二个 block而 responsive-web-design-v9.json 中还出现了review-basic-css、quiz-basic-css等复习与测验单元说明 CSS 变量相关知识点在课程体系中被当作需要巩固的核心内容。挑战讲解CSS 变量是继承的就像普通属性一样挑战的--description--段落是本题的核心讲解原文含义如下变量的作用域是声明它的那个选择器及其所有后代。当你创建声明一个 CSS 变量时它在你声明它的选择器内部可用并且在该选择器的任何后代元素中也可用。原因就是 CSS 变量与普通属性一样是**可以被继承inherited**的。要利用这种继承CSS 变量常被定义在:root元素上。:root是一个伪类选择器匹配文档的根元素——通常就是html元素。把变量创建在:root中它们就是全局可用的样式表中的任何其他选择器都能访问到。用一张继承链的示意来理解html是:root匹配的根元素:root (html) ← 在 :root 声明 --penguin-belly: pink └── body ← 继承可用 var(--penguin-belly) └── div.penguin └── div.right-cheek ← 继承可用 var(--penguin-belly) └── div.belly ← 继承可用 var(--penguin-belly) └── ...所有后代均可继承指令--instructions--要求在:root选择器中定义一个名为--penguin-belly的变量值为pink。完成后可以看到该变量被继承所有使用它var(--penguin-belly, ...)的子元素都会获得粉色背景。种子代码seed全景题目给了你什么挑战文件--seed-contents--段落内是学员在编辑器里看到的初始 HTML。题目在:root块里留出了作答区两条/* Only change code ... */注释之间其余 CSS 与 DOM 是只读背景。完整种子代码如下style :root { /* Only change code below this line */ /* Only change code above this line */ } body { background: var(--penguin-belly, #c6faf1); } .penguin { --penguin-skin: gray; --penguin-beak: orange; position: relative; margin: auto; display: block; margin-top: 5%; width: 300px; height: 300px; } .right-cheek { top: 15%; left: 35%; background: var(--penguin-belly, white); width: 60%; height: 70%; border-radius: 70% 70% 60% 60%; } .left-cheek { top: 15%; left: 5%; background: var(--penguin-belly, white); width: 60%; height: 70%; border-radius: 70% 70% 60% 60%; } .belly { top: 60%; left: 2.5%; background: var(--penguin-belly, white); width: 95%; height: 100%; border-radius: 120% 120% 100% 100%; } .penguin-top { top: 10%; left: 25%; background: var(--penguin-skin, gray); width: 50%; height: 45%; border-radius: 70% 70% 60% 60%; } .penguin-bottom { top: 40%; left: 23.5%; background: var(--penguin-skin, gray); width: 53%; height: 45%; border-radius: 70% 70% 100% 100%; } .right-hand { top: 0%; left: -5%; background: var(--penguin-skin, gray); width: 30%; height: 60%; border-radius: 30% 30% 120% 30%; transform: rotate(45deg); z-index: -1; } .left-hand { top: 0%; left: 75%; background: var(--penguin-skin, gray); width: 30%; height: 60%; border-radius: 30% 30% 30% 120%; transform: rotate(-45deg); z-index: -1; } .right-feet { top: 85%; left: 60%; background: var(--penguin-beak, orange); width: 15%; height: 30%; border-radius: 50% 50% 50% 50%; transform: rotate(-80deg); z-index: -2222; } .left-feet { top: 85%; left: 25%; background: var(--penguin-beak, orange); width: 15%; height: 30%; border-radius: 50% 50% 50% 50%; transform: rotate(80deg); z-index: -2222; } .right-eye { top: 45%; left: 60%; background: black; width: 15%; height: 17%; border-radius: 50%; } .left-eye { top: 45%; left: 25%; background: black; width: 15%; height: 17%; border-radius: 50%; } .sparkle { top: 25%; left: 15%; background: white; width: 35%; height: 35%; border-radius: 50%; } .blush-right { top: 65%; left: 15%; background: pink; width: 15%; height: 10%; border-radius: 50%; } .blush-left { top: 65%; left: 70%; background: pink; width: 15%; height: 10%; border-radius: 50%; } .beak-top { top: 60%; left: 40%; background: var(--penguin-beak, orange); width: 20%; height: 10%; border-radius: 50%; } .beak-bottom { top: 65%; left: 42%; background: var(--penguin-beak, orange); width: 16%; height: 10%; border-radius: 50%; } .penguin * { position: absolute; } /style div classpenguin div classpenguin-bottom div classright-hand/div div classleft-hand/div div classright-feet/div div classleft-feet/div /div div classpenguin-top div classright-cheek/div div classleft-cheek/div div classbelly/div div classright-eye div classsparkle/div /div div classleft-eye div classsparkle/div /div div classblush-right/div div classblush-left/div div classbeak-top/div div classbeak-bottom/div /div /div阅读这份种子代码能看出三个为本题服务的精心设计:root是空壳题目唯一允许修改的就是:root { ... }内部作答区位于两条注释之间。四个选择器已经预留了变量引用body、.right-cheek、.left-cheek、.belly的背景全部写成var(--penguin-belly, 回退色)回退色分别是#c6faf1青绿色页面背景和white。在变量尚未声明时浏览器找不到--penguin-belly于是回退值生效——页面呈现青绿色背景、企鹅脸颊与腹部为白色。对照变量已就位.penguin类中声明了--penguin-skin: gray;与--penguin-beak: orange;它们只服务于企鹅自身部件头、脚、喙与本题要求的全局变量形成对照让学员直观体会局部声明与:root全局声明两种作用域。参考答案一行代码触发全页面变色挑战文件--solutions--段落给出的官方答案是style:root {--penguin-belly: pink;}/style展开写即:root { --penguin-belly: pink; }声明生效后的连锁反应是body的背景从回退值#c6faf1青绿变为pink.right-cheek、.left-cheek、.belly三处从回退值white变为pink使用--penguin-skin、--penguin-beak的部件不受影响仍为gray与orange。这正是题目描述的变量被继承、所有使用它的子元素都获得粉色背景的现象。它同时演示了两个机制的叠加变量沿 DOM 树向下继承html→body→ 各部件 div以及var()回退值只在变量缺失时兜底——变量一旦在祖先链上任一层级可用回退值就不再出现。自动判题逻辑断言如何验证你的答案挑战文件--hints--段落中每条提示都对应一条正则断言。本题的判题代码如下assert.match( __helpers.removeCssComments(code), /:root\s*?{[\s\S]*--penguin-belly\s*?:\s*?pink\s*?;[\s\S]*}/gi );从源码结构看这条断言的校验链条是__helpers.removeCssComments(code)先剥离 CSS 注释避免/* Only change code ... */干扰匹配正则/:root\s*?{[\s\S]*--penguin-belly\s*?:\s*?pink\s*?;[\s\S]*}/gi依次要求存在:root选择器及其花括号块内出现自定义属性声明--penguin-belly赋值运算符:两侧允许任意空白值为pink且以分号结束g标志支持多处匹配i标志使其对PINK等大小写变体同样通过。值得注意的是断言并不要求学员在:root中写满空白或注释也不校验其他选择器——判题只锚定:root内声明了--penguin-belly: pink;这一个事实与讲解段落的知识点严格对齐。延伸阅读与相邻挑战的机制对照理解本篇后仓库内相邻的两道挑战是很好的机制对照回退值Attach a Fallback value to a CSS Variable其讲解明确指出回退值不是用来提升浏览器兼容性的在 IE 上不生效而是让浏览器在找不到变量如变量名拼写错误--pengiun-skin时有值可显示这对调试很有用。本篇种子代码中var(--penguin-belly, white)的形式正是该机制的应用场景。局部覆盖Change a variable for a specific area该挑战的讲解说明——当你在:root创建变量时它为整页设置了该变量的值你可以通过在某个具体选择器中再次设置来覆盖它其种子代码正是在:root中声明--penguin-skin: gray; --penguin-belly: pink; --penguin-beak: orange;之后要求把--penguin-belly在.penguin类中重新赋值为white。它与本篇首尾相接先建立根级全局变量 继承再引入局部重声明遮蔽继承值。两道挑战与本篇共同构成完整的 CSS 变量作用域知识链:root全局声明 → 继承到任意后代 →var()取用带回退 → 局部重声明覆盖继承值。原理小结从本题涉及到的 CSS 行为可以归纳出三条规则:root匹配文档根元素通常是html在其上声明的自定义属性对整棵文档树可见——这是 CSS 变量最典型的设计令牌design tokens落点自定义属性默认参与继承与普通颜色、字体类属性一样沿 DOM 树向下传递因此子元素无需重新声明即可通过var()读取var(变量名, 回退值)的第二参数只是变量不可用时的兜底并非兼容性方案。变量只要在继承链上存在回退值即被忽略。以上行为均可直接在本题的交互环境中验证修改:root块、观察body与企鹅脸颊/腹部颜色随继承链同步切换即可对变量继承形成可操作的直觉。相关路径索引内容仓库相对路径本篇挑战源文件讲解、种子、断言、答案curriculum/challenges/english/blocks/basic-css/5a9d7295424fe3d0e10cad14.md课程块结构与挑战顺序curriculum/structure/blocks/basic-css.json回退值挑战前序curriculum/challenges/english/blocks/basic-css/5a9d7286424fe3d0e10cad13.md局部覆盖挑战后序curriculum/challenges/english/blocks/basic-css/5a9d72a1424fe3d0e10cad15.md媒体查询改变量挑战序列收尾curriculum/challenges/english/blocks/basic-css/5a9d72ad424fe3d0e10cad16.md超块引用含 quiz/review 单元curriculum/structure/superblocks/responsive-web-design-v9.json【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
freeCodeCamp 课程源码解析：Inherit CSS Variables——在 :root 定义 CSS 变量并理解继承机制
freeCodeCamp 课程源码解析Inherit CSS Variables——在 :root 定义 CSS 变量并理解继承机制【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp本文以 freeCodeCamp 响应式网页设计Responsive Web Design课程中 Inherit CSS Variables继承 CSS 变量练习挑战为研究对象。该挑战文件位于课程数据目录curriculum/challenges/english/blocks/basic-css/下属于 basic-css 课程块中CSS 变量Custom Properties教学序列的一环。读完本文你将掌握CSS 变量为何可以被后代元素自动使用、:root伪类选择器的作用、var()回退值与变量继承的配合关系以及该练习在仓库中如何通过种子代码seed与正则断言assert完成自动判题。课程定位这道挑战处于哪个知识点序列挑战文件 5a9d7295424fe3d0e10cad14.md 的 YAML 元数据声明了它的基本属性id: 5a9d7295424fe3d0e10cad14 title: Inherit CSS Variables challengeType: 0 videoUrl: https://scrimba.com/c/cyLZZhZ forumTopicId: 301088 dashedName: inherit-css-variableschallengeType: 0表示这是一道修改代码型练习dashedName用于生成论坛与路由标识。课程块的组织结构定义在 basic-css.json 中。按challengeOrder数组的顺序CSS 变量这一教学序列依次是顺序挑战标题文件1Use CSS Variables to change several elements at once5a9d725e424fe3d0e10cad10.md2Create a custom CSS Variable5a9d726c424fe3d0e10cad11.md3Use a custom CSS Variable5a9d727a424fe3d0e10cad12.md4Attach a Fallback value to a CSS Variable5a9d7286424fe3d0e10cad13.md5Inherit CSS Variables本篇5a9d7295424fe3d0e10cad14.md6Change a variable for a specific area5a9d72a1424fe3d0e10cad15.md7Use a media query to change a variable5a9d72ad424fe3d0e10cad16.md可以看到本篇是承上启下的关键一步前序挑战刚教会定义变量 → 用var()取用变量 → 附加回退值本篇要求把变量上移到:root验证继承行为随后的两道挑战则进一步演示在局部作用域覆盖变量值。该课程块同时被多个超块引用例如 responsive-web-design.json 将basic-css列为第二个 block而 responsive-web-design-v9.json 中还出现了review-basic-css、quiz-basic-css等复习与测验单元说明 CSS 变量相关知识点在课程体系中被当作需要巩固的核心内容。挑战讲解CSS 变量是继承的就像普通属性一样挑战的--description--段落是本题的核心讲解原文含义如下变量的作用域是声明它的那个选择器及其所有后代。当你创建声明一个 CSS 变量时它在你声明它的选择器内部可用并且在该选择器的任何后代元素中也可用。原因就是 CSS 变量与普通属性一样是**可以被继承inherited**的。要利用这种继承CSS 变量常被定义在:root元素上。:root是一个伪类选择器匹配文档的根元素——通常就是html元素。把变量创建在:root中它们就是全局可用的样式表中的任何其他选择器都能访问到。用一张继承链的示意来理解html是:root匹配的根元素:root (html) ← 在 :root 声明 --penguin-belly: pink └── body ← 继承可用 var(--penguin-belly) └── div.penguin └── div.right-cheek ← 继承可用 var(--penguin-belly) └── div.belly ← 继承可用 var(--penguin-belly) └── ...所有后代均可继承指令--instructions--要求在:root选择器中定义一个名为--penguin-belly的变量值为pink。完成后可以看到该变量被继承所有使用它var(--penguin-belly, ...)的子元素都会获得粉色背景。种子代码seed全景题目给了你什么挑战文件--seed-contents--段落内是学员在编辑器里看到的初始 HTML。题目在:root块里留出了作答区两条/* Only change code ... */注释之间其余 CSS 与 DOM 是只读背景。完整种子代码如下style :root { /* Only change code below this line */ /* Only change code above this line */ } body { background: var(--penguin-belly, #c6faf1); } .penguin { --penguin-skin: gray; --penguin-beak: orange; position: relative; margin: auto; display: block; margin-top: 5%; width: 300px; height: 300px; } .right-cheek { top: 15%; left: 35%; background: var(--penguin-belly, white); width: 60%; height: 70%; border-radius: 70% 70% 60% 60%; } .left-cheek { top: 15%; left: 5%; background: var(--penguin-belly, white); width: 60%; height: 70%; border-radius: 70% 70% 60% 60%; } .belly { top: 60%; left: 2.5%; background: var(--penguin-belly, white); width: 95%; height: 100%; border-radius: 120% 120% 100% 100%; } .penguin-top { top: 10%; left: 25%; background: var(--penguin-skin, gray); width: 50%; height: 45%; border-radius: 70% 70% 60% 60%; } .penguin-bottom { top: 40%; left: 23.5%; background: var(--penguin-skin, gray); width: 53%; height: 45%; border-radius: 70% 70% 100% 100%; } .right-hand { top: 0%; left: -5%; background: var(--penguin-skin, gray); width: 30%; height: 60%; border-radius: 30% 30% 120% 30%; transform: rotate(45deg); z-index: -1; } .left-hand { top: 0%; left: 75%; background: var(--penguin-skin, gray); width: 30%; height: 60%; border-radius: 30% 30% 30% 120%; transform: rotate(-45deg); z-index: -1; } .right-feet { top: 85%; left: 60%; background: var(--penguin-beak, orange); width: 15%; height: 30%; border-radius: 50% 50% 50% 50%; transform: rotate(-80deg); z-index: -2222; } .left-feet { top: 85%; left: 25%; background: var(--penguin-beak, orange); width: 15%; height: 30%; border-radius: 50% 50% 50% 50%; transform: rotate(80deg); z-index: -2222; } .right-eye { top: 45%; left: 60%; background: black; width: 15%; height: 17%; border-radius: 50%; } .left-eye { top: 45%; left: 25%; background: black; width: 15%; height: 17%; border-radius: 50%; } .sparkle { top: 25%; left: 15%; background: white; width: 35%; height: 35%; border-radius: 50%; } .blush-right { top: 65%; left: 15%; background: pink; width: 15%; height: 10%; border-radius: 50%; } .blush-left { top: 65%; left: 70%; background: pink; width: 15%; height: 10%; border-radius: 50%; } .beak-top { top: 60%; left: 40%; background: var(--penguin-beak, orange); width: 20%; height: 10%; border-radius: 50%; } .beak-bottom { top: 65%; left: 42%; background: var(--penguin-beak, orange); width: 16%; height: 10%; border-radius: 50%; } .penguin * { position: absolute; } /style div classpenguin div classpenguin-bottom div classright-hand/div div classleft-hand/div div classright-feet/div div classleft-feet/div /div div classpenguin-top div classright-cheek/div div classleft-cheek/div div classbelly/div div classright-eye div classsparkle/div /div div classleft-eye div classsparkle/div /div div classblush-right/div div classblush-left/div div classbeak-top/div div classbeak-bottom/div /div /div阅读这份种子代码能看出三个为本题服务的精心设计:root是空壳题目唯一允许修改的就是:root { ... }内部作答区位于两条注释之间。四个选择器已经预留了变量引用body、.right-cheek、.left-cheek、.belly的背景全部写成var(--penguin-belly, 回退色)回退色分别是#c6faf1青绿色页面背景和white。在变量尚未声明时浏览器找不到--penguin-belly于是回退值生效——页面呈现青绿色背景、企鹅脸颊与腹部为白色。对照变量已就位.penguin类中声明了--penguin-skin: gray;与--penguin-beak: orange;它们只服务于企鹅自身部件头、脚、喙与本题要求的全局变量形成对照让学员直观体会局部声明与:root全局声明两种作用域。参考答案一行代码触发全页面变色挑战文件--solutions--段落给出的官方答案是style:root {--penguin-belly: pink;}/style展开写即:root { --penguin-belly: pink; }声明生效后的连锁反应是body的背景从回退值#c6faf1青绿变为pink.right-cheek、.left-cheek、.belly三处从回退值white变为pink使用--penguin-skin、--penguin-beak的部件不受影响仍为gray与orange。这正是题目描述的变量被继承、所有使用它的子元素都获得粉色背景的现象。它同时演示了两个机制的叠加变量沿 DOM 树向下继承html→body→ 各部件 div以及var()回退值只在变量缺失时兜底——变量一旦在祖先链上任一层级可用回退值就不再出现。自动判题逻辑断言如何验证你的答案挑战文件--hints--段落中每条提示都对应一条正则断言。本题的判题代码如下assert.match( __helpers.removeCssComments(code), /:root\s*?{[\s\S]*--penguin-belly\s*?:\s*?pink\s*?;[\s\S]*}/gi );从源码结构看这条断言的校验链条是__helpers.removeCssComments(code)先剥离 CSS 注释避免/* Only change code ... */干扰匹配正则/:root\s*?{[\s\S]*--penguin-belly\s*?:\s*?pink\s*?;[\s\S]*}/gi依次要求存在:root选择器及其花括号块内出现自定义属性声明--penguin-belly赋值运算符:两侧允许任意空白值为pink且以分号结束g标志支持多处匹配i标志使其对PINK等大小写变体同样通过。值得注意的是断言并不要求学员在:root中写满空白或注释也不校验其他选择器——判题只锚定:root内声明了--penguin-belly: pink;这一个事实与讲解段落的知识点严格对齐。延伸阅读与相邻挑战的机制对照理解本篇后仓库内相邻的两道挑战是很好的机制对照回退值Attach a Fallback value to a CSS Variable其讲解明确指出回退值不是用来提升浏览器兼容性的在 IE 上不生效而是让浏览器在找不到变量如变量名拼写错误--pengiun-skin时有值可显示这对调试很有用。本篇种子代码中var(--penguin-belly, white)的形式正是该机制的应用场景。局部覆盖Change a variable for a specific area该挑战的讲解说明——当你在:root创建变量时它为整页设置了该变量的值你可以通过在某个具体选择器中再次设置来覆盖它其种子代码正是在:root中声明--penguin-skin: gray; --penguin-belly: pink; --penguin-beak: orange;之后要求把--penguin-belly在.penguin类中重新赋值为white。它与本篇首尾相接先建立根级全局变量 继承再引入局部重声明遮蔽继承值。两道挑战与本篇共同构成完整的 CSS 变量作用域知识链:root全局声明 → 继承到任意后代 →var()取用带回退 → 局部重声明覆盖继承值。原理小结从本题涉及到的 CSS 行为可以归纳出三条规则:root匹配文档根元素通常是html在其上声明的自定义属性对整棵文档树可见——这是 CSS 变量最典型的设计令牌design tokens落点自定义属性默认参与继承与普通颜色、字体类属性一样沿 DOM 树向下传递因此子元素无需重新声明即可通过var()读取var(变量名, 回退值)的第二参数只是变量不可用时的兜底并非兼容性方案。变量只要在继承链上存在回退值即被忽略。以上行为均可直接在本题的交互环境中验证修改:root块、观察body与企鹅脸颊/腹部颜色随继承链同步切换即可对变量继承形成可操作的直觉。相关路径索引内容仓库相对路径本篇挑战源文件讲解、种子、断言、答案curriculum/challenges/english/blocks/basic-css/5a9d7295424fe3d0e10cad14.md课程块结构与挑战顺序curriculum/structure/blocks/basic-css.json回退值挑战前序curriculum/challenges/english/blocks/basic-css/5a9d7286424fe3d0e10cad13.md局部覆盖挑战后序curriculum/challenges/english/blocks/basic-css/5a9d72a1424fe3d0e10cad15.md媒体查询改变量挑战序列收尾curriculum/challenges/english/blocks/basic-css/5a9d72ad424fe3d0e10cad16.md超块引用含 quiz/review 单元curriculum/structure/superblocks/responsive-web-design-v9.json【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考