由于 的性质LESS
,一个语法较少的编译器CSS
,我认为它无法完成,LESS
不与网页及其元素交互,它只是编译里面的代码file.less
并将其嵌入到网页中。
在 LESS 主页中有一个用法部分,其中显示您可以添加 javascript 函数,但我认为它是用于less vars manipulation
,而不是从页面获取元素数据,也许您可以在那里尝试一下。
<script type="text/javascript">
less = {
env: "development", // or "production"
async: false, // load imports async
fileAsync: false, // load imports async when in a page under
// a file protocol
poll: 1000, // when in watch mode, time in ms between polls
functions: {}, // user functions, keyed by name
dumpLineNumbers: "comments", // or "mediaQuery" or "all"
relativeUrls: false,// whether to adjust url's to be relative
// if false, url's are already relative to the
// entry less file
rootpath: ":/a.com/"// a path to add on to the start of every url
//resource
};
</script>
<script src="less.js" type="text/javascript"></script>
还有一个LESS 函数参考指南,您可以在其中看到它们仅用于数据操作,例如file.less
.
escape(@string); // URL encodes a string
e(@string); // escape string content
%(@string, values...); // formats a string
unit(@dimension, [@unit: ""]); // remove or change the unit of a dimension
color(@string); // parses a string to a color
data-uri([mimetype,] url); // * inlines a resource and falls back to url()
ceil(@number); // rounds up to an integer
floor(@number); // rounds down to an integer
percentage(@number); // converts to a %, e.g. 0.5 -> 50%
round(number, [places: 0]); // rounds a number to a number of places
sqrt(number); // * calculates square root of a number
abs(number); // * absolute value of a number
sin(number); // * sine function
asin(number); // * arcsine - inverse of sine function
cos(number); // * cosine function
acos(number); // * arccosine - inverse of cosine function
tan(number); // * tangent function
atan(number); // * arctangent - inverse of tangent function
pi(); // * returns pi
pow(@base, @exponent); // * first argument raised to the power of the second argument
mod(number, number); // * first argument modulus second argument
convert(number, units); // * converts between number types
unit(number, units); // *changes number units without converting it
color(string); // converts string or escaped value into color
rgb(@r, @g, @b); // converts to a color
rgba(@r, @g, @b, @a); // converts to a color
argb(@color); // creates a #AARRGGBB
hsl(@hue, @saturation, @lightness); // creates a color
hsla(@hue, @saturation, @lightness, @alpha); // creates a color
hsv(@hue, @saturation, @value); // creates a color
hsva(@hue, @saturation, @value, @alpha); // creates a color
hue(@color); // returns the `hue` channel of @color in the HSL space
saturation(@color); // returns the `saturation` channel of @color in the HSL space
lightness(@color); // returns the 'lightness' channel of @color in the HSL space
hsvhue(@color); // * returns the `hue` channel of @color in the HSV space
hsvsaturation(@color); // * returns the `saturation` channel of @color in the HSV space
hsvvalue(@color); // * returns the 'value' channel of @color in the HSV space
red(@color); // returns the 'red' channel of @color
green(@color); // returns the 'green' channel of @color
blue(@color); // returns the 'blue' channel of @color
alpha(@color); // returns the 'alpha' channel of @color
luma(@color); // returns the 'luma' value (perceptual brightness) of @color
saturate(@color, 10%); // return a color 10% points *more* saturated
desaturate(@color, 10%); // return a color 10% points *less* saturated
lighten(@color, 10%); // return a color 10% points *lighter*
darken(@color, 10%); // return a color 10% points *darker*
fadein(@color, 10%); // return a color 10% points *less* transparent
fadeout(@color, 10%); // return a color 10% points *more* transparent
fade(@color, 50%); // return @color with 50% transparency
spin(@color, 10); // return a color with a 10 degree larger in hue
mix(@color1, @color2, [@weight: 50%]); // return a mix of @color1 and @color2
greyscale(@color); // returns a grey, 100% desaturated color
contrast(@color1, [@darkcolor: black], [@lightcolor: white], [@threshold: 43%]);
// return @darkcolor if @color1 is > 43% luma
// otherwise return @lightcolor, see notes
这些功能仅在 1.4.0 beta 中可用
multiply(@color1, @color2);
screen(@color1, @color2);
overlay(@color1, @color2);
softlight(@color1, @color2);
hardlight(@color1, @color2);
difference(@color1, @color2);
exclusion(@color1, @color2);
average(@color1, @color2);
negation(@color1, @color2);