css - CSS LESS プリプロセッサは不要な空白を追加します

Question

CSS LESS プリプロセッサを使用して、.less を .css に変換しようとしています。ただし、使用するプリプロセッサに関係なく、それらはすべて不要な空白を出力 .css に追加します。

たとえば、次の LESS の例を考えてみましょう。

/* Images */
img {
    /* Site logo */
    #logo {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        max-height: 93px;
        max-width: 500px;
    }
}

プリプロセッサ (この場合は SimpLESS) を使用した後、最終結果は次のようになります。

/* Images */
img {
    /* Site logo */
}

img #logo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-height: 93px;
    max-width: 500px;
}

img と #logo の間に空白があるため、ブラウザーは #logo スタイルを使用できません。ただし、img と #logo の間の空白を削除すると、ブラウザーはサイトを正しくレンダリングします。

プリプロセッサが不要な空白を追加する理由と、なぜこの奇妙な問題が発生するのか疑問に思っています。

別の例、LESS:

table {
    .latestProjects {
        thead {
            color: @colorHeaders;
        }

        .col1 {
            width: 120px;
        }

        .col2 {
            width: 130px;
        }
}

なる:

table .latestProjects thead {
    color: #bd9d0d;
}

table .latestProjects .col1 {
    width: 120px;
}

table .latestProjects .col2 {
    width: 130px;
}

空白のために機能しません。