Sharing of problems encountered when nested calls to less functions

Import base.less into a.less
The code in a.less

.animate-ripple-ink{.animation(ripple .5s linear;{
100%{
opacity: 0;.transform(scale(2.5));}});
}

The code in base.less

.animation(@value;@content){-webkit-animation: @value;-moz-animation: @value;-o-animation: @value;-ms-animation: @value;animation: @value;.keyframes(~`"@{value}".split(/,\s+/)[0].replace("[","")`,@content);
}

The value of @value is [ripple, .5s, linear]
"@{value}" becomes the string "[ripple, .5s, linear]" to avoid js parsing errors.
~Avoid compilation, if not added, the output will be "ripple"
Tips:

.animate-ripple-ink{.animation(ripple .5s linear;{
100%{
opacity: 0;.transform(scale(2.5));}});

One less},less No error was reported, but .animation with a parameter was called! I think this is a bug.

The above is the detailed content of Sharing of problems encountered when nested calls to less functions. For more information, please follow other related articles on the PHP Chinese website!