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

它正如你所说的那样呈现。

您在#logo代码中要求img个ID。

如果您想要一个名为img的{{1}}，则需要说明这一点。

logo

请参阅：LESS: Nested Rules

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

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

是你的意思。

CSS LESS预处理器增加了不必要的空白区域

1 个答案: