How to change an element within a less file?
@fundo:#fff; //como alterar isso, externamente com javascript
@texto:rgb(94, 135, 176); //preciso mudar essa propriedade dinamicamente.
.wrapper{
background-color:@fundo;
}
nav a:hover{
color:darken(@fundo, 30%);
}
nav a{
color:darken(@fundo, 20%);
}
.active>a, .well, .active:after, .navbar-toggle{
color:@texto;
}
.well{
background-color:darken(@fundo, 5%);
border-color:darken(@fundo, 10%);
}
4 answers
If your less stylesheet is being processed in the browser (and not sent as server CSS) you can instead change the variables at runtime. The file will not be uploaded again, but it will be recompiled.
Your less stylesheet should be loading in the browser, so you should have something like:
<link rel="stylesheet/less" type="text/css" href="estilo.less" />
After loading the stylesheet, you must load the less.js:
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.6.3/less.min.js"></script>
(you can also download from https://github.com/less )
With this you can use the global object less which allows you to get various information from the stylesheet, and change variables. This object and its components are not very well documented, but you can discover a lot via introspection in the JavaScript console.
One of the documented features is changing variables, which you can perform through the function modifyVars() which receives a map of variables that should be changed:
less.modifyVars({
'@fundo': '#eee',
'@texto': 'rgb(255, 135, 176)'
});
See more about this here
There is much more that can be done with less in the browser, but much is not documented, so it may change in the future. You can extract data from a less stylesheet that is in your domain (whether or not it is being used on your page) with less.Parser, which you can create like this:
var parser = new(less.Parser);
And then process using parse():
parser.parse("@v1: 5pt; @v2: 10pt; h1 {font-size: @v1}", function (e, tree) { ... });
For example, the script below extracts all variables of folha-de-estilo.less and list them within a block <ul id="varlist"></id> that you have on the page.
$( document ).ready(function() {
var parser = new(less.Parser);
$.get( "/styles/less/folha-de-estilo.less", function( data ) {
parser.parse(data, function (e, tree) {
var variables = tree.variables();
console.log(variables)
for (i in variables) {
var name = variables[i].name;
var value = variables[i].value.toCSS(); // FALHA se variavel contiver expressao
$("#varlist").append("<li>"+name + ":" + value+"</li>");
}
});
});
});
Only works for less variables that have CSS values inside (can't have expressions). This can be useful for leveraging values used in scripts.
You cannot change a LESS variable with JavaScript. Before being interpreted by the browser, LESS is compiled as CSS (which does not support variables), and references to the variable are replaced by the respective value.
What You can do by js is change the values one by one.
You can also try to create a mixin to accomplish what you need. If it is color palette issues I advise you to use the functions of LESS itself.
As @bfavaretto said, there is no way to change the less variable using js, but having a little work you can change the properties to static values that would be, for example, through a function:
function alteraTema(fundo,texto){
$('.wrapper').css('background-color',fundo);
$('nav a:hover').css('color',texto);
$('nav a').css('color',texto);
$('.active a, .well, .active:after, .navbar-toggle').css('color', texto);
$('.well').css({
'background-color':fundo
,'border-color':fundo
});
}
And you can simply use alteraTema('#fff','#ccc'); for example and would be changing your theme as desired.