2

我正在尝试使用 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;
    }
}

使用预处理器（在本例中为 SimpleLESS）后，最终结果如下：

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

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

4

1 回答 1

3

它正在渲染您告诉它的内容。

您要求在标签中输入#logoid 。img

如果你想要一个imgnamed logo，你需要这么说。

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

请参阅：LESS：嵌套规则

新增示例中的相同问题：

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

        .col1 {
            width: 120px;
        }

        .col2 {
            width: 130px;
        }
    }
}

就是你的意思。

于 2013-09-06T22:01:12.573 回答