管理Less/Sass项目文件结构

2019-03-08  本文已影响0人  xinhui9056

做了一段时间的前端,越发觉得css文件处理很重要,继承复用要是处理不好,会在后期的维护上花费much time。

近些日子,接触了less/sass,也阅读了相关的文章和blog,然后总结除了一套结构,图片贴上(mindManager 软件画画的)。

CSS目录结构

最后,单个page页面就可以调用以上分类的less文件了,按需调用即可。

/* base -
========================================================================= */
@import 'base/_reset.less';
@import 'base/_typography.less';
 
 
/* help -
========================================================================= */
@import 'helpers/_variables.less';
@import 'helpers/_mixins.less';
@import 'helpers/_placeholders.less';
@import 'helpers/_function.less';
 
 
/* components -
========================================================================= */
@import 'components/_buttons.less';
@import 'components/_list.less';
@import 'components/_tab.less';
@import 'components/_media.less';
@import 'components/_thumbnails.less';
 
 
/* vendor -
========================================================================= */
@import 'vendor/bootstrap.less';
@import 'vendor/jQueryUI.less';
 
 
/* vendor-extentions -
========================================================================= */
@import 'vendor-extentions/_bootstrap.less';
@import 'vendor-extentions/_jQueryUI.less';
 
 
/* layout -
========================================================================= */
@import 'layout/_layout.less';
@import 'layout/_grid.less';
@import 'layout/forms.less';
@import 'layout/header.less';
@import 'layout/footer.less';
@import 'layout/sidebar.less';
@import 'layout/navigation.less';
 
 
/* theme -
========================================================================= */
@import 'theme/_theme.less';
// @import 'theme/_admin.less';
 
 
/* page -
========================================================================= */
@import 'components/_home.less';
// @import 'components/_contact.less';

作者:成至
来源:CSDN
原文:https://blog.csdn.net/ruizhengyun/article/details/40827633
版权声明:本文为博主原创文章,转载请附上博文链接!

上一篇 下一篇

猜你喜欢

热点阅读