好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

Less开发指南(三)-代码文件跟踪调试_html/css_WEB-ITnose

案例背景: 在大型网站中,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:0;padding:0;} 

layout.less

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

unit.less

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

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

index.html

             Document           

tips

查看更多关于Less开发指南(三)-代码文件跟踪调试_html/css_WEB-ITnose的详细内容...

  阅读:32次