管理Less/Sass项目文件结构

本文深入探讨了在前端开发中利用Less/Sass进行CSS文件处理的重要性,通过构建模块化的文件结构,实现样式代码的高效复用与维护。详细介绍了如何将Less/Sass应用于不同页面的样式定制,并分享了实际操作中的一套结构化流程,旨在提升开发效率与代码质量。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

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



最后,单个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';


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值