having difficulties with less

Question

I'am new with LESS and i'm trying to sort things out. This is my question for example i have a less file that looks like this

style.less

.FontAttr(@f-color: red, @f-weight: bold, @f-size: 12px) {
   color: @f-color;
   font-weight: @f-weight;
   font-size: @f-size;
}

from what i know i can use this like this in style.less

.fakelinkfont {
   .FontAttr(red, bold, 14px);
}

then use .fakelinkfont like this in my actual page

<div class="fakelinkfont">Some Characters</div>

my question is can i use .FontAttr() {...} in my actual page and not in style.less or do i even doing everything correct. BTW i'm new with this so bear with me thank in advance.

Did not understand what you mean by use *`.FontAttr(){}` in my actual page*. If you mean assigning `FontAttr` as a class to an element then it is not possible. If you mean writing the whole thing within a `style` tag in your page then it is possible but not recommended as it would require client-side compilation of Less code. — Harry, Nov 02 '15 at 09:53
@Harry, what i mean by using .FontAttr(){..} in actual page is that instead of writing .fakelinkfont { .FontAttr(red, bold, 14px); } in my style.less can i write it in my actual web page and not in style.less — Sheena Salazar, Nov 02 '15 at 09:57

score 0 · Answer 1 · answered Nov 02 '15 at 13:43

You can't.

.fakelinkfont {
   .FontAttr(red, bold, 14px);
}

Gets compiled to:

.fakelinkfont {
   color: red;
   font-weight: bold;
   font-size: 14px;
}

And that is what browser uses. You can try using client side less.js file, but I wouldn't recomend to use it in production.

having difficulties with less

1 Answers1