美文网首页
管理Less/Sass项目文件结构

管理Less/Sass项目文件结构

作者: xinhui9056 | 来源:发表于2019-03-08 14:40 被阅读0次

    做了一段时间的前端,越发觉得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
    版权声明:本文为博主原创文章,转载请附上博文链接!

    相关文章

      网友评论

          本文标题:管理Less/Sass项目文件结构

          本文链接:https://www.haomeiwen.com/subject/cryrpqtx.html