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

并且由于空格而不起作用。

Answer 1

它完全按照您的指示进行渲染。

您在 img 标签中请求了一个 #logo id。

如果你想要一个名为 logo 的 img，你需要这样说。

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

参见:LESS: Nested Rules

新增示例中的相同问题:

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

        .col1 {
            width: 120px;
        }

        .col2 {
            width: 130px;
        }
    }
}

就是你想说的。