Less开发指南(三)- 代码文件跟踪调试
案例背景:在大型网站中,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开发指南(三)- 代码文件跟踪调试的更多相关文章
- MIP开发教程(三) 使用MIP-CLI工具调试组件
一 . 在 mip-extensions 仓库中创建新的组件 二 . 预览调试组件 三 . 在 MIP 页中引用自己编写的 MIP 组件 四 . 组件提交到 GitHub 仓库时需要进行校验 站长开发 ...
- ReadHub项目Kotlin版开发指南(三、MVP架构)
ReadHub项目Kotlin版转换指南(一.环境搭建) ReadHub项目Kotlin版转换指南(二.数据库和网络请求) ReadHub项目Kotlin版转换指南(三.MVP架构) Android ...
- Android NDK开发指南---Application.mk文件和android.mk文件
https://android.googlesource.com/platform/development/+/donut-release/ndk/docs/OVERVIEW.TXT https:// ...
- 2020年09月15日-项目开发-python二次处理代码文件
Caterpillar通过将BPMN生成为solidity代码后, 我需要对solidity代码做二次处理,即在其中的特定函数中插入event类型,以便去做事件监听. 最终生成的不仅包括solidit ...
- SpringBoot整合WEB开发--(三)文件上传
文件上传: Java中文件上传一共涉及到两个组件,CommonsMultipartResolver和StandardServletMultipartResolver,其中CommonsMultipar ...
- 实验三:gdb跟踪调试内核从start_kernel到init进程启动
原创作品转载请注明出处<Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 如果我写的不好或者有误的地方请留言 ...
- 基于Html5 Plus + Vue + Mui 移动App开发(三)-文件操作(读取、保存、更新数据)
随着手机的发展,现在越来越多的人选择在手机上看书.无论是专业书籍.文学.英语还是网络小说,在手机上看新闻成了人们处理零碎时间的办法.在智能手机里安装一个资讯APP,可以随时.随地查看自己想看的资讯 ...
- __FILE__,__LINE__,FUNCTION__实现代码跟踪调试(linux下c语言编程 )
root@xuanfei-desktop:~/cpropram/2# cat global.h //头文件#ifndef CLOBAL_H #define GLOBAL_H ...
- __FILE__,__LINE__,FUNCTION__实现代码跟踪调试
转:http://www.cnitblog.com/zouzheng/archive/2007/08/31/32691.aspx 先看下简单的初始代码:注意其编译运行后的结果. root@xuanfe ...
随机推荐
- poj1722 SUBTRACT【线性DP】
SUBTRACT Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 2037 Accepted: 901 Special ...
- win10配置的静态/动态IP和 DNS的方法
1.配置静态IP和DNS netsh interface ip set address name="以太网" source=static addr=192.168.9.145 ma ...
- Java字符编码问题
今天研究了一下,记录下来 中间用的是redis,可以使用任意其他的io替代,一样的 Test1 String s1 = "我要测试"; String s2 = "I wa ...
- UIWebView中加载的网页尺寸太大,如何让网页适应屏幕大小 WebView加载HTML图片大小自适应与文章自动换行
webview.scalesPageToFit = YES; http://www.cnblogs.com/yujidewu/p/5740934.html 若需要根据图片原本大小,宽度小于320px的 ...
- 从零开始写JavaWeb框架(第一章节)
买了本<从零开始写JavaWeb框架> 因为是第一次用IDEA,期间遇到很多问题,比如:怎么在IDEA中配置tomcat: 在IDEA界面的右上角点击: 点击+,选择Maven 到了如下界 ...
- C#基础整理(二)
1.变量类型int.double.string.char.bool.decimal变量使用规则:先声明,再赋值,最后使用 2.命名规范:Camel:第一个单词首字母小写,其他单词首字母大写,其余字母小 ...
- 301-React Ext-React创建组件的三种方式及其区别
一.概述 React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同归:具体的三种方式: 函数式定义的无状态组件 es5原生方式React.createClass定义的组件 es6形 ...
- python拼接字符串
python拼接字符串一般有以下几种方法: 1.直接通过(+)操作符拼接 s = 'Hello' + ' ' + 'World' + '!' print(s) 输出结果:Hello World! 使用 ...
- python中的切片
python中提供了一种很方便的方法来完成取出指定范围内的元素,这种方法就是切片(Slice). 以下为切片的例子: In [1]: L = ['Michael', 'Sarah', 'Tracy', ...
- 21. Merge Two Sorted Lists(合并2个有序链表)
21. Merge Two Sorted Lists Merge two sorted linked lists and return it as a new list. The new list s ...