Sass最佳实践与展望

喝水爱加冰
218 阅读3分钟

Sass最佳实践与展望

最佳实践

  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 层

.a {
  .....
  .b {
    ....
  }
}

.a{
  ....
}
.a .b{
  ....
}

如果嵌套层数过多：

.a{
  ...
  .b{
    ...
    .c {
      ...
      .d {
        ....
        .e{
          ....
        }
      }
    }
  }
}

.a .b .c .d .e {
  .....
}
  1. 多使用混合指令：混合指令可以将公共的部分抽离出来，提高了代码的复用性。但是要清楚混合指令和 @extend 之间的区别，具体使用哪一个，取决于你写项目时的具体场景，不是说某一个就比另一个绝对的好。
  2. 使用函数：可以编写自定义函数来处理一些复杂的计算和操作。而且 Sass 还提供了很多非常好用的内置函数。
  3. 遵循常见的 Sass 编码规范：

Sass未来发展

我们如果想要获取到 Sass 的最新动向，通常可以去 Sass 的社区看一下。

注意：一门成熟的技术，是一定会有对应社区的。理论上来讲，社区的形式是不限的，但是通常是以论坛的形式存在的，大家可以在论坛社区自由的讨论这门技术相关的话题。

社区往往包含了这门技术最新的动态，甚至有一些优秀的技术解决方案是先来自于社区，之后才慢慢成为正式的标准语法的。

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

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

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

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

  • 性能优化
  • 持续的与现代 Web 技术的集成
  • 新功能的改进
avatar
文章
阅读
粉丝