CSS-Redundancy When Using Less and Its @Import

CSS-Redundancy when using LESS and its @import

Although not ideal, the practical reason for this is that the files you import theoretically don't need to contain any CSS. Typically, you would have variables and dynamic mixins, which don't contribute to your CSS output:

lib.less:

#colors {
    @blue: #0011ff;
    @red: #ee2222;
}
.button (@width: 10px) {...}

main.less:

@import "lib";

a { color: #colors[@blue]; }

output, main.css:

a { color: #0011ff; }

#colors {} and .button will not be output in this case.

Less CSS : Conditional @imports using mixins - Variable scope

Variables from within mixins do not override those in the caller scope (see Mixins as Functions).

For this use-case I'd suggest something more simple:

@bt-color-variation: dark;

@import "color-variations/@{bt-color-variation}/global";
@import "color-variations/@{bt-color-variation}/buttons";
@import "color-variations/@{bt-color-variation}/variables";

See Variabes > Import statements.

LESS CSS retina media queries without redundancy

(See comments above for context of this solution).
I'd say that a price for non-repeating media queries will always be "repeating something else then". I.e. it either has to be the media depended property as in:

// ...................................
// usage:

.mq-default() {
    .banner {
        .background-image("test.jpg");
    }
}

.mq-retina() {
    .banner {
        .background-image("test.jpg");
    }
}

// ...................................
// impl:

.mq-default() {}
.mq-retina()  {}

& {
    .mq-default;

    .background-image(@image) {
        background-image: @image;
    }
}

@media (min-device-pixel-ratio: 1.5) {
    .mq-retina;

    .background-image(@image) {
        background-image: replace(@image, "\.", "_2x.");
        background-size: 100%;
    }
}

Or the media depended selector itself, as in:

// ...................................
// usage:

.background-image(banner, "test.jpg");

// ...................................
// impl:

.mq-retina() {}

@media (min-device-pixel-ratio: 1.5) {
    .mq-retina;
}

.background-image(@class, @image) {
    .@{class} {
        background-image: @image;
    }

    .mq-retina() {
        .@{class} {
            background-image: replace(@image, "\.", "_2x.");
            background-size: 100%;
        }
    }
}

---

P.S. For this simplified case it is also possible to modify the first example to get rid of repetitions, for example like this:

// ...................................
// usage:

.mq-common() {
    .banner {
        .background-image("test.jpg");
    }
}

// ...................................
// impl:

.mq-default() {.mq-common}
.mq-retina()  {.mq-common}

& {
    .mq-default;

    .background-image(@image) {
        background-image: @image;
    }
}

@media (min-device-pixel-ratio: 1.5) {
    .mq-retina;

    .background-image(@image) {
        background-image: replace(@image, "\.", "_2x.");
        background-size: 100%;
    }
}

But that way it actually becomes a variant of the second example (where more complex code will lead to repeated selectors in the generated CSS because you won't want to put all properties into .mq-common), not counting that the whole thing also turns to be quite head-scratching.

---

P.P.S. And at last, it is finally possible to consolidate "everything" (in the generated CSS) by introducing another level of indirection, but the source code itself becomes too verbose to be actually usable in practice. (In this example I'll break it into two files for a bit more clear code, but that's not really required - the imported file can be written as one big mixin):

// ...................................
// styles.less:

.banner {
    .mq-default({
        color: red;
    });

    .mq-medium({
        color: green;
    });

    .mq-retina({
        color: blue;
    });

    .background-image("test.jpg");
    note: not "wrapped" properties will appear in every media block;
}

.background-image(@image) {
    .mq-default({
        background-image: @image;
    });

    .mq-retina({
        background-image: replace(@image, "\.", "_2x.");
        background-size: 100%;
    });
}

---

// ...................................
// main.less:

.media-import(default);

@media (min-width: 600px) {
    .media-import(medium);
}

@media (min-device-pixel-ratio: 1.5) {
    .media-import(retina);
}

.media-import(@device) {
    .mq-default(@styles) when (@device = default) {@styles();}
    .mq-medium(@styles)  when (@device = medium)  {@styles();}
    .mq-retina(@styles)  when (@device = retina)  {@styles();}
    @import (multiple) "styles.less";
}

LESS variables embeded by @import or directly?

Please note that they refer to CSS imports.
If you use LESS imports and the "compile" the less file you get one single file as the result, not impacting the performance of the browser in the way stated in your linked articles.

So all-in-all, i would say, just make sure your files end in .less and they will be consolidated anyway.

Confusion surrounding @import behaviour in LESS, using Codekit

I discovered this is also a Codekit issue too, as I am using Codekit to compile the less files.

Solution:

1. Create style.less and edit it as intended, reference @blue variable
   (not declared in current document)
2. On save, Codekit returns a compile error, due to un-declared variable in style.less. Ignore the error.
3. In bootstrap.less @import style.less
4. Save bootstrap.less, it compiles without issue
5. Call bootstrap.css in the html doc

Incidentally, I encountered a Codekit bug between step 2 and 3. After step 2, Codekit no longer watches or compiles anything. To solve, I needed to remove the watched project and then re-add it to Codekit.

---

Related Topics