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).
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)
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)
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.
Source: (StackOverflow)
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)
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)
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)
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.
Source: (StackOverflow)
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)
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)
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)
Quick question: Is there any possibility to add LESS styles to angular.dart component? It would be great if they would run in run-time, without compilation to CSS. I'm afraid it can be quite difficult due to Shadow DOM components' structure, what do you think?
EDIT
This is what I'd like to reach in component file:
@Component(
selector: 'sample',
templateUrl: 'sample/sample_component.html',
cssUrl: 'sample/sample_component.less'
)
class SampleComponent {
Source: (StackOverflow)
I'm using the less.modifyVars() function from less.js.
In the console, I can do this:
less.modifyVars({ '@body-bg' : 'black' });
And it recompiles the less, giving a black background to the page. So that works fine.
I then try it in the code, with:
$scope.variableChange = function(selectedVariable) {
var slug = "'" + selectedVariable.slug + "'";
var value = "'" + selectedVariable.value + "'";
less.modifyVars({ slug : value });
};
Now, I can see that the less.modifyVars() function does execute, because I get notifications in the console, but it doesn't seem to pass the correct values. So I add a console.log inside the variableChange function:
console.log(slug + ":" + value);
I then get the console output:
'@body-bg':'black'
This should mean that the less.modifyVars() function is executed with:
less.modifyVars({ '@body-bg' : 'black' });
But I don't see it. What's the problem here?
Source: (StackOverflow)
I want to create a simple script that changes LESS variables and print the CSS output in a div.
this is my HTML
<input type="text" id="choose-color" onchange="ModifyColorsInLess()">
<button onclick="writeCSS()">aggiorna</button>
<div id="lesscode"></div>
This is my js
function writeCSS(){
var lessCode = '';
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
if(xmlhttp.status === 200 && xmlhttp.readyState === 4){
lessCode = xmlhttp.responseText;
new(less.Parser)().parse(lessCode, function (e, tree) {
document.getElementById('lesscode').innerHTML = tree.toCSS().replace(/\n/g,"<br>");
});
}
};
xmlhttp.open("GET","css/styles.less",true);
xmlhttp.send();
}
function ModifyColorsInLess() {
less.modifyVars(
{
'@colore-body': $("#choose-color").val()
}
);
}
The script prints CSS code correctly, but if i insert a new color value in the input type="text" and call the writeCSS function, it doesn't print my variable edit.
I think the problem is that "modifyvar" does not change the file "styles.less", so when I call the function writeCSS() does not detect changes made.
is there a way to print the css dynamically detecting changes made with modifyvar?
Source: (StackOverflow)
TLDR version:
Is there a way to cache a stateless LESS compilation result per LESS file? We have large LESS utils (e.g. from libraries) that are reused by many pages, but compiling them (in particular, the regex parsing) seems rather slow. less.Parser does produce an abstract syntax tree result, but that result doesn't seem stateless (see e.g. less.Ruleset.evalImports) so it doesn't seem suitable for caching for this purpose.
LONG VERSION:
I'm looking for some pointers about optimizing LESS server-side preprocessing at scale. We have an application built from many modules, each of which contributes some styles in the form of CSS, and also modules which provide LESS commons utilities like mixins and various variables. The application also exposes many endpoints, each of which pulls in a mixture of these dependencies.
For performance, we want to precompile and cache the styles for each endpoint, but here it collides with what seems to be LESS's fundamental design. In particular, LESS compilation feels stateful, in the sense that the same @import in different locations in different files produces different results (from a compiler-output point of view). This makes compiler caching hard, since there's no real way to make sure each LESS file is parsed once and done forever (i.e. each endpoint needs to reparse a LESS utils file for use in its own styles, and each module that wants to define its own styles also needs to do the same).
Possible approaches considered so far:
I've looked a little into caching the AST for each file during compilation (i.e. the output of less.Parser) but it seems futile, since the AST itself seems stateful (see e.g. less.Ruleset.evalImports). This is unfortunate since it seems that the parsing stage of the LESS compilation is by far the slowest portion (and can add about 20 minutes to an ~2 minute server startup time with precompilation on).
Also looked into injecting something other than an @import (reference) or the equivalent when compiling scripts. In particular, if I can convert the imports into the explicit state (set of current defined mixins/variables/etc.) from a previous compilation, I could try to inject those manually into the parsing process. Unfortunately this feels like it involves very deep hacking of less.js code, which I'd like to avoid.
Compile in the context of an endpoint (i.e. perform one giant LESS compilation for an endpoint's style dependencies). This instead bounds compilation time to (size of utils) * (# of endpoints), but doesn't help as much as it could when the number of endpoints is also very large. It also puts all the compilation into a single context, allowing for the unexpected cross-module state interactions produced by subtle ordering changes.
Topological sort everything and compile everything in one LESS compilation. This makes sure each file only needs to be traversed once, but craps all over the global namespace.
In essence, the compilation time feels bounded by (size of LESS utils) * (# of LESS compilation events). Minimizing statefulness leans toward more compilation events, but explodes compilation time. Minimizing compilation events improves performance, but sacrifices state independence.
Caching a stateless compilation result (e.g. like a precompiled header file for gcc) would break the performance barrier and achieve the optimum result, but I'm not sure how this can be done in current less.js code. Does anyone have any pointers/info in this regard?
Thanks!
Source: (StackOverflow)
I would like to simplify my LESS/CSS for linear gradient with using variables.
I tried(declaring variable):
@BWTableHoverLineMarkerColor1: rgba(69,72,77,0.27);
I tried(defining function and combined it with classes(".BWTable-hover") and selectors)
.BWTable-hover(@BWTableHoverLineMarkerColor1) > tbody > tr:hover > td,
.BWTable-hover(@BWTableHoverLineMarkerColor1) > tbody > tr:hover > th {
background: url(data:image/svg+xml;base64,PD...g==);
background: -moz-linear-gradient(top, @BWTableHoverLineMarkerColor1 0%, rgba(65,68,72,0.27) 3%, rgba(23,24,25,0.45) 33%, rgba(0,0,0,0.45) 49%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@BWTableHoverLineMarkerColor1), color-stop(3%,rgba(65,68,72,0.27)), color-stop(33%,rgba(23,24,25,0.45)), color-stop(49%,rgba(0,0,0,0.45))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, @BWTableHoverLineMarkerColor1 0%,rgba(65,68,72,0.27) 3%,rgba(23,24,25,0.45) 33%,rgba(0,0,0,0.45) 49%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, @BWTableHoverLineMarkerColor1 0%,rgba(65,68,72,0.27) 3%,rgba(23,24,25,0.45) 33%,rgba(0,0,0,0.45) 49%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, @BWTableHoverLineMarkerColor1 0%,rgba(65,68,72,0.27) 3%,rgba(23,24,25,0.45) 33%,rgba(0,0,0,0.45) 49%); /* IE10+ */
background: linear-gradient(to bottom, @BWTableHoverLineMarkerColor1 0%,rgba(65,68,72,0.27) 3%,rgba(23,24,25,0.45) 33%,rgba(0,0,0,0.45) 49%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4545484d', endColorstr='#73000000',GradientType=0 ); /* IE6-8 */
}
Result:"ParseError: Unrecognised input"
By the way is it a good way to solve this problem like that ?
Ty for helping.
Source: (StackOverflow)