Less 開発ガイド (3) - コード ファイルの追跡とデバッグ_html/css_WEB-ITnose

ケースの背景: 大規模な Web サイトでは、CSS スタイルは、reset.css、layout.css、skin.css などの複数のモジュール ファイルに分割されます (粒度が小さいほど、スタイルの再利用率が高くなります)。ページに必要なものを必要なときに導入するだけです。

less プロジェクトに戻り、reset.less、layout.less、skin.less などに分割して、このページのスタイル (index.less など) に埋め込むこともできます (埋め込みメソッドは複数の HTTP リクエストを削減し、パフォーマンスは比較的良好で、組み合わせとしても理解できます)、コードは次のとおりです。

layout.less

@import 'block/reset.less';@import 'block/layout.less';@import 'block/unit.less';

unit.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;}

その後、ページにはコンパイルされたindex.cssファイルが紹介されます

index.html

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

それでは、デバッグ時に.tips このスタイルを使用する場合、それがどのモジュールのスタイル ファイルに属しているかをどうやって知ることができるかという疑問が生じます。 ここで重要なポイントが、生成されたソース マップを使用してコード ファイルを追跡することです

(1) どのように生成するか? Koala ソフトウェアを例に挙げます。

チェックして選択すると、index.css.map ファイルが生成されます

(2) Google Chrome でページを開き、F12 キーを押し、.tips スタイルをポイントします。 、それを見つけてください それはモジュールファイルunit.lessに追跡されています