// 错误示例
.element {
  $color: blue;
}

.other-element {
  color: $color; // 变量不可用
}

// 正确示例
$color: blue; // 全局定义

.element {
  color: $color;
}

.other-element {
  color: $color;
}

// 或者使用!global
.element {
  $color: blue !global;
}

.other-element {
  color: $color; // 现在可以使用了
}

编译速度慢

问题：大型项目Sass编译变得缓慢
解决：减少嵌套深度，优化@extend使用，考虑使用Dart Sass

// 避免过度嵌套
// 不推荐
.container {
  .header {
    .navigation {
      .menu {
        .item {
          a {
            color: blue;
          }
        }
      }
    }
  }
}

// 推荐
.container-header-navigation-menu-item {
  a {
    color: blue;
  }
}

// 或使用BEM命名法
.menu__item-link {
  color: blue;
}

中文注释乱码

问题：编译后中文注释显示乱码
解决：确保源文件使用UTF-8编码，并在编译选项中指定编码

# 命令行编译时指定编码
sass --charset input.scss output.css

# 在Webpack中配置
module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              sassOptions: {
                charset: true
              }
            }
          }
        ]
      }
    ]
  }
};

模块导入问题

问题：使用@use导入模块时出现命名空间冲突
解决：为导入的模块指定别名或使用as *导入到全局命名空间

// 命名空间冲突
@use 'buttons';
@use 'forms';
// 如果两个模块都有$primary-color变量，会出现冲突

// 解决方案1：指定别名
@use 'buttons' as btn;
@use 'forms' as frm;

.element {
  color: btn.$primary-color;
  background: frm.$primary-color;
}

// 解决方案2：使用with配置
@use 'buttons' with (
  $primary-color: #ff0000
);
@use 'forms' with (
  $primary-color: #00ff00
);

循环生成选择器

问题：需要基于数据动态生成多个类似的选择器
解决：使用@each、@for或@while循环

// 使用@each循环遍历列表
$colors: (primary, #3f51b5), (secondary, #ff4081), (success, #4caf50);

@each $name, $color in $colors {
  .btn-#{$name} {
    background-color: $color;
    color: white;
    
    &:hover {
      background-color: darken($color, 10%);
    }
  }
}

// 使用@for循环生成网格类
@for $i from 1 through 12 {
  .col-#{$i} {
    width: percentage($i / 12);
  }
}

浏览器兼容性

问题：生成的CSS在某些浏览器中不兼容
解决：使用Autoprefixer添加浏览器前缀

// 在PostCSS配置中添加Autoprefixer
module.exports = {
  plugins: [
    require('autoprefixer')({
      overrideBrowserslist: ['last 2 versions', '> 1%']
    })
  ]
};

单位转换

问题：需要在不同单位之间进行转换
解决：使用Sass内置函数或自定义函数

// px转换为rem
@function rem($px, $base: 16px) {
  @return ($px / $base) * 1rem;
}

.element {
  font-size: rem(24px); // 输出: 1.5rem
  margin: rem(32px); // 输出: 2rem
}

// 百分比计算
@function percentage-width($columns, $total-columns: 12) {
  @return percentage($columns / $total-columns);
}

.column {
  width: percentage-width(4); // 输出: 33.33333%
}

调试困难

问题：难以定位样式问题的来源
解决：使用Source Maps和@debug语句

// 在编译选项中启用Source Maps
sass --source-map input.scss output.css

// 使用@debug输出调试信息
@debug "当前变量值: #{$variable}";

@mixin debug-mixin($param) {
  @debug "mixin参数: #{$param}";
  // mixin代码
}

书籍推荐

《Sass和Compass实战》- 介绍Sass和Compass的基础知识和实际应用
《CSS揭秘》- 虽然不是专门讲Sass的书，但包含许多可以用Sass实现的CSS技巧
《Pragmatic Guide to Sass》- 实用的Sass指南
《Jump Start Sass》- 快速入门Sass的指南书

视频教程

Sass基础 - Net Ninja - YouTube上的免费Sass教程系列
Advanced Sass - LevelUpTuts - 进阶Sass技巧
Sass工作流 - Pluralsight - 专业Sass工作流程教程
CSS预处理器比较 - Udemy - 比较Sass、Less和Stylus

博客与文章

CSS-Tricks的Sass文章 - 丰富的Sass技巧和教程
Sass新闻 - Sass相关新闻和文章
Smashing Magazine的Sass文章 - 高质量的Sass文章
David Walsh的Sass教程 - 实用Sass技巧

总结

Sass/SCSS是前端开发中不可或缺的工具，通过本文提供的资源，你可以从入门到精通，充分发挥Sass的强大功能。无论是学习基础语法，还是探索高级技巧，这些资源都能为你提供有力支持。

记住，最好的学习方式是实践。尝试在实际项目中应用这些知识，并持续关注社区动态，了解Sass的最新发展和最佳实践。