文档教程【免费下载链接】learnxinyminutes-docsCode documentation written as code! How novel and totally my idea!项目地址https://gitcode.com/gh_mirrors/le/learnxinyminutes-docs点击查看免费下载本指南基于 learnxinyminutes-docs 仓库中的西班牙语版 Sass 教程 es/sass.md其英文原版为 sass.md整理成文。该教程采用可编译代码即文档code documentation written as code的体例用带注释的 SCSS 示例逐段讲解变量、控制指令、Mixin、函数、继承、嵌套、局部文件、占位符选择器与数学运算等核心特性并逐一给出编译后的 CSS 输出。读完本文你将系统掌握 Sass 的完整语法要素理解每段代码的编译结果并能在实际项目中据此写出可维护、DRYDont Repeat Yourself的样式代码。教程定位Sass 到底是什么Sass 是一门扩展 CSS 的语言在 CSS 之上增加了变量、嵌套、Mixin 等特性。它与其他预处理器例如 Less一样帮助开发者写出可维护、避免重复的代码。需要特别说明的是Sass并不会引入新的样式属性它提供的是让你更高效地书写 CSS、并让维护变得更容易的工具层。因此如果你已经熟悉 CSS3通常可以相对较快地掌握 Sass。Sass 提供两种语法可供选择SCSS与 CSS 语法一致只是额外叠加了 Sass 的特性本教程全程使用 SCSSSass原始语法使用缩进代替花括号与分号。教程正文以一个大的scss代码块为主体先交代注释规则单行注释//在 Sass 被编译为 CSS 时会被删除多行注释/* */会被保留。这一规则决定了哪些注释属于开发期说明、哪些可以随样式表发布。变量Variables一处修改全局生效使用$符号即可创建一个变量用来存储 CSS 值如颜色、字体栈等。教程中的示例$primary-color: #A3A4FF; $secondary-color: #51527F; $body-font: Roboto, sans-serif; body { background-color: $primary-color; color: $secondary-color; font-family: $body-font; }编译结果为body { background-color: #A3A4FF; color: #51527F; font-family: Roboto, sans-serif; }变量的价值在于样式表中所有引用处共享同一份取值想改颜色时只需修改定义处一次而不必在整份样式表中逐个替换。这正是 DRY 原则在样式层的最小实践单元。后续的 Mixin、函数与数学运算示例中变量也将持续扮演定义一次、多处复用的角色。控制指令Control Directives用逻辑驱动编译Sass 允许使用if、else、for、while和each来控制代码如何编译成 CSS。这些指令让样式表的生成过程具备条件判断与循环能力。if / else条件编译if/else块的行为与预期完全一致。教程用一个调试模式开关演示$debug: true !default; mixin debugmode { if $debug { debug Modo debug activado; display: inline-block; } else { display: none; } } .info { include debugmode; }当$debug为true时.info会显示为false时则不会显示。这里有两个值得注意的细节!default标记表示若该变量尚未被赋值才使用此默认值便于调用方覆盖debug会在命令行/控制台输出调试信息非常适合在调试 SCSS 时检查变量内容。$debug为true时编译结果.info { display: inline-block; }for区间循环through 与 to 的区别for是遍历一段取值区间的控制循环特别适合为一批同类元素批量生成样式。它有两种形式through包含最后一个值to止于最后一个值之前。for $c from 1 to 4 { div:nth-of-type(#{$c}) { left: ($c - 1) * 900 / 3; } } for $c from 1 through 3 { .myclass-#{$c} { color: rgb($c * 255 / 3, $c * 255 / 3, $c * 255 / 3); } }#{$c}是插值语法interpolation把变量值嵌入选择器或属性值中。编译结果div:nth-of-type(1) { left: 0; } div:nth-of-type(2) { left: 300; } div:nth-of-type(3) { left: 600; } .myclass-1 { color: #555555; } .myclass-2 { color: #aaaaaa; } .myclass-3 { color: white; /* SASS 会自动将 #FFFFFF 转换为 white */ }对比可知from 1 to 4实际只生成 1、2、3 三个取值止于 4 之前而from 1 through 3也生成 1、2、3但语义是包含末值 3。示例还顺带演示了颜色函数的运算rgb()中传入$c * 255 / 3随$c递增得到灰阶加深的颜色且#FFFFFF会被 Sass 自动规范化为white。while条件循环while非常直白只要条件为真就持续生成规则并在循环体内手动推进计数变量。$columns: 4; $column-width: 80px; while $columns 0 { .col-#{$columns} { width: $column-width; left: $column-width * ($columns - 1); } $columns: $columns - 1; }编译输出.col-4 { width: 80px; left: 240px; } .col-3 { width: 80px; left: 160px; } .col-2 { width: 80px; left: 80px; } .col-1 { width: 80px; left: 0px; }each遍历列表each与for类似但遍历的是列表而非序数值。列表的书写方式与其他变量相同以空格作为分隔符$social-links: facebook twitter linkedin reddit; .social-links { each $sm in $social-links { .icon-#{$sm} { background-image: url(images/#{$sm}.png); } } }输出.social-links .icon-facebook { background-image: url(images/facebook.png); } .social-links .icon-twitter { background-image: url(images/twitter.png); } .social-links .icon-linkedin { background-image: url(images/linkedin.png); } .social-links .icon-reddit { background-image: url(images/reddit.png); }each天然适合一组同构对象批量生成样式的场景例如社交图标、网格列、按钮变体等。Mixins抽取可复用的样式块如果发现同一段代码要在多个元素上重复书写就应该把它存进 Mixin。使用mixin指令加上名称定义用include加上名称调用。无参数的 Mixin 示例——水平垂直居中mixin center { display: block; margin-left: auto; margin-right: auto; left: 0; right: 0; } div { include center; background-color: $primary-color; }编译结果div { display: block; margin-left: auto; margin-right: auto; left: 0; right: 0; background-color: #A3A4FF; }带参数的 Mixin 可以充当快捷属性——例如封装宽高声明调用时传入width和heightmixin size($width, $height) { width: $width; height: $height; } .rectangle { include size(100px, 60px); } .square { include size(40px, 40px); }编译结果.rectangle { width: 100px; height: 60px; } .square { width: 40px; height: 40px; }Mixin 参数化的能力使它成为封装带配置的样式片段的首选工具后文继承extend一节还会讨论它与此的取舍。函数Functions内置函数与自定义函数Sass 提供了大量内置函数可完成各式各样的任务调用方式与常规函数一致——写函数名并传入所需参数body { width: round(10.25px); } .footer { background-color: fade_out(#000000, 0.25); }round()将数值四舍五入fade_out()为颜色添加透明度。编译结果body { width: 10px; } .footer { background-color: rgba(0, 0, 0, 0.75); }自定义函数用function定义与 Mixin 非常相似。选择依据是Mixin 更适合生成 CSS函数更适合承载贯穿 Sass 代码的逻辑计算——数学运算一节的例子正是改造成可复用函数的理想候选。教程给出的示例函数接收目标尺寸与父级尺寸返回百分比function calculate-percentage($target-size, $parent-size) { return $target-size / $parent-size * 100%; } $main-content: calculate-percentage(600px, 960px); .main-content { width: $main-content; } .sidebar { width: calculate-percentage(300px, 960px); }编译结果.main-content { width: 62.5%; } .sidebar { width: 31.25%; }注意这里沿用了教程以及经典 Sass 语法的写法在算术表达式中/作为除法运算符参与计算自定义函数既可以在变量初始化时调用也可以直接在属性值中调用。继承extend在选择器间共享属性extend是一种让一个选择器共享另一个选择器属性的方式。教程示例.display { include size(5em, 5em); border: 5px solid $secondary-color; } .display-success { extend .display; border-color: #22df56; }编译结果.display, .display-success { width: 5em; height: 5em; border: 5px solid #51527F; } .display-success { border-color: #22df56; }教程特别强调继承一条 CSS 语句通常优于为此创建 Mixin。原因是 Sass 会把共享同一套基础样式的类归并组合如上面的.display, .display-success选择器组若改用 Mixinwidth、height、border会在每个调用处重复输出一份。虽然这不影响工作流但会不必要地撑大 Sass 编译器生成的文件体积。这一取舍是理解extend设计动机的关键。嵌套Nesting选择器套选择器Sass 允许在选择器内部嵌套选择器配合父选择器引用符还可以嵌套伪类ul { list-style-type: none; margin-top: 2em; li { background-color: red; :hover { background-color: blue; } a { color: white; } } }会被替换为父选择器此处为li从而生成li:hover。编译结果ul { list-style-type: none; margin-top: 2em; } ul li { background-color: red; } ul li:hover { background-color: blue; } ul li a { color: white; }教程同时给出实践告诫过度嵌套会让代码更难维护最佳实践建议嵌套不超过 3 层。嵌套应当服务于表达 DOM 层级关系这一目的而非无节制地复制结构。局部文件与 import模块化组织样式Sass 允许创建局部文件partials帮助把 Sass 代码模块化。局部文件必须以_开头例如_reset.css并且不会被单独编译输出为 CSS——它们只作为被导入的原料存在。教程假设存在一个_reset.css文件内容如下html, body, ul, ol { margin: 0; padding: 0; }通过import将其导入主文件import reset; body { font-size: 16px; font-family: Helvetica, Arial, Sans-serif; }注意导入时省略了_前缀与扩展名reset即指向_reset.css。Sass 的import与原生 CSS 的import有本质区别它不会发起额外的 HTTP 请求去拉取文件而是把被导入文件的代码直接合并进编译产物。编译结果html, body, ul, ol { margin: 0; padding: 0; } body { font-size: 16px; font-family: Helvetica, Arial, Sans-serif; }占位符选择器Placeholders只供继承、不出现在输出中占位符在创建一条仅供extend使用的 CSS 语句时非常有用。占位符以%开头而非.或#并且不会出现在编译后的 CSS 中%content-window { font-size: 14px; padding: 10px; color: #000; border-radius: 4px; } .message-window { extend %content-window; background-color: #0000ff; }编译结果.message-window { font-size: 14px; padding: 10px; color: #000; border-radius: 4px; } .message-window { background-color: #0000ff; }对比普通类继承占位符的最大收益是零污染基础样式规则%content-window本身不会输出到 CSS只有真正继承它的类才会携带这些属性从源头避免了无用样式泄漏。数学运算直接在 SCSS 中算布局Sass 提供、-、*、/和%运算符可以直接在 Sass 文件中计算数值而无需手工预计算。教程用经典的两栏布局演示$content-area: 960px; $main-content: 600px; $sidebar-content: 300px; $main-size: $main-content / $content-area * 100%; $sidebar-size: $sidebar-content / $content-area * 100%; $gutter: 100% - ($main-size $sidebar-size); body { width: 100%; } .main-content { width: $main-size; } .sidebar { width: $sidebar-size; } .gutter { width: $gutter; }编译结果body { width: 100%; } .main-content { width: 62.5%; } .sidebar { width: 31.25%; } .gutter { width: 6.25%; }把 960px 栅格拆成 62.5% 主栏、31.25% 侧栏与 6.25% 沟槽百分比全部由编译期计算得出日后调整任何一份尺寸其余比例会自动随之更新。这正是数学运算符示例被教程点名推荐改造为可复用函数如前面的calculate-percentage的原因。名称考据Sass 还是 SASS语言的名字 Sass 是一个单词不是缩写。由于人们总把它写作 SASS语言作者开玩笑地称其为 Syntactically Awesome StyleSheets语法上令人惊叹的样式表。记住这一点有助于你在文档检索、社区讨论与代码注释中正确使用这一名称。实践与兼容性在线练习想直接在浏览器里试玩 Sass可以使用 SassMeister 这类在线工具任意选择 Sass 或 SCSS 语法在设置中切换。工程落地只要项目中有一个能把 Sass 编译成 CSS 的程序Sass 就可以用于任何项目。浏览器兼容编译产物依然是普通 CSS因此你需要确认所使用的 CSS 特性与目标浏览器兼容——QuirksMode CSS 与 CanIUse 是业界常用的兼容性核查资源。仓库视角这份教程在 learnxinyminutes-docs 中如何组织与校验learnxinyminutes-docs 是一个以把文档写成可编译代码为理念的教程仓库见 README.md所有语言教程遵循统一的体例YAML frontmatter 声明元信息正文以带注释的代码为主体、辅以极简文字说明详见 CONTRIBUTING.md 的风格规范示例优先于论述、惜字如金、代码块单行不超过 80 字符、统一 UTF-8 编码。本文依据的 es/sass.md 正是英文原版 sass.md 的西班牙语翻译frontmatter 中通过contributors记录原作者Laura Kyle、Sean Corrales、Kyle Mendes、Keith Miyake通过translators记录译者César Suárez并为可下载代码片段声明filename。仓库中同一份 Sass 教程还提供了 zh-cn/sass.md、cs/sass.md、de/sass.md、ms/sass.md、pt-br/sass.md、vi/sass.md 等多语言版本读者可对照阅读以验证示例一致性。仓库还配套了两套自动化校验脚本从侧面印证了这类文档的质量约束lint/frontmatter.py 会解析每个 Markdown 文件的 YAML frontmatter校验允许的键name、where_x_eq_name、category、filename、contributors、translators、值类型与条目格式lint/encoding.sh 会批量检查所有.md文件的编码必须为 UTF-8 或 US-ASCII且不允许携带 UTF-8 BOM。延伸学习建议把本文与仓库中的英文原版 sass.md 及 zh-cn/sass.md 对照阅读可以同时检验语法理解与翻译准确性。上手路径建议先在浏览器端在线工具中逐段粘贴本文代码观察编译输出再在本地工程中建立_partials目录实践模块化组织最后尝试把两栏布局示例封装成可复用的自定义函数。Sass 的官方文档与 The Sass Way 社区还提供从入门到进阶的系列教程可作为系统深化的后续资料。赞分享文档教程【免费下载链接】learnxinyminutes-docsCode documentation written as code! How novel and totally my idea!项目地址https://gitcode.com/gh_mirrors/le/learnxinyminutes-docs点击查看免费下载相关推荐learnxinyminutes-docs 的 Sass 速学指南从变量、Mixin 到继承与数学运算的 SCSS 实战learnxinyminutes docs 的 Sass 速学指南从变量、Mixin 到继承与数学运算的 SCSS 实战 本篇技术指南以开源仓库 learnx文档教程learnxinyminutes-docs 中的 SassSCSS入门全指南变量、Mixin、嵌套、函数与继承实战精读learnxinyminutes docs 中的 SassSCSS入门全指南变量、Mixin、嵌套、函数与继承实战精读 本篇技术指南以 learnxiny文档教程从零到实战learnxinyminutes-docs 中的 Bash 完整语法指南变量、控制流、文本处理与 Bash 5.3 新特性从零到实战learnxinyminutes docs 中的 Bash 完整语法指南变量、控制流、文本处理与 Bash 5.3 新特性 本篇指南以开源仓库文档教程上一篇终极Hyper终端资源宝库300插件与主题打造个性化开发环境下一篇Wasmtime 架构深度解析从 wasmtime crate 到 Cranelift 的完整实现脉络创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考