smallseo.info

less.js

Leaner CSS Getting started | Less.js less extends css with dynamic behavior such as variables, mixins, operations and functions. less runs on both the server-side (with node.js and rhino) or client-side (modern browsers only).

Less.js classes underlined as unknown in Visual Studio 2013

I'm just starting with less.js. The classes I add to my .less files are underlined as unknown in visual studio 2013, but work fine. I would like VS to recognize these to allow navigation into the selected class.

enter image description here


Source: (StackOverflow)

Need to loop through set of variables

Need to put @color-1, @color-2, @color-3,.. on the place of @color-@{i} in loop. What should i put instead?

@color-0: rgb(200, 20, 20);
@color-1: ...;
@color-2: ...;
// ...

.generate-headers(5);

.generate-headers( @n, @i: 0 ) when ( @i =< @n ) {
  .widget-header-@{i} {
    width: (@i * 100% / @n);
    background-color: @color-@{i};
    color: overlay( @color-@{i}, @white );
  }
  .generate-headers(@n, (@i + 1));
}

Source: (StackOverflow)

Running Less.js for windows with Clean-Css enabled get "object has no method 'install' error

i am using the following git:less.js-windows. i've installed clean-css with the following command:

npm install -g less-plugin-clean-css

now i am trying to run lessc with this:

lessc -clean-css main.less main.css

and i get the following error:

TypeError: Object # has no method 'install' at PluginManager.addPlugin (C:\Users\oscar.polo\Downloads\less.js-windows-v2.1.1\bin\node_modules\less\lib\less\plugin-manager.js:28:12) at PluginManager.addPlugins (C:\Users\oscar.polo\Downloads\less.js-windows-v2.1.1\bin\node_modules\less\lib\less\plugin-manager.js:18:18) at Object.render (C:\Users\oscar.polo\Downloads\less.js-windows-v2.1.1\bin\node_modules\less\lib\less\render.js:31:27) at C:\Users\oscar.polo\Downloads\less.js-windows-v2.1.1\bin\node_modules\less\lib\less\render.js:18:24 at doResolve (C:\Users\oscar.polo\Downloads\less.js-windows-v2.1.1\bin\node_modules\promise\lib\core.js:91:5) at new Promise (C:\Users\oscar.polo\Downloads\less.js-windows-v2.1.1\bin\node_modules\promise\lib\core.js:71:3) at Object.render (C:\Users\oscar.polo\Downloads\less.js-windows-v2.1.1\bin\node_modules\less\lib\less\render.js:17:20) at parseLessFile (C:\Users\oscar.polo\Downloads\less.js-windows-v2.1.1\bin\node_modules\less\bin\lessc:381:10) at evalmachine.:266:14 at C:\Users\oscar.polo\Downloads\less.js-windows-v2.1.1\bin\node_modules\graceful-fs\graceful-fs.js:102:5

any ideas whats wrong?


Source: (StackOverflow)

what is the less.js complete event callback?

I'm building a simple web application that needs to compile a LESS file into CSS file on the fly. I want to call few javascript functions after less.js complete the render of style.less file. Searched following code in a thread but nothing working for me.

<link rel="stylesheet/less" type="text/css" rel='nofollow' href="less/style.less">
<script type="text/javascript" src="js/less.min.js"></script>
<script>
less.hasFinished.then(
    function() {
        console.log('completed');
    }
);
</script>

Also tried few other things:

<link rel="stylesheet/less" type="text/css" rel='nofollow' href="less/style.less">
<script type="text/javascript" src="js/less.min.js"></script>
<script>
less = {
    postProcessor: function(css) {
        console.log('complete');
    }
};
</script>

Is there any less.onComplete() callback function or something similar??


Source: (StackOverflow)

less.modifyVars not updating LESS variable

My project has a requirement to have a user-editable theme. Meaning the users should have the ability to change the different colors used in the application.

I've imported less.js (version 1.7.0) into my project and I've successfully called the less.modifyVars() function from my javascript but for some reason my less file isn't getting updated.

My stylesheet is dynamically compiled by grunt. This is the code in head of the HTML:

<link rel="stylesheet/less" type="text/css" rel='nofollow' href="/static/<%= grunt.config.get('pkg.name') %>.css"/>

And I've included the less.js script after that.

I then have this line of code just to modify a specific variable:

less.modifyVars({ '@mainColor': '#CCC' });

And I know it's being successfully called because I can see these in my browser console:

less: parsed http://localhost:3000/static/app.css successfully. less-1.7.0.js:7297
less: css for http://localhost:3000/static/app.css generated in 181ms less-1.7.0.js:7297
less: less has finished. css generated in 182ms

But the problem is when I inspect the supposedly updated CSS file, the different properties that use the variable @mainColor have not been updated with the new color.

Even when running the command in the browser console does not update anything in the CSS.

I've looked everywhere and I don't know what else to do. Any other ideas on what I could be doing wrong or what I can do to make this work?


Source: (StackOverflow)

Gulp.js - Use path from gulp.src() in gulp.dest()

Trying to create a gulp task that will pipe a bunch of files from different folders through LESS and then output them to a folder based on the original source. Consider this folder structure:

Project
+-- /Module_A
|   +- /less
|   |  +- a.less
|   +- a.css
|
+-- /Module_B
    +- /less
    |  +- b.less
    +- b.css

Here's my gulpfile:

var gulp = require('gulp');
var gutil = require('gulp-util');
var less = require('gulp-less');

gulp.task('compileLess', function () {
  gulp.src('./*/less/*.less')
    .pipe(less())
    .pipe(gulp.dest( ??? ));
});

gulp.task('default', ['compileLess']);

I know gulp.dest() expects a path to be passed in but in my example the path will be different based on the source file. So how can I grab the path from source, modify it and then pass it into gulp.dest()?

Or am I going about this the wrong way?


Source: (StackOverflow)

LESS get variables in javascript or c#

How can I get Variables list and their values from external "Variables.less" file in Javascript or C#?

HTML:

<link rel='nofollow' href="https://www.domain.com/Variables.less" rel="stylesheet/less" type="text/css"> 

variables.less file:

...
@body-bg : #fff; 
...

how to get the value for "@body-bg" (#fff) in Javascript (less.js) or if not possible in C# ?


Source: (StackOverflow)

Dynamic css using dotless

I am new to less.js .I want to use it for dynamic css for compiling it on server side am using dotless. Issue is i want to change the variable from the server side which is coming from the database for example i have a header its color property is changed by the variable name called @foo is it possible that i can change the @foo from server side. Assign the value that is store in data base

#header {
  color: @foo;
}

if yes than please help me that how it is possible. Thanks in Advance


Source: (StackOverflow)

LESS css doesn't read from the browser

I'm working with a Joomla website, is not the first time that I use the LESS css, but this time I don't know why this is not working. I've downloaded the last less.js from the website and I insert this before the end of tag HEAD, I call the css before the js, like this:

<link rel="stylesheet" rel='nofollow' href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/main.css" type="text/css" />
<link rel="stylesheet/less" rel='nofollow' href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/css/style.less" type="text/css" />
<link rel="stylesheet" rel='nofollow' href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/css/templateskit.css" type="text/css" />
<script type="text/javascript" src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/js/less-1.5.0.min.js"></script>

If I check in the code of my website I see that the path is correct and I can see the code correctly, but the browser don't read the less css and I don't know why!

Thank you for the help!

---- I've find the problem and so I resolve oit! If other people can have this problem, in my case was the box-shadow property present in my less css that was gave me this problem!

Thank you!


Source: (StackOverflow)

Node.js and WinLess are not showing error messages, Do i need to put Less.js In Developer mode?

I have downloaded and installed node.js and less.js using npm but when i compile my less files, using node.js command line (Using the following Command)

lessc -x style.less ../css/style.css

less.js does not report any errors, it returns successful but, my css file remains unchanged, and the date modified does not change.

I do however get it to compile when i remove an imported file ( My fonts file) . My best guess at the moment is that i need to put less in Development mode to show errors, but im not sure how to do that through node.js.

Another note, i have been using WinLess, and it too stopped reporting errors and ceased to compile css files for no apparent reason. WinLess actually gives me a successful popup but, the same unmodified css file issue occurs.

EDIT: I have boiled down the issue to one line, when i remove this line, it compiles successfully. But why will lessc not show me the error for this line?

@import url("//5555.5555.55555/5555/5555"); // URL info changed for security reasons.

Source: (StackOverflow)

Less complaining about @brand-success is undefined, even though it is in variables.less

When trying to compile less, I am getting a missing NameError: variable @brand-success is undefined in app/static/css/less/style.less on line 131, column 15:. However, it is app/bower_components/bootstrap/less/variables.less which is imported by 'app/bower_components/bootstrap/less/bootstrap.less'.

When using grunt-contrib-less and compiling, it is showing:

Running "less:files" (less) task
File app/static/css/icons.css created: 0 B â 175 B
File app/static/css/main.css created: 0 B â 152.44 kB
File app/static/css/modal-large.css created: 0 B â 1.29 kB
>> NameError: variable @brand-success is undefined in app/static/css/less/style.less on line 131, column 15:
>> 130     .circle-green {
>> 131       .circle(@brand-success);
>> 132     }
Warning: Error compiling app/static/css/less/style.less Use --force to continue.

I verified it is pulling 'app/bower_components/bootstrap/less/bootstrap.less' because I have:

one@node ~/github/lbs/lbs/app/static/css/less $ cat vendor.less 
@import 'app/bower_components/bootstrap/less/bootstrap.less';
@import 'app/bower_components/font-awesome/less/font-awesome.less';
one@node ~/github/lbs/lbs/app/static/css/less $ 

And if I change the path on purpose to be wrong it will complain. So, I know it is picking up bootstrap.less.

Anyone know what is causing this?

Here is some more info:

one@node ~/github/lbs/lbs/app/static/css/less $ cat main.less 
// Main less file for your application.
// Use `@import` to use other less files
// relative to 'app/css' or 'vendor/css'.
@import 'vendor';
@import 'modal-large';
@import 'icons';
@import 'style'

one@node ~/github/lbs/lbs $ !grep
grep -il brand-success -R *
app/bower_components/bootstrap/dist/css/bootstrap.css.map
app/bower_components/bootstrap/less/variables.less
app/static/css/less/style.less
one@node ~/github/lbs/lbs $ 

Source: (StackOverflow)

Chrome source tab shows .less files which are not in my solution

I'm trying to use less.js and after installing it I see some extra .less files (e.g. alert.less, badges.less etc) which are not on my hard drive and are conflicting with my css styles. Where are they coming from ? I would like to use less but keeping my css intact.

enter image description here


Source: (StackOverflow)

Change CSS values with live preview. Less.js?

I want to make a page in an Admin CP where you can customize the values of some CSS properties, e.g. background-colors. This should have a live preview like e.g. in Wordpress, but I don't know how.

I'm using LESS for the styles, so I thought about using Less.js and

less.modifyVars()

It works, but the problem is, it takes about one second to show the change in the page, since the less file is not small, because I also import Bootstrap.

Any other idea how to do something like this?


Source: (StackOverflow)

less.js: Cannot read property 'lineNumber' of undefined

When setting dumpLineNumbers: "comments" using less.js, I'm getting a error that reads

Cannot read property 'lineNumber' of undefined in test.less

Here is my code:

    <script type="text/javascript">
        less = {
            env: "development",
            dumpLineNumbers: "comments"
        };
    </script>
    <link rel="stylesheet/less" type="text/css" media="all" 
          rel='nofollow' href="test.less" />
    <script  
     src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.0/less.js">     
    </script>

I've tried this with less.js versions 1.7.5 and versions 2.5.0, with the same results. I'm iterating on the less code to see what part it's crashing on, but I was wondering if anyone else had hit this problem?


Source: (StackOverflow)

While printing existing styling should not apply

i have a html table that is having the class which defines some styling properties

    .table-bordered {
        -moz-border-bottom-colors: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
        -moz-border-top-colors: none;
        border-collapse: separate;
        border-color: #DDDDDD #DDDDDD #DDDDDD -moz-use-text-color;
        border-image: none;
        border-radius: 3px 3px 3px 3px;
        border-style: solid solid solid none;
        border-width: 1px 1px 1px 0;
    } 

while printing this table this styling should not apply. instead only the following styling should apply. now its mixing the both.

      @media print {
        table#addressbook {
            border: solid #000 !important;
            border-width: 1px 0 0 1px !important;
        }
        table#addressbook th,table#addressbook td {
            border: solid #000 !important;
            border-width: 0 1px 1px 0 !important;
        }
    }

I am using Less.js to create CSS . how can i do it easiest way?


Source: (StackOverflow)