CODEWITHSUNDEEP
csslesswhitespace
Jarzka
Jarzka

Reputation: 773

CSS LESS Preprocessor adds unnecessary white space

I'm try to use CSS LESS preprocessor to convert .less to .css. However, no matter what preprocessor I use, they all add unnecessary white spaces to the output .css.

For example, consider this LESS example:

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

After using a preprocessor (SimpLESS in this case), the end result is this:

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

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

Because there is a whitespace between img and #logo, the browser can not use the #logo styles. However, the browser renders the site correctly if I remove the whitespace between img and #logo.

I'm wondering why the preprocessor adds the unnecessary whitespace and why it causes this weird problem.

Another example, LESS:

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

        .col1 {
            width: 120px;
        }

        .col2 {
            width: 130px;
        }
}

Becomes:

table .latestProjects thead {
    color: #bd9d0d;
}

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

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

And does not work because of the whitespaces.

Upvotes: 2

Views: 348

Answers (1)

Paul Roub
Paul Roub

Reputation: 36448

It's rendering exactly what you told it to.

You asked for a #logo id within an img tag.

If you want an img named logo, you need to say that.

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

See: LESS: Nested Rules

Same issue in the newly-added example:

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

        .col1 {
            width: 120px;
        }

        .col2 {
            width: 130px;
        }
    }
}

is what you mean to say.

Upvotes: 3

Related Questions