1

The project I am currently working on requires implementing an accessibility feature for variable font size in our application. We currently use less css, and I am trying to figure out what is the best way to accomplish increasing or decreasing the font sized based on what setting the user has chosen. Unlike the more common use-case, the font-size does not vary based on screen width, so I have to figure out some way to set the font-size such as perhaps a media query for a cookie or URL parameter?

Here is an example of the strategy I envision, but I cannot figure out what kind of media query I would need:

@smallFont: ~"(???)"; //What do I do here?
@medFont: ~"(???)";
@largeFont: ~"(???)";

@media @smallFont{
    @var-font-size:        0px;
}
@media @medFont{
    @var-font-size:        2px;
}

@media @largeFont{
    @var-font-size:        4px;
}

@font-size-xsmall:         14 + @var-font-size;
@font-size-smaller:        16 + @var-font-size;
@font-size-small:          18 + @var-font-size; 
@font-size-medium:         20 + @var-font-size;
Joshua Dannemann
  • 2,003
  • 1
  • 14
  • 34
  • Not a duplicate. Please read the question again. I cannot rely upon screen size because the screen size remains the same. I need to somehow key off a setting. – Joshua Dannemann Oct 19 '16 at 00:30
  • Well, if you read answers the linked Q you'll find that variable inside *any* media won't have any effect on the code outside of the said media block. So no `???` in you snippet is going to ever work (not counting that of course there's no media queries for cookies or URLs). So what you need in the first place is to forget about `@media` and look for an entities you can set that are acessible from CSS and Less (not also forgetting that Less is supposed to be compiled a while before the page to be viewed in a browser). – seven-phases-max Oct 19 '16 at 08:38
  • In other words it's a duplicate not really because of the 100% identical Q but because of 100% identical A. (Though you if reword your Q to more explicitly expose your goal e.g. "how do I switch between *different* CSS styles?" it should be fine. Except that there're also zillion Qs like that already). – seven-phases-max Oct 19 '16 at 08:44
  • Ah, thank you Seven. Different question, but duplicate answer makes sense. I will close this question. Anyway, I was hoping that there is a way to do something like this using less, but it looks like I will have to research a different solution. – Joshua Dannemann Oct 19 '16 at 15:51

1 Answers1

-1

add values to the variables, for example

@smallFont: 8pt;
@medFont: 16pt;
@largeFont: 24pt;
Abood
  • 572
  • 1
  • 5
  • 13