案例背景：在大型网站中，css样式划分为多个模块文件，如reset.css，layout.css，skin.css等等（颗粒化越小，样式重用率越高），页面需要的时候引入它们即可！

回到less项目中这里，我们也可以将划分为 reset.less，layout.less，skin.less等，然后在本页面样式（如index.less）嵌入它们（嵌入的方式，就减少了多个HTTP请求，性能相对好，也可以了解为合拼），代码如下：

index.less

@import 'block/reset.less';

@import 'block/layout.less';

@import 'block/unit.less';

reset.less

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {

    margin:;padding:;

}

layout.less

.main{width:1000px;margin:0 auto;}

unit.less

.tips{background:#eee;color:#f60;}

然后页面就引入已经编译后的index.css文件

index.html

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <link rel="stylesheet" href="css/index.css">

</head>

<body>

    <div class="main">

        <div class="tips">tips</div>

    </div>

</body>

</html>

然后，当在调试 .tips 这块样式时，问题就来了，我怎么知道它是属于哪个模块的样式文件呢？ 重点来了，就是利用生成的 source map 进行代码文件跟踪

（1）如何生成呢？以考拉软件为例：

打钩选中，就会生成一份 index.css.map 文件

（2）在谷歌浏览器打开页面，按 F12，指向.tips样式，发现它已经被跟踪到unit.less这个模块文件里面了

Less开发指南（三）- 代码文件跟踪调试的更多相关文章

  1. MIP开发教程(三) 使用MIP-CLI工具调试组件

    一 . 在 mip-extensions 仓库中创建新的组件 二 . 预览调试组件 三 . 在 MIP 页中引用自己编写的 MIP 组件 四 . 组件提交到 GitHub 仓库时需要进行校验 站长开发 ...

  2. ReadHub项目Kotlin版开发指南(三、MVP架构)

    ReadHub项目Kotlin版转换指南(一.环境搭建) ReadHub项目Kotlin版转换指南(二.数据库和网络请求) ReadHub项目Kotlin版转换指南(三.MVP架构) Android ...

  3. Android NDK开发指南---Application.mk文件和android.mk文件

    https://android.googlesource.com/platform/development/+/donut-release/ndk/docs/OVERVIEW.TXT https:// ...

  4. 2020年09月15日-项目开发-python二次处理代码文件

    Caterpillar通过将BPMN生成为solidity代码后, 我需要对solidity代码做二次处理,即在其中的特定函数中插入event类型,以便去做事件监听. 最终生成的不仅包括solidit ...

  5. SpringBoot整合WEB开发--（三）文件上传

    文件上传: Java中文件上传一共涉及到两个组件,CommonsMultipartResolver和StandardServletMultipartResolver,其中CommonsMultipar ...

  6. 实验三：gdb跟踪调试内核从start_kernel到init进程启动

    原创作品转载请注明出处<Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 如果我写的不好或者有误的地方请留言 ...

  7. 基于Html5 Plus + Vue + Mui 移动App开发（三）-文件操作（读取、保存、更新数据）

      随着手机的发展,现在越来越多的人选择在手机上看书.无论是专业书籍.文学.英语还是网络小说,在手机上看新闻成了人们处理零碎时间的办法.在智能手机里安装一个资讯APP,可以随时.随地查看自己想看的资讯 ...

  8. __FILE__,__LINE__,FUNCTION__实现代码跟踪调试（linux下c语言编程 ）

    root@xuanfei-desktop:~/cpropram/2# cat global.h //头文件#ifndef CLOBAL_H        #define GLOBAL_H        ...

  9. __FILE__,__LINE__,FUNCTION__实现代码跟踪调试

    转:http://www.cnitblog.com/zouzheng/archive/2007/08/31/32691.aspx 先看下简单的初始代码:注意其编译运行后的结果. root@xuanfe ...

随机推荐

  1. HDU 1104 Remainder(BFS 同余定理)

    题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=1104 在做这道题目一定要对同余定理有足够的了解,所以对这道题目对同余定理进行总结 首先要明白计算机里的 ...

  2. 最近遇到的bug

    1. 地图周边快查,按钮点击没反应 子控件超出了父控件 2.图片显示灰色背景,一直去不掉    设置图片背景图片clear cloro  3. 显示隐藏导航栏  下面两个方法效果不同     self ...

  3. freemarker 判断写法

    1.if条件写法:如果data非空则输出:test<#if data?? >test</#if> 2.为空则输出 <#if !(data??) > test < ...

  4. Sum It Up---poj1564（dfs）

    题目链接:http://poj.org/problem?id=1564 给出m个数,求出和为n的组合方式:并按从大到小的顺序输出: 简单的dfs但是看了代码才会: #include <cstdi ...

  5. python pip源配置

    一.Linux版本: linux的文件存放在:~/.pip/pip.conf 二.windows版本: 在用户文件夹下创建pip目录,并在pip目录下创建pip.ini文件(%HOME%\pip\pi ...

  6. 【新业务搭建】竞争情报业务规划及体系构建的思考——By Team

    竞争情报业务规划.体系构建 一.竞争情报业务定位——“做什么” 一)业务愿景.目标和原则 愿景:将情报工作融入到公司各个业务中,成为业务活动的灯塔 目标:直接支撑标杆学习(间接支撑三大战略).直接支持 ...

  7. T-SQL练习题

    转自:http://www.cnblogs.com/jenrrychen/p/5348546.html 1 - 3 题: 数据表结构: OrderID ProductID OrderDate  Sal ...

  8. （1.1）DML增强功能-CTE

    1.CTE的通用形式 WITH temp_name as ( CTE查询结果集 ) 释义: (1)with/as :关键字 (2)temp_name:为CTE临时使用名称,可以看初学者做是一个临时表 ...

  9. 003-and design-在create-react-app项目中使用antd

    一.概述 create-react-app 是业界最优秀的 React 应用开发工具之一,本文会尝试在 create-react-app 创建的工程中使用 antd 组件,并自定义 webpack 的 ...

  10. Entity Framework With Oracle(转)

    虽然EF6都快要出来了,但是对于Oracle数据库,仍然只能用DB first和Model First来编程,不能用Code First真是一个很大的遗憾啊. 好了,废话少说,我们来看看EF中是如何用 ...