理解预处理器（Sass/Less）

预处理器（Sass/Less）

理解预处理器

Sass（Syntactically Awesome Style Sheets）和Less是CSS预处理器，通过变量、嵌套、混入等功能增强CSS的可维护性和复用性，编译后生成标准CSS。

需要掌握的知识点

• 核心特性：
  • 变量：存储颜色、尺寸等（如$primary-color: #007bff）。
  • 嵌套：层级样式嵌套，减少重复选择器。
  • 混入（Mixin）：复用样式块（如@mixin button { ... }）。
  • 继承（@extend）：复用现有样式（如@extend .base）。
  • 函数与运算：颜色计算、单位转换（如lighten($color, 10%)）。
• 模块化：
  • 使用@import或@use（Sass）组织模块化样式。
  • 示例：@use 'base';引用变量和混入。
• 工具链：
  • 配置：通过Node.js（sass/less包）或Vite/Webpack编译。
  • 调试：检查编译后的CSS是否符合预期。
• Sass vs Less：
  • Sass功能更强大（如控制流@if），社区更活跃。
  • Less语法更简单，适合轻量项目。
• 常见场景：
  • 主题化：用变量管理颜色方案。
  • 组件化：为React/Vue组件编写模块化SCSS。
• 面试问题：
  • Q：Sass的嵌套和继承有什么区别？
    A：嵌套提高代码可读性，继承复用样式并减少CSS输出。
  • Q：如何用Sass实现主题切换？
    A：定义变量（如$theme-dark），通过类切换应用。