SASS之文件整理

版权声明:红豆 https://blog.csdn.net/sinat_32605321/article/details/85343072

对于样式应该尽可能的不重复

  • base/
    • 文本排版、模板相关
    • _reset.scss/_normalize.scss
    • _typography.scss
    • 将样式初始化,文字对其方式,自定义字体都写在这个文件下
  • components/
    • 小组件文件
    • _media.scss
    • _loading.scss
    • 这个文件夹感觉不会经常用,为了一个ajax延迟而创建一个文件有点奢侈,笔者打算卸载layout,或者base里面
  • helpers/
    • 也可以写’utils/’
    • 工具、帮助
    • _function.scss:混合宏
    • _mixin.scss
    • _varibales.scss/_config.scss:全局变量
    • _placeholders.scss/_helper.scss
    • 像是图片路径、高亮字体色、常用字体色、选中边框、混合宏、响应式、都可以卸载这里
  • layout/
    • 也可以写’partials/’
    • 用户布局方面的样式
    • _grid.scss
    • _header.scss
    • _footer.scss
    • _sidebar.scss
    • _forms.scss
    • _navigation.scss
    • _responsive.scss
    • 这个文件夹可以放一些公共样式,但只是一个项目适用的
  • pages/
    • 针对页面写特定的样式,以页面的功能命名
    • 这里就是主要的样式文件夹了
  • themes/
    • 主题样式
    • 笔者到现在还没有写过项目主题,感觉有点高大上
  • vendors/
    • 引用外部的UI库和框架的css
  • vendors-extensions/
    • 覆盖外部库和框架样式
  • main.scss

大漠翻译Hugo Giraudel管理Sass项目文件结构
对于文件整理从上个项目开始一直在学习,感觉Hugo Giraudel所写的这篇文章不仅能应用于SASS同时对于整个项目的结构搭建都给了我一些启示

猜你喜欢

转载自blog.csdn.net/sinat_32605321/article/details/85343072