无CSS预处理器添加了不必要的空白

我正在尝试使用CSS LESS预处理器将.LESS转换为.CSS。但是，无论我使用什么预处理器，它们都会在output.css中添加不必要的空格

例如，考虑这个较少的例子：

/* 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之间的空白，浏览器将正确呈现站点

我想知道为什么预处理器会添加不必要的空白，为什么会导致这个奇怪的问题

另一个例子是：

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

---

因为有空格，所以不起作用。

它完全按照您告诉它的方式呈现

您要求在

img

标签中添加

#徽标

id

如果你想要一个名为

logo

的

img

，你需要这样说

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

见：

新添加的示例中存在相同的问题：

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

        .col1 {
            width: 120px;
        }

        .col2 {
            width: 130px;
        }
    }
}

---

这就是你想说的。

我觉得&#logo就够了？哎呀。是的。修正了。非常感谢您的帮助。：）