SASS 目录结构

最新推荐文章于 2026-03-14 04:22:28 发布

原创最新推荐文章于 2026-03-14 04:22:28 发布 · 508 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#sass #前端 #css

本文介绍了SASS在大型项目中的目录结构管理，遵循官方7-1最佳实践，将文件按类别如基础、组件、布局、页面、主题和第三方库分层存放。强调了主文件main.scss的作用和各目录的重要性和组织方式，以确保开发过程中的高效维护和复用。

SASS 目录结构的管理

对于大型项目来说，前端的页面很多，如果不能很好的管理 SASS 的目录结构或者架构，后续的维护可能会非常困难。SASS 7-1 是官方的一个最佳实践，就是将 SASS 文件按照不同的类别放入不同目录中，包括以下目录和文件

base/
components/
layout/
pages/
themes/
abstracts/
vendors/
文件目录
main.scss

下面是一个具体的例子

sass/
|
|– abstracts/
|   |– _variables.scss    # Sass Variables
|   |– _functions.scss    # Sass Functions
|   |– _mixins.scss       # Sass Mixins
|   |– _placeholders.scss # Sass Placeholders
|
|– base/
|   |– _reset.scss        # Reset/normalize
|   |– _typography.scss   # Typography rules
|   …                     # Etc.
|
|– components/
|   |– _buttons.scss      # Buttons
|   |– _carousel.scss     # Carousel
|   |– _cover.scss        # Cover
|   |– _dropdown.scss     # Dropdown
|   …                     # Etc.
|
|– layout/
|   |– _navigation.scss   # Navigation
|   |– _grid.scss         # Grid system
|   |– _header.scss       # Header
|   |– _footer.scss       # Footer
|   |– _sidebar.scss      # Sidebar
|   |– _forms.scss        # Forms
|   …                     # Etc.
|
|– pages/
|   |– _home.scss         # Home specific styles
|   |– _contact.scss      # Contact specific styles
|   …                     # Etc.
|
|– themes/
|   |– _theme.scss        # Default theme
|   |– _admin.scss        # Admin theme
|   …                     # Etc.
|
|– vendors/
|   |– _bootstrap.scss    # Bootstrap
|   |– _jquery-ui.scss    # jQuery UI
|   …                     # Etc.
|
`– main.scss              # Main Sass file