less / less.js Goto Github PK

As title. This snippet will cause LESS.js to bail:

.testClass (@first: 0, @second: @first) {

    …

}

Version 1.0.22.min.js in firefox 3.6.3 on ubuntu 10.04

If the html links to a master.less file which @imports a slave.less:

• any change to the master.less file would cause changes to be taken into account,
• however changes in the slave.less file only would not cause changes to be taken into account, leaving the previous version active.

Probably some kind of cache issue ? (clearing ff cache does not help)

Parent selectors don't work as expected

a {
    & span { color: red; }
    div & { color: green; }
    p & span { color: blue; }
}

This should output something like the following:

a span { color: red; }
div a { color: green; }
p a span { color: blue; }

Installed using "sudo npm install less", and now using "lessc" just gives me the following error:

Error: Cannot find module 'less'
at loadModule (module:238:15)
at require (module:364:12)
at Object. (/opt/local/bin/lessc:9:12)
at Module._compile (module:385:23)
at module:413:20
at fs:52:23
at node.js:164:9

What gives?

Tried to use a file style.css.less, which gave me an error around 2140 ( var href = sheet.href ? sheet.href.replace(/?.*$/, '') : ''; ) - I couldn't immediately spot the error, but changing the name of the file corrected the problem.
Oh, and this is the biggest thing since Netscape. Thnx, so to speak!

The following outputs the empty string as opposed to throwing an error

.class { color: red;

This is a reduced test case:

.calendar {

    background-color: rgb(245, 245, 245);

    h2 {

        :before {

            background-color: .calendar['background-color'];

        }

    }

}

It's quite possible that I simply don't know how to achieve what I want.

I was trying to hold background url in a variable. Couldn't do so, because:

One. I can't store a string with a colon (:) without enquoting the string.
@url: http://example.com;
div {
something: @url;
}

makes lessc run indefinitely (it just doesn't stop running)

Two. when I enquote the string (with either single or double quotation marks):
@url: "http://example.com";
div {
something: @url;
}
quotation marks are printed when I use this var
muszek@bobek:~/www/fooba/webroot/css$ ./less.sh test
div {
something: "http://example.com";
}

Three. finally, I can't seem to concatenate strings
@url: "http://example.com/a.png";
div {
background-url: url(@url);
}
turns to
div {
background-url: url(@url);
}
I tried different approaches, none of them worked. Is it possible to concatenate strings? It's very handy, for example in cases when you keep a path to images directory in one variable.

It seems less.js is close to a stable release... how about a readme on how to use it?

In some situations when the .less file is not 100% valid, the following line can produce a infinite loop:

for (var n = i, column = -1; input[n] !== '\n'; n--) { column++ }

I fixed it by adding a check to the n variable:

for (var n = i, column = -1; input[n] !== '\n' && n >= 0; n--) { column++ }

The file I tried to parse started like this:

[object Object]/* ***** BEGIN LICENSE BLOCK *****

I have been trying to get all the SSJS rendering
engines to follow this convention so that they can
work with Express out of the box.

options like "locals", "context" etc do not really
apply here but thats the signature anyways

From the original less.rb tests, this test doesn't pass.

.magic-box {
    color: red;
}
.class {
    color: .magic-box['color'];
}

it fails on the [

Hey,

After seeing http://fadeyev.net/2010/06/19/lessjs-will-obsolete-css/ I went to switch from the less/more gem/plugin combo to using less.js.

But when I made all the changes needed, I'm getting the following error:

Object 80 has no method 'toCSS'

The backtrace it shows is the last line of the application.less file (a closing curly brace for a non-nested, plain css declaration).

Any ideas?

The following test fails

.braces-in-quotes {
    quotes: "{" "}";
}

This is due to line 682 in parser.cs

if (peek(/[^{]+[@;}]/g)) return;

which expects a @, ;, or } before the first {.

The line numbers in the error log will not reflect the real line that troubles the LESS engine if one or many files are included / imported.

It seems that less.js does not yet recognize the media attribute and is always creating a style element with the media attribute set to screen:

lessc unconditionally prefixes both input and output paths with the current working dir, so input like this:

lessc /path/to/input.less

yields an error like this:

lessc: ENOENT, No such file or directory: '/path/to/cwd/path/to/input.less'

Not sure if it's by design, but the following code
.mixin() {
@var: 5px;
width: @var;
}
div {
.mixin;
}

Produces this error:

muszek@bobek:~/www/fooba/webroot/css$ ./less.sh test
Error: variable @var is undefined
at Object.eval (/home/muszek/scripts/less.js/lib/less/tree/variable.js:15:19)
at Object.eval (/home/muszek/scripts/less.js/lib/less/tree/expression.js:11:34)
at Object.eval (/home/muszek/scripts/less.js/lib/less/tree/rule.js:30:55)
at Rule.eval (/home/muszek/scripts/less.js/lib/less/tree/rule.js:20:49)
at /home/muszek/scripts/less.js/lib/less/tree/ruleset.js:19:45
at Array.forEach (native)
at Object.evalRules (/home/muszek/scripts/less.js/lib/less/tree/ruleset.js:13:20)
at Object.eval (/home/muszek/scripts/less.js/lib/less/tree/mixin.js:57:52)
at Object.eval (/home/muszek/scripts/less.js/lib/less/tree/mixin.js:17:48)
at Object.toCSS (/home/muszek/scripts/less.js/lib/less/tree/ruleset.js:111:69)

Files with a CSS extension are processed but imports ending in .css are not. Is this made for performance?

There is no such restriction in the Ruby version and it will be great if it at least can be made optional. I prefer using .css instead of .less because text editors recognize it by default and colorize the LESS syntax fairly well.

I traced the problem to the following line in the tree.Import function:
this.css = /css$/.test(this.path);

Hi,

I've got an issue when using dynamic mixin.

This mixin is parsed without complaining:

.fs (@main: 'TitilliumText15L400wt') {
    font-family: @main, 'Helvetica', 'Arial', sans-serif;
}

But when I try to use it like this:

footer {
    padding-top: 10px;
    address {
        color: #ffffff;
        font-size: 11px;
        .fs('GaletteMedium');
    }
}

I get an error:

Error: variable @main is undefined
    at Object.eval (..../lib/less/tree/variable.js:15:19)
    at ..../lib/less/tree/expression.js:18:23
    at Array.map (native)
    at Object.toCSS (..../lib/less/tree/expression.js:16:29)
    at ..../lib/less/tree/rule.js:38:32
    at Array.map (native)
    at Object.toCSS (..../lib/less/tree/rule.js:37:27)
    at Rule.toCSS (..../lib/less/tree/rule.js:15:46)
    at Object.toCSS (..../lib/less/tree/ruleset.js:129:37)
    at Object.toCSS (..../lib/less/tree/ruleset.js:120:36)

Am I doing something wrong?

I'm trying to use Less.js to work on a new Wordpress site design I'm working on.

I've put the Less.js script in the theme folder and added the following to my theme's header:

<script src="<?php bloginfo('template_directory'); ?>/less.js"></script>
<link rel="less" href="<?php bloginfo('template_directory'); ?>/style.less" type="text/css">

When I look at the site, it appears totally unstyled. What am I doing wrong?

See: http://groups.google.com/group/dotless/browse_thread/thread/9d580e75248b3250

Hi,

SHORT VERSION:
Is the following doable:
.bla {
padding-@variable: 5px; //where @variable could be left, right, top, bottom.
}

INTRO:
I'm working on a website that supports both LTR and RTL. So far I made
two stylesheets, one for LTR and one for RTL. The RTL stylesheet
imports the LTR stylesheet and "overrides" those items that are RTL
specific. (padding-right vs padding-left etc).

float: right/left I manage by having a variable called @SIDE (and
@side-opposite) and setting it to the correct side in both stylesheets
(in RTL it is "right", and in LTR it is "left"). In my LTR stylesheet
I write : float : @SIDE

That was the intro....

QUESTION:
I would also like to eliminate the "overriding" issue, to keep my code
more DRY.

The ultimate thing would be if I could make the property variable:

.bla {
padding-@SIDE: 20px;
}

Can this be done?

Thanks a lot.
Gidon

Master @imports A & B,
B @imports A

When using a mixin from A in the master file, the properties get duplicated

See the unit test for more info

Config: lessc cli version 1.0.21 on ubuntu 10.04

Should be self explanatory

.incorrect {
width: 20 - 5 - 1;
}

.workaround {
width: (20 - 5) - 1;
}

produces the following output:
.incorrect {
width: 16;
}
.workaround {
width: 14;
}

Hi guys,

first of all thanks for the project. It's great! Now to my suggestion:

I'm actually including one file to my HTML lets say 'all.less' but than inside this file I have bunch of @imports like @import 'header'; etc. Because the files are @import(s) I'm not able to reload them with watch dog because they are not included in the HTML.

Would it make sense to hack it up and ask for push or is am I doing something wrong?

Thank you, Ladislav

From the original less.rb tests, this test doesn't pass.

.class {
    .mixina, .mixinb;
}

A following less code fails to compile
/*
foo {color:red}
/
The problem seems to lie in the curly braces, this fails too:
/
{}
*/

This error is easy to avoid (by deleting all css code that has been commented out) but a fix would be better :)

From the original less.rb tests, you could just have a nested pseudo class without the self selector &.

a {
    :hover { color: red; }
}

this should do the same as

a {
    &:hover { color: red; }
}

dont lol just make a little helper if you need it

When I compile a less file using the node.js and it fails due to a Syntax error,

1. the exit status is the same as if it was successful (i.e. 0) and
2. the error message is printed out on the standard output

Could you please changed it to

1. some different exit status and
2. the stderr?

The following

@var: red;
@var: green;
body { background: @var; }

results in

body { background: red; }

but it should be

body { background: green; }

@import currently breaks because less.Parser.importer is currently set to null.

LESS(.rb) supports the following

LESS also allows you to access specific properties or variables from different rule-sets:

#defaults {
  @width: 960px;
  @color: black;
}

.article { color: #294366; }

.comment {
  width: #defaults[@width];
  color: .article['color']; 
}

in less.js it does not seem to work (generates a syntax error on the line ".comment {"). Could this possibly get fixed?

/* 
#signup form h3.title {
    background:transparent url(../img/ui/signup.png) no-repeat 50px top;
    height:100px;
}
*/

Creates this:

Syntax Error on line 544:
543 
544 /* 
545 #signup form h3.title {

"~/.node_libraries/.npm/.cache/less/1.0.5/package" build/compiler.jar: gzip decompression failed

Is more or less the error I get when I try a sudo npm install less. Have you updated NPM with the newer tags? or is this even your issue?

Thanks!

I'd love to see some tests to ensure the correct error is raised when invalid less is parsed.

I have this:
.box-shadow (@x){
box-shadow: @x;
-webkit-box-shadow: @x;
-moz-box-shadow: @x;
}

When I do this:
.box-shadow(0 0 2px @second-color,inset 0 0 2px @second-color);

Everything renders correctly, but when I do this:
.box-shadow(0 2px 5px rgba(0, 0, 0, 0.125), 0 2px 10px rgba(0, 0, 0, 0.25));

It drops the second attribute. I have tried it without a space after the comma too.

less.js have problems parsing the following rule, which is a valid HTML5 tag attribute:
form[data-disabled] {
color:#444;
}

readme states:

in the browser

<script src="less.js"></script>
<link rel="less" href="main.less" type="text/css">

while there's no less.js in the codebase...

on a separate, much less important note, (afair) script tag requires a type attrib ("text/javascript" is the value in this case).

I'm getting the following error in Chrome/Safari and Firefox:

Uncaught TypeError: Cannot read property '1' of null (Chrome)
TypeError: Result of expression 'href.match(/(?:^|/)([-\w]+).[a-z]+$/i)' [null] is not an object. (Safari)
href.match(/(?:^|/)([-\w]+).[a-z]+$/i) is null (Firefox)

These all relate to line 2185:
var id = 'less:' + (sheet.title || href.match(/(?:^|/)([-\w]+).[a-z]+$/i)[1]);

Hello,

I have a really basic question since I don't know how to make it work.
I download "less-1.0.3d.js" in the top of the download page.
I use your "less/colors.less" sample file (found in the test folder).

I just write this little HTML page :


<title>lessjs</title>
<script type="text/javascript" src="less-1.0.3d.js"></script>

It's really simple, but the text is still black... not styled.
Can you tell me what is missing ?
Thanks !

I've discovered an error when calling a mixing that passes an argument it receives to another mixin.

Test code:
.border-radius-bottom-left(@radius) {
border-bottom-left-radius: @radius;
-moz-border-radius-bottomleft: @radius;
-webkit-border-bottom-left-radius: @radius;
}
.border-radius-top-left(@radius) {
border-top-left-radius: @radius;
-moz-border-radius-topleft: @radius;
-webkit-border-top-left-radius: @radius;
}
.border-radius-left(@radius) {
.border-radius-top-left(@radius);
.border-radius-bottom-left(@radius);
}
div {
.border-radius-left(5px);
}

And the output of bin/lessc:
muszek@bobek:~/www/fooba/webroot/css$ ./less.sh test
node.js:167:9

Add support for css3 media queries.

http://www.w3.org/TR/css3-mediaqueries/

Not sure if this is an intentional restriction but the following doesn't seem to work

.mixin() {
    a {
        color: red;
        span { color: blue; }
    }
}
.class { .mixin; }

should output

.class a {
    color: red;
}
.class a span {
    color: blue;
}

it only works with one level of nesting, the second level is lost when you run this code in mixin.js:

return new(tree.Ruleset)(rule.selectors, rule.rules.map(function (r) {
    return new(tree.Rule)(r.name, r.value.eval(context));
}));

You could also change this area of code to allow a mixin.Call or even a mixin.Definition inside another mixin.Definition.

For example this rule fails:

body {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png');
}

The code should be self-explanatory. Input:
.mixin(@var: "world") {
correct-value: @var;
formatted: %("hello %s", @var);
}
.first-usage {
.mixin(world);
}
.second-usage {
.mixin(kitty);
}
.third-usage {
.mixin(cow);
}
Output:
muszek@bobek:~/www/fooba/webroot/css$ ./less.sh test
.first-usage {
correct-value: world;
formatted: "hello world";
}
.second-usage {
correct-value: kitty;
formatted: "hello world";
}
.third-usage {
correct-value: cow;
formatted: "hello world";
}

have a look at the following:

color: #8f8f8f / 2            // works
color: rgb(128, 128, 128) / 2 // doesn't work

here's the fix in dotless:

/dotless/dotless/commit/b5a7e205

Should support any whitespace:
http://www.w3.org/TR/CSS2/selector.html#descendant-selectors

Hi,

Not sure if the current version is "stable" or not. But according to the readme

A stable release is due sometime end of March.

Please update the readme and create a v1.0 tag when you're confident this is stable.