Lesscss Stops Processing Styles

LessCSS stops processing styles

I just found a issue in GitHub for this. Quoting myself:

This happens to me also in 1.1.5. The script uses localStorage to store the stylesheets. Clearing your browser cache won't work. You must clear it's cookies (logging off all your accounts, %!@^#%) or doing localStorage.clear(). I use this before loading less.js (not using localStorage myself):

<script> /* Provisory for dev environment: */ localStorage.clear(); </script>

When going to production you just compile the stylesheets to .css

lesscss escape expression

This compiles fine for me:

.cboxIE6 #cboxMiddleRight {
  _behavior: ~`this.src = this.src ? this.src : this.currentStyle.backgroundImage.split('"')[1], this.style.background = "none", this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.src + ", sizingMethod='scale')"`;
}

but it also tries executing the JavaScript at compile time. To avoid that, you could add another more quotes:

.cboxIE6 #cboxMiddleRight {
  _behavior: ~`"\"this.src = this.src ? this.src : this.currentStyle.backgroundImage.split('\\\"')[1], this.style.background = \\\"none\\\", this.style.filter = \\\"progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\\\" + this.src + \\\", sizingMethod='scale')\""`;
}

Though it looks ugly, it compiles down to this:

.cboxIE6 #cboxMiddleRight {
  _behavior: "this.src = this.src ? this.src : this.currentStyle.backgroundImage.split('\"')[1], this.style.background = \"none\", this.style.filter = \"progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\" + this.src + \", sizingMethod='scale')";
}

LESS css isn't working, what's wrong with this setup

You don't have to use .somepattern(); just somepattern;

So:

.somepattern(@color: red, @size: 16px) {
    font-size:@size;
    font-weight:bold;
    border:2px solid @color;
}

.myclass {
    .somepattern;
}

less css not rendering (for a split second) on page load

Found the issue.

instead of

<?php
    require 'navbar/navbar.php';
    require 'header.php';
?>

I just needed to require my header first

<?php
    require 'header.php';
    require 'navbar/navbar.php';
?>

less css import rules without styles

Probably the simplest way is just to define your mixins as parametric mixins, akin to "functions" in other languages. Of course, usually parametric mixins take parameters, but if yours don't need to accept any parameters, you can simply omit them and use empty parentheses.

That would mean re-writing your vars.less file like so:

@base: #96959A;
.ts_no() { text-shadow: none; }
.pos() { position: absolute; z-index: 2; display: block; }

And that will prevent the ruleset from appearing in your compiled CSS output whenever it is not explicitly used within another ruleset.

The documentation provides more details.

LESSCSS escaping filter

Try this:

filter: ~"url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale')";

Why can't I get the LESS CSS framework working here?

It might be that the "Manage Resources" loader does not understand what content it should be when the extension on the css is ".less" and not ".css".

I think jsfiddle ignores the references you have in the HTML section: all external references must be added on the left side in either the list of known frameworks, or as a link in the "Manage Resources" section. I would guess this is for security reasons...

---

Related Topics