A little LESS puzzle

Hi people! What do you think of a little puzzle to wake up your neurons? I think I’ve found something tricky enough to worth a blog post and a little challenge about it.
First of all, this will be a LESS puzzle, so if you’re really unfamiliar with this…


This content originally appeared on Kitty Giraudel and was authored by Kitty Giraudel

Hi people! What do you think of a little puzzle to wake up your neurons? I think I’ve found something tricky enough to worth a blog post and a little challenge about it.

First of all, this will be a LESS puzzle, so if you’re really unfamiliar with this CSS preprocessor, I think you might feel a bit lost here. Sorry! :(

What are the requirements

So the main idea is to enable a Google Web Font using a variable to have only one occurrence of the font name without leaving the stylesheet. Let me explain the requirements a little better:

  1. Pick a Google font here,
  2. Click on “Quick use”, then @import, and copy the given URL to your clipboard,
  3. Open CodePen, click on “New pen” and pick LESS as a CSS preprocessor,
  4. Create a variable for the font name, like this @my-font: "NameOfMyFont";,
  5. Import the font from Google CDN with @import url() using the variable as the font name in the URL,
  6. Give any element (

    would be good) this font.

Bonus: make it work with compound font names (such as “Roboto Condensed”).

Accustomed to Sass like me will wonder where is the difficulty in this little exercise. Problem is LESS is extremely annoying when it comes to both url() and string concatenation. I partially covered the topic in this article.

/* Sass version */

$my-font: 'Merriweather';
$url: 'https://fonts.googleapis.com/css?family=#{$my-font}';

@import url($url);

h1 {
  font-family: $my-font;
}

I struggled about one hour on this and couldn’t make it work. All my respect to the one who will find the solution.

Good luck!

Conclusion (edit January 26th, 2013)

Loïc Giraudel (secondarily my dear brother) pointed out a thread on GitHub mentioning that what I called a “puzzle” is in fact a real bug reported more than a year ago.

However as of today, there is no fix for this neither is there a workaround. So unless anyone comes up with a solution, this is currently not possible unfortunately.

Plus, the people behind LESS imply fixing this bug would require a large amount of work and deep code restructuration.

No luck.


This content originally appeared on Kitty Giraudel and was authored by Kitty Giraudel


Print Share Comment Cite Upload Translate Updates
APA

Kitty Giraudel | Sciencx (2013-01-21T00:00:00+00:00) A little LESS puzzle. Retrieved from https://www.scien.cx/2013/01/21/a-little-less-puzzle-2/

MLA
" » A little LESS puzzle." Kitty Giraudel | Sciencx - Monday January 21, 2013, https://www.scien.cx/2013/01/21/a-little-less-puzzle-2/
HARVARD
Kitty Giraudel | Sciencx Monday January 21, 2013 » A little LESS puzzle., viewed ,<https://www.scien.cx/2013/01/21/a-little-less-puzzle-2/>
VANCOUVER
Kitty Giraudel | Sciencx - » A little LESS puzzle. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2013/01/21/a-little-less-puzzle-2/
CHICAGO
" » A little LESS puzzle." Kitty Giraudel | Sciencx - Accessed . https://www.scien.cx/2013/01/21/a-little-less-puzzle-2/
IEEE
" » A little LESS puzzle." Kitty Giraudel | Sciencx [Online]. Available: https://www.scien.cx/2013/01/21/a-little-less-puzzle-2/. [Accessed: ]
rf:citation
» A little LESS puzzle | Kitty Giraudel | Sciencx | https://www.scien.cx/2013/01/21/a-little-less-puzzle-2/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts