Home >Web Front-end >HTML Tutorial >Less Development Guide (3) - Code File Tracking and Debugging_html/css_WEB-ITnose
Less Development Guide (3) - Code File Tracking and Debugging_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:04:231219browse
Case background: In large websites, css styles are divided into multiple module files, such as reset.css, layout.css, skin.css, etc. (the smaller the granularity, the better the style The higher the reuse rate), just introduce them when the page needs them!
Back in the less project, we can also divide it into reset.less, layout.less, skin.less, etc., and then embed it in the style of this page (such as index.less) They (the embedded method reduces multiple HTTP requests, the performance is relatively good, and can also be understood as a combination), the code is as follows:
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:0;padding:0;} layout.less
.main{width:1000px;margin:0 auto;} unit.less
.tips{background:#eee;color:#f60;} Then the page introduces the compiled index.css file
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>
Then, when debugging the .tips style, the problem arises, how do I know it? Which module's style file does it belong to? The key point is to use the generated source map to track code files
(1) How to generate it? Take the Koala software as an example:
Check and select, an index.css.map file will be generated
(2 ) Open the page in Google Chrome, press F12, point to the .tips style, and find that it has been tracked into the unit.less module file