Home > Developer > JavaScript
Background:On a large website, the CSS sample is divided into multiple development files, such as reset.css, layout.css, and skin.css (smaller granularity, higher style Reuse Rate). You can introduce them when you need them!
Back to the less project, we can also divide it into reset. less, layout. less, skin. and then style (such as index. less) embed them (the embedding method reduces multiple HTTP requests, and the performance is relatively good. You can also understand it 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;}
After that, access the compiled index.css file.
Index.html
<!doctype html>
Then, when debugging the. tips style, the problem arises. How do I know which module the Style File belongs? The point is to use the generated source map for code file tracking.
(1) how to generate it? Taking the koala software as an example:
After you check the selected file, an index.css. map File is generated.
(2) Open the page in Google Chrome and press F12 to point to the. tips style. It is found that it has been tracked into the unit. less module File.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
