Skip to main content

Sass Best Practice

最佳实践​

  1. 合理的组织文件和目录结构：将一个大的Sass文件拆分成一个一个小的模块，可以按照功能、页面、组件来划分我们的文件结构，这样的话更加利于我们的项目维护。
sass/
|
|-- base/
|   |-- _reset.scss  // 重置样式
|   |-- _typography.scss  // 排版相关样式
|   ...
|
|-- components/
|   |-- _buttons.scss  // 按钮相关样式
|   |-- _forms.scss  // 表单相关样式
|   ...
|
|-- layout/
|   |-- _header.scss  // 页眉相关样式
|   |-- _footer.scss  // 页脚相关样式
|   ...
|
|-- pages/
|   |-- _home.scss  // 首页相关样式
|   |-- _about.scss  // 关于页面相关样式
|   ...
|
|-- utils/
|   |-- _variables.scss  // 变量定义
|   |-- _mixins.scss  // 混入定义
|   |-- _functions.scss  // 函数定义
|   ...
|
|-- main.scss // 主入口文件
  1. 多使用变量：在开发的时候经常会遇到一些会重复使用的值(颜色、字体、尺寸)，就可以将这些值定义为变量，方便在项目中统一进行管理和修改。
  2. 嵌套：嵌套非常实用，但是要避免层数过多的嵌套，通常来讲不要超过3层。
  3. 多使用混合指令：混合指令可以将公共的部分抽离出来，提高了代码的复用性。但是要清楚混合指令和@extend之间的区别，具体使用哪一个，取决于项目时的具体场景，不是说某一个就比另一个绝对的好。
  4. 使用函数：可以编写自定义函数来处理一些复杂的计算和操作，而且Sass还提供了很多非常好用的内置函数。
  5. 遵循常见的Sass编码规范：Sass guidelines，Airbnb CSS。

Sass未来发展​

如果想要获取到Sass的最新动向，通常可以去Sass的社区看一下。社区往往包含了这门技术最新的动态，甚至有一些优秀的技术解决方案是先来自于社区，之后才慢慢成为正式的标准语法的。

目前市面上又很多 CSS 库都是基于 Sass 来进行构建了，例如：

  • Compass - 老牌 Sass 框架，提供大量 Sass mixins 和函数，方便开发。
  • Bourbon - 轻量级的 Sass mixin 库，提供常用的 mixins，简化 CSS 开发。
  • Neat - 构建具有响应式网格布局的网站，基于 Sass 和 Bourbon，容易上手。
  • Materialize - 实现 Material Design 风格，基于 Sass 构建，提供丰富组件和元素。
  • Bulma - 现代 CSS 框架，提供弹性网格和常见组件，可与 Sass 一起使用。
  • Foundation - 老牌前端框架，基于 Sass，提供全面的组件和工具，适合构建复杂项目。
  • Semantic UI - 设计美观的 UI 套件，基于 Sass 构建，提供丰富样式和交互。
  • Spectre.css - 轻量级、响应式和现代的 CSS 框架，可以与 Sass 结合使用。

因此，基本上目前 Sass 已经成为了前端开发人员首选的 CSS 预处理器。因为 Sass 相比其他两个 CSS 预处理器，功能是最强大的，特性是最多的，社区也是最活跃的。

关于Sass官方团队，未来再对Sass进行更新的时候，基本上会往以下几个方面做出努力：

  • 性能优化
  • 持续的与现代Web技术的集成
  • 新功能的改进
Last updated on