CODEWITHSUNDEEP
cssvariablesless
user2150463
user2150463

Reputation: 35

LessCSS : ID in front of variable

My site has a global variable for the font-size like so:

@default-fontsize : 12px;

Today I learned that my project will also be in Arabic and Chinese and the font-size in those 2 sites has to be increased by 2px. Which would result in having:

@default-fontsize : 14px;

Since I don't want to change my variable, I put an ID on the body tag and I would like to do this but it doesn't work:

#foreign-language { font-size: (@default-fontsize + 2); }

Anyone knows the solution to this?

Upvotes: 1

Views: 368

Answers (1)

ScottS
ScottS

Reputation: 72271

If I understand you correctly, you really don't want to target the id to just have its size changed, which is what your original code...

#foreign-language { font-size: (@default-fontsize + 2); }

...does, by producing css as:

#foreign-language {
  font-size: 14px;
}

I believe what you really want is to change the @default-fontsize so it propogates throughout your LESS code elsewhere. Now, you cannot do this by using an id, as the LESS is already compiled into static CSS by the time the code is looking at id's on the body element. You need to already know whether you are going to feed the browser a foreign language prepared set of CSS or not during the compile phase.

Now, you can make the code flexible so that once you know if you are modifying it or not, you tell it to change value. You can do something like this with a mixin:

.setFontSize(@addSize: 0) { 
  @default-fontsize: 12px + @addSize;
}

Then call only one of the two following, depending on which language set you are dealing with:

.setFontSize(); //do this normally
.setFontSize(2); //do this to increase it for those you need to

Then use the variable where you need it:

body {
  font-size: @default-fontsize;
}

Again, this is not something that can be done "on the fly" with LESS based off whether the body has a foreign-language id on it. Instead, you need to tell the LESS to compile differently if you know you are dealing with the foreign language. You could set up a global variable like:

@addFontSize: 0; //change to 2 when dealing with a foreign language

And then just have a single call to the mixin like so:

.setFontSize(@addFontSize); //will change based off your global variable setting

Upvotes: 1

Related Questions