辽宁省建设部网站,百度如何验证网站,wordpress文章全显示,电脑上怎么建设网站SASS 目录结构的管理
对于大型项目来说#xff0c;前端的页面很多#xff0c;如果不能很好的管理 SASS 的目录结构或者架构#xff0c;后续的维护可能会非常困难。SASS 7-1 是官方的一个最佳实践#xff0c;就是将 SASS 文件按照不同的类别放入不同目录中#xff0c;包括…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 filemain.scss
main.scss 是主文件也是整个网站或者应用的入口文件它主要的的作用就是将系统中其他的 scss 文件引入进来编译的时候只要指定这个主文件就可以了当然新增任何文件都要加入到main.scss 中。
base 目录
主要把一些共享的文件放到该目录下例如style reset、字体、公共样式等。
layout 目录
Layout 主要放入一些布局文件比如说页面布局后分成了多个部分例如三栏布局、圣杯布局。
components 目录
页面上的一些公用的组件通常会把这些组件抽出来作为公用的文件来提高复用率例如按钮、弹窗、表格等。
pages 目录
不同页面可能有不同样式效果对于页面级别的样式放到 pages 目录下。
abstracts 目录
将项目中的公用工具放到此目录下包括 mixins、variables、functions和 placeholders等按照类型进行分配。如果项目比较大按照类型分配的方式可能会使得单个文件变得很大也可以按照功能模块再进行划分。
themes 目录
如果应用会用到不同的主题或者风格将样式文件放到 themes 目录下。
vendors 目录
如果有第三方的样式文件放到 vendors 目录下。
SASS 官方的目录结构提供了一种思路其实目录结构怎么安排并不重要重要的是我们在开发的过程中要对文件进行规划从而让维护更加省时便捷。
