Louys Patrice Bessette Louys Patrice Bessette - 6 months ago 22
CSS Question

LESS css variable possibilities/restrictions/syntax usage

I begun to use the LESS library exactly 2 hours ago.

( Time counted AFTER a successfull kind of a Hello World )





My LESS style sheet works.

Here is how I call it in my page:


<!-- LESS CSS -->
<link rel="stylesheet/less" type="text/css" href="myLessCssStyle.less" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.1/less.js"></script>


I made the equivalent of a Hello world on a single CSS value easy this verify:


@testDisplay: none;

#bigVisibleElement{
display: @testDisplay;
}


Success!

Happy about that, since it was almost too easy...

I started to implement this serious variable handling advantage in a small test style sheet I was working on.




And here is where i'm stucked:

/* my LESS vars definition */

@Bes_ease_in_finish: 10%;
@Bes_ease_out_begin: 80%;
@Bes_ease_out_finish: 90%;

/* A couple more lines that includes other working LESS vars... */

/* This is bugging here. On the first LESS var. */
@keyframes KeyFrame_Bes_Web {
0% { opacity: 0; animation-timing-function: ease_in; }
@Bes_ease_in_finish { opacity: 1; } /* <--- Line 75 is here. */
@Bes_ease_out_begin { opacity: 1; animation-timing-function: ease-out; }
@Bes_ease_out_finish { opacity: 0; }
100% { opacity: 0 }
}


I defined all other prefix variants of
@keyframes
(-webkit-, -moz-, -o-, -ms-).

That isn't the problem.


Here is the error I get in console:


LESS-variable-usage

┬źUnrecognised input┬╗.


Arrrg... What ?!?

Can't use a LESS vars on these animation timing ?

Why?

Or HOW?
Is there a syntax trick ?

These timing values repeat 5 times FOR EACH animation because of these sickening prefixes... And this is a really simple
@keyframes
animation (fade in / fade out timing of a couple images) that I obviously wish to get more complex in the future.

THIS is the reason why I looked for LESS library.




Take you time... I wish to have a clear explicative answer.

Or some reference links to read.

My house isn't on fire.

Answer

Try this:

@keyframes KeyFrame_Bes_Web { 
    0% { opacity: 0; animation-timing-function: ease_in; }
    @{Bes_ease_in_finish} { opacity: 1; }                      /* <--- Line 75 is here. */
    @{Bes_ease_out_begin} { opacity: 1; animation-timing-function: ease-out; }
    @{Bes_ease_out_finish} { opacity: 0; }
    100% { opacity: 0 }
}

Instead of @variable you should use @{variable} when using dynamic directives. (is directive the right word? dunno)

Comments