[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-config":3,"article-sass学习笔记":22,"comments-sass学习笔记":43,"footer-socials":53},{"site_title":4,"site_subtitle":5,"home_intro":6,"avatar":7,"seo_keywords":8,"seo_description":9,"site_subtitle_highlight":10,"home_description":11,"about_name":12,"about_intro":13,"code_comment_2":14,"code_log":15,"code_skills":16,"code_goal":17,"code_comment_1":18,"meteor_density":19,"meteor_max_count":19,"meteor_enabled":20,"meteor_speed":21},"ShineGoldYao","架构代码，","全栈开发者 \u002F 开源爱好者 \u002F 技术探索者","https:\u002F\u002Fforuda.gitee.com\u002Favatar\u002F1762402862010015318\u002F16382196_yaoxingjin_1762402861.png!avatar200","ShiGoldYao,技术博客,全栈开发","专注于前沿技术分享与开源项目展示的个人技术博客","书写未来。","大家好，我是 ShiGoldYao。一名全栈学习与技术爱好者。在这里，我分享关于现代 Web 开发、技术框架学习记录以及极客生活的深度思考。","ShiGoldYao","我是一名全栈技术学习者，对构建高性能、可扩展的现代 Web 应用充满热情。过去一年里，我从初识互联网前后端开发，到逐步沉淀技术体系，始终保持着对前端、后端与工程化的持续探索。\n\n我坚信 “代码如诗”。除了日常学习与项目实践，我也会花大量时间关注开源社区，尝试摸索 WebAssembly、Rust 等前沿技术在浏览器端的更多可能，不断挑战性能与体验的边界。\n\n生活里的我并不只有代码：闲暇时会打打永劫无间，享受博弈与操作的快感；也喜欢打乒乓球，在运动中放松自己；当然，最幸福的时光，还是和女朋友一起慢慢生活、认真恋爱。","\u002F\u002F 🚀 开启学习之旅","","Vue , TypeScript , Nest , Mysql","成为优秀的前端全栈工程师","\u002F\u002F 欢迎来到我的技术世界","3","true","5",{"id":23,"title":24,"slug":25,"coverUrl":15,"summary":15,"content":26,"htmlContent":27,"categoryId":28,"viewCount":29,"likeCount":30,"isTop":30,"isPublish":31,"seoKeywords":15,"seoDescription":15,"publishTime":32,"createTime":33,"updateTime":34,"deleteTime":35,"category":36,"tags":42},"14","SASS\u002FSCSS 学习笔记","sass学习笔记","# SASS\u002FSCSS 学习笔记\n\n## 一、SASS 简介\n\n### 1.1 什么是 SASS\n- SASS (Syntactically Awesome Style Sheets) 是一种 CSS 预处理器\n- SCSS (Sassy CSS) 是 SASS 3 引入的新语法，完全兼容 CSS3\n- SASS 提供了变量、嵌套、混合、继承等功能，使 CSS 更易维护\n\n### 1.2 SASS vs SCSS\n```scss\n\u002F\u002F SCSS 语法（推荐，完全兼容 CSS）\n$color: red;\n.container {\n  color: $color;\n}\n\n\u002F\u002F SASS 语法（缩进式，不兼容 CSS）\n$color: red\n.container\n  color: $color\n```\n\n### 1.3 安装\n```bash\n# 使用 npm 安装\nnpm install -g sass\n\n# 使用 Node.js 编译\nsass input.scss output.css\n\n# 监听文件变化\nsass --watch input.scss output.css\n\n# 监听整个目录\nsass --watch scss:css\n```\n\n---\n\n## 二、变量\n\n### 2.1 定义变量\n```scss\n\u002F\u002F 使用 $ 符号定义变量\n$primary-color: #3498db;\n$font-size: 16px;\n$border-radius: 4px;\n```\n\n### 2.2 使用变量\n```scss\n.button {\n  background-color: $primary-color;\n  font-size: $font-size;\n  border-radius: $border-radius;\n}\n```\n\n### 2.3 变量作用域\n```scss\n$global-color: blue;\n\n.container {\n  $local-color: red;\n  color: $local-color;  \u002F\u002F 可以使用局部变量\n  color: $global-color; \u002F\u002F 可以使用全局变量\n}\n\n\u002F\u002F $local-color 在这里不可用\n```\n\n### 2.4 默认值\n```scss\n$color: red !default; \u002F\u002F 如果变量未定义，则使用默认值\n```\n\n---\n\n## 三、嵌套\n\n### 3.1 选择器嵌套\n```scss\n.container {\n  background: white;\n  \n  .header {\n    padding: 20px;\n  }\n  \n  .content {\n    margin: 10px;\n  }\n}\n\n\u002F\u002F 编译后：\n\u002F\u002F .container { background: white; }\n\u002F\u002F .container .header { padding: 20px; }\n\u002F\u002F .container .content { margin: 10px; }\n```\n\n### 3.2 属性嵌套\n```scss\n.button {\n  border: {\n    width: 1px;\n    style: solid;\n    color: #ccc;\n  }\n}\n\n\u002F\u002F 编译后：\n\u002F\u002F .button { border-width: 1px; border-style: solid; border-color: #ccc; }\n```\n\n### 3.3 父选择器引用 (&)\n```scss\n.button {\n  &:hover {\n    background: darken($color, 10%);\n  }\n  \n  &.active {\n    background: $primary-color;\n  }\n}\n\n\u002F\u002F 编译后：\n\u002F\u002F .button:hover { background: ...; }\n\u002F\u002F .button.active { background: ...; }\n```\n\n---\n\n## 四、混合\n\n### 4.1 基本混合\n```scss\n@mixin border-radius($radius) {\n  -webkit-border-radius: $radius;\n  -moz-border-radius: $radius;\n  border-radius: $radius;\n}\n\n.box {\n  @include border-radius(10px);\n}\n```\n\n### 4.2 默认参数\n```scss\n@mixin box-shadow($x: 0, $y: 0, $blur: 5px, $color: rgba(0,0,0,0.3)) {\n  box-shadow: $x $y $blur $color;\n}\n\n.card {\n  @include box-shadow();\n}\n\n.button {\n  @include box-shadow(2px, 2px, 10px, red);\n}\n```\n\n### 4.3 可变参数\n```scss\n@mixin box-shadow($shadows...) {\n  box-shadow: $shadows;\n}\n\n.element {\n  @include box-shadow(0 0 5px #000, 0 0 10px #333);\n}\n```\n\n### 4.4 内容块\n```scss\n@mixin mobile {\n  @media (max-width: 768px) {\n    @content;\n  }\n}\n\n.container {\n  width: 100%;\n  \n  @include mobile {\n    width: 50%;\n  }\n}\n```\n\n---\n\n## 五、继承\n\n### 5.1 基本继承\n```scss\n.message {\n  padding: 10px;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n}\n\n.success {\n  @extend .message;\n  background-color: #dff0d8;\n  border-color: #d6e9c6;\n}\n\n.error {\n  @extend .message;\n  background-color: #f2dede;\n  border-color: #ebccd1;\n}\n```\n\n### 5.2 占位符选择器\n```scss\n\u002F\u002F 使用 % 定义占位符，不会生成独立的 CSS\n%message-base {\n  padding: 10px;\n  border: 1px solid #ccc;\n}\n\n.success {\n  @extend %message-base;\n  background: green;\n}\n\n.error {\n  @extend %message-base;\n  background: red;\n}\n```\n\n---\n\n## 六、运算\n\n### 6.1 数字运算\n```scss\n$width: 100px;\n$padding: 10px;\n\n.container {\n  width: $width + $padding * 2; \u002F\u002F 120px\n}\n```\n\n### 6.2 颜色运算\n```scss\n$color: #369;\n\n.button {\n  background: $color + #111; \u002F\u002F 变亮\n  border: $color - #222;    \u002F\u002F 变暗\n}\n```\n\n### 6.3 字符串运算\n```scss\n$name: \"icon\";\n\n.icon-#{$name} {\n  background: url(\"images\u002F#{$name}.png\");\n}\n```\n\n### 6.4 单位运算\n```scss\n$width: 100px;\n\n.container {\n  width: $width \u002F 2;   \u002F\u002F 50px\n  height: 100% \u002F 2;    \u002F\u002F 50%\n}\n```\n\n---\n\n## 七、函数\n\n### 7.1 内置颜色函数\n```scss\n$color: #3498db;\n\n.button {\n  background: lighten($color, 10%);  \u002F\u002F 变亮\n  border: darken($color, 10%);       \u002F\u002F 变暗\n  color: invert($color);             \u002F\u002F 反色\n  opacity: opacity($color);          \u002F\u002F 透明度\n}\n```\n\n### 7.2 其他内置函数\n```scss\n$number: 10px;\n$string: \"hello\";\n$list: 1, 2, 3, 4;\n\n.container {\n  width: abs(-10px);           \u002F\u002F 绝对值\n  height: round(10.5px);       \u002F\u002F 四舍五入\n  margin: ceil(10.2px);        \u002F\u002F 向上取整\n  padding: floor(10.8px);      \u002F\u002F 向下取整\n  content: length($list);      \u002F\u002F 列表长度\n  content: nth($list, 2);      \u002F\u002F 获取列表第2项\n}\n```\n\n### 7.3 自定义函数\n```scss\n@function double($n) {\n  @return $n * 2;\n}\n\n.container {\n  width: double(100px); \u002F\u002F 200px\n}\n```\n\n---\n\n## 八、条件语句\n\n### 8.1 if 语句\n```scss\n@mixin theme($theme) {\n  @if $theme == 'dark' {\n    background: #333;\n    color: #fff;\n  } @else if $theme == 'light' {\n    background: #fff;\n    color: #333;\n  } @else {\n    background: #ccc;\n    color: #000;\n  }\n}\n\n.container {\n  @include theme('dark');\n}\n```\n\n### 8.2 三元运算符\n```scss\n$width: 100px;\n$max-width: 200px;\n\n.container {\n  width: if($width > $max-width, $max-width, $width);\n}\n```\n\n---\n\n## 九、循环\n\n### 9.1 for 循环\n```scss\n@for $i from 1 through 5 {\n  .col-#{$i} {\n    width: 100% \u002F 5 * $i;\n  }\n}\n\n\u002F\u002F 编译后生成 .col-1, .col-2, .col-3, .col-4, .col-5\n```\n\n### 9.2 each 循环\n```scss\n$colors: (red: #f00, green: #0f0, blue: #00f);\n\n@each $name, $color in $colors {\n  .text-#{$name} {\n    color: $color;\n  }\n}\n\n\u002F\u002F 编译后生成 .text-red, .text-green, .text-blue\n```\n\n### 9.3 while 循环\n```scss\n$i: 6;\n\n@while $i > 0 {\n  .item-#{$i} {\n    width: $i * 10px;\n  }\n  $i: $i - 1;\n}\n```\n\n---\n\n## 十、列表和映射\n\n### 10.1 列表\n```scss\n$fonts: \"Helvetica\", \"Arial\", sans-serif;\n\nbody {\n  font-family: $fonts;\n}\n\n\u002F\u002F 列表函数\n$numbers: 1, 2, 3, 4, 5;\n$first: nth($numbers, 1);      \u002F\u002F 1\n$length: length($numbers);    \u002F\u002F 5\n$last: nth($numbers, -1);     \u002F\u002F 5\n$joined: join($numbers, 6);  \u002F\u002F 1, 2, 3, 4, 5, 6\n```\n\n### 10.2 映射\n```scss\n$colors: (\n  primary: #3498db,\n  secondary: #2ecc71,\n  danger: #e74c3c\n);\n\n.button {\n  background: map-get($colors, primary);\n}\n\n\u002F\u002F 映射函数\n$keys: map-keys($colors);       \u002F\u002F (primary, secondary, danger)\n$values: map-values($colors);   \u002F\u002F (#3498db, #2ecc71, #e74c3c)\n$has-key: map-has-key($colors, primary); \u002F\u002F true\n```\n\n---\n\n## 十一、模块化\n\n### 11.1 使用 @import\n```scss\n\u002F\u002F _variables.scss\n$primary-color: #3498db;\n$font-size: 16px;\n\n\u002F\u002F _mixins.scss\n@mixin button {\n  padding: 10px 20px;\n  border-radius: 4px;\n}\n\n\u002F\u002F main.scss\n@import 'variables';\n@import 'mixins';\n\n.button {\n  @include button;\n  background: $primary-color;\n}\n```\n\n### 11.2 使用 @use（推荐）\n```scss\n\u002F\u002F _variables.scss\n$primary-color: #3498db !default;\n@forward 'mixins';\n\n\u002F\u002F main.scss\n@use 'variables' as *;\n\n.button {\n  background: $primary-color;\n}\n```\n\n### 11.3 使用 @forward\n```scss\n\u002F\u002F _mixins.scss\n@mixin button { ... }\n\n\u002F\u002F _utilities.scss\n@forward 'mixins';\n@forward 'functions';\n\n\u002F\u002F main.scss\n@use 'utilities';\n\n.button {\n  @include utilities.button;\n}\n```\n\n---\n\n## 十二、注释\n\n### 12.1 单行注释\n```scss\n\u002F\u002F 这个注释不会出现在编译后的 CSS 中\n$color: red;\n```\n\n### 12.2 多行注释\n```scss\n\u002F* 这个注释会出现在编译后的 CSS 中 *\u002F\n$color: blue;\n```\n\n### 12.3 强制注释\n```scss\n\u002F*! 这个注释会出现在压缩后的 CSS 中 *\u002F\n$color: green;\n```\n\n---\n\n## 十三、调试\n\n### 13.1 @debug\n```scss\n$width: 100px;\n\n@debug \"Width is: #{$width}\";\n\u002F\u002F 输出：Width is: 100px\n```\n\n### 13.2 @warn\n```scss\n@warn \"This feature is deprecated\";\n\u002F\u002F 输出警告信息\n```\n\n### 13.3 @error\n```scss\n@if $width \u003C 0 {\n  @error \"WidthWidth cannot be negative\";\n}\n\u002F\u002F 抛出错误，停止编译\n```\n\n---\n\n## 十四、最佳实践\n\n### 14.1 文件组织\n```\nstyles\u002F\n├── main.scss          # 主文件\n├── abstracts\u002F         # 抽象层\n│   ├── _variables.scss\n│   ├── _functions.scss\n│   └── _mixins.scss\n├── base\u002F              # 基础样式\n│   ├── _reset.scss\n│   └── _typography.scss\n├── components\u002F        # 组件\n│   ├── _button.scss\n│   └── _card.scss\n├── layout\u002F            # 布局\n│   ├── _header.scss\n│   └── _footer.scss\n└── pages\u002F             # 页面\n    └── _home.scss\n```\n\n### 14.2 命名规范\n```scss\n\u002F\u002F 使用 BEM 命名规范\n.block {\n  &__element {\n    &--modifier {\n      \n    }\n  }\n}\n\n\u002F\u002F 变量使用有意义的名称\n$primary-color: #3498db;\n$spacing-unit: 8px;\n$border-radius: 4px;\n```\n\n### 14.3 性能优化\n```scss\n\u002F\u002F 避免过度嵌套（最多3层）\n\u002F\u002F 不好\n.container {\n  .header {\n    .title {\n      .text {\n        color: red;\n      }\n    }\n  }\n}\n\n\u002F\u002F 好\n.container {\n  .header {\n    .title-text {\n      color: red;\n    }\n  }\n}\n\n\u002F\u002F 使用占位符选择器而不是类继承\n%base-button {\n  padding: 10px;\n}\n\n.primary-button {\n  @extend %base-button;\n  background: blue;\n}\n```\n\n---\n\n## 十五、常用代码片段\n\n### 15.1 响应式断点\n```scss\n$breakpoints: (\n  mobile: 480px,\n  tablet: 768px,\n  desktop: 1024px\n);\n\n@mixin respond-to($breakpoint) {\n  @if map-has-key($breakpoints, $breakpoint) {\n    @media (min-width: map-get($breakpoints, $breakpoint)) {\n      @content;\n    }\n  }\n}\n\n.container {\n  width: 100%;\n  \n  @include respond-to(tablet) {\n    width: 50%;\n  }\n}\n```\n\n### 15.2 三角形\n```scss\n@mixin triangle($size, $color, $direction) {\n  width: 0;\n  height: 0;\n  border-style: solid;\n  \n  @if $direction == 'up' {\n    border-width: 0 $size \u002F 2 $size $size \u002F 2;\n    border-color: transparent transparent $color transparent;\n  } @else if $direction == 'down' {\n    border-width: $size $size \u002F 2 0 $size \u002F 2;\n    border-color: $color transparent transparent transparent;\n  }\n}\n\n.arrow-up {\n  @include triangle(10px, red, up);\n}\n```\n\n### 15.3 文本截断\n```scss\n@mixin text-truncate {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.truncate {\n  @include text-truncate;\n}\n```\n\n### 15.4 居中\n```scss\n@mixin center {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n@mixin absolute-center {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n```\n\n---\n\n## 十六、SASS 与现代 CSS\n\n### 16.1 CSS 变量 vs SASS 变量\n```scss\n\u002F\u002F SASS 变量（编译时）\n$sass-color: red;\n\n\u002F\u002F CSS 变量（运行时）\n:root {\n  --css-color: red;\n}\n\n.element {\n  color: $sass-color;    \u002F\u002F 编译为 color: red;\n  color: var(--css-color); \u002F\u002F 保持为 var(--css-color);\n}\n```\n\n### 16.2 何时使用 SASS\n- 需要复杂的计算和逻辑\n- 需要模块化和代码复用\n- 需要兼容旧浏览器\n- 团队需要统一的样式系统\n\n### 16.3 何时使用原生 CSS\n- 简单项目\n- 不需要预处理器功能\n- 需要运行时动态修改变量\n- 追求更快的编译速度\n\n---\n\n## 总结\n\nSASS\u002FSCSS 提供了强大的功能来增强 CSS：\n- **变量**：便于维护和统一管理\n- **嵌套**：代码结构更清晰\n- **混合**：代码复用\n- **继承**：减少重复代码\n- **函数**：强大的计算能力\n- **模块化**：代码组织更合理\n\n合理使用这些功能，可以大大提高 CSS 的开发效率和可维护性。\n",null,"1",100,0,1,"2026-04-07T16:23:17.106Z","2026-04-07T16:23:17.108Z","2026-05-25T22:05:44.026Z","0",{"id":28,"categoryName":37,"slug":38,"description":39,"sort":30,"isEnable":31,"createTime":40,"updateTime":41,"deleteTime":30},"前端开发","frontend-engineering","2222","2026-04-03T02:36:11.945Z","2026-04-07T16:38:46.496Z",[],[44],{"id":45,"articleId":46,"parentId":30,"nickname":47,"email":48,"content":49,"avatar":15,"website":15,"ipAddress":50,"userAgent":51,"isApproved":31,"createTime":52,"updateTime":52,"deleteTime":30},4,14,"Jackie","985749042@qq.com","加油加油 ai用不了呢","24.189.26.186","Mozilla\u002F5.0 (iPhone; CPU iPhone OS 18_6_2 like Mac OS X) AppleWebKit\u002F605.1.15 (KHTML, like Gecko) Version\u002F18.6 Mobile\u002F15E148 Safari\u002F604.1","2026-05-20T19:42:30.933Z",[]]