精华内容
下载资源
问答
  • LESS CSS 函数手册

    千次阅读 2013-11-24 23:56:02
    它可用于输出一些不合法的CSS语法,或者是使用LESS不能识别的属性。 参数: 字符串:需要转义的字符串 返回值:字符串的内容,不含引号 例如: filter :e( "ms:alwaysHasItsOwnSyntax.For.Stuff()...

    索引

    • escape(@string); // 通过 URL-encoding 编码字符串
    • e(@string); // 对字符串转义
    • %(@string, values...); // 格式化字符串
    • unit(@dimension, [@unit: ""]); // 移除或替换属性值的单位
    • color(@string); // 将字符串解析为颜色值
    • data-uri([mimetype,] url); // * 将资源内嵌到css中,可能回退到url()
    • ceil(@number); // 向上取整
    • floor(@number); // 向下取整
    • percentage(@number); // 将数字转换为百分比,例如 0.5 -> 50%
    • round(number, [places: 0]); // 四舍五入取整
    • sqrt(number); // * 计算数字的平方根
    • abs(number); // * 数字的绝对值
    • sin(number); // * sin函数
    • asin(number); // * arcsin函数
    • cos(number); // * cos函数
    • acos(number); // * arccos函数
    • tan(number); // * tan函数
    • atan(number); // * arctan函数
    • pi(); // * 返回PI
    • pow(@base, @exponent); // * 返回@base的@exponent次方
    • mod(number, number); // * 第一个参数对第二个参数取余
    • convert(number, units); // * 在数字之间转换
    • unit(number, units); // * 不转换的情况下替换数字的单位
    • color(string); // 将字符串或者转义后的值转换成颜色
    • rgb(@r, @g, @b); // 转换为颜色值
    • rgba(@r, @g, @b, @a); // 转换为颜色值
    • argb(@color); // 创建 #AARRGGBB 格式的颜色值
    • hsl(@hue, @saturation, @lightness); // 创建颜色值
    • hsla(@hue, @saturation, @lightness, @alpha); // 创建颜色值
    • hsv(@hue, @saturation, @value); // 创建颜色值
    • hsva(@hue, @saturation, @value, @alpha); // 创建颜色值
    • hue(@color); // 从颜色值中提取 hue 值(色相)
    • saturation(@color); // 从颜色值中提取 saturation 值(饱和度)
    • lightness(@color); // 从颜色值中提取 'lightness' 值(亮度)
    • hsvhue(@color); // * 从颜色中提取 hue 值,以HSV色彩空间表示(色相)
    • hsvsaturation(@color); // * 从颜色中提取 saturation 值,以HSV色彩空间表示(饱和度)
    • hsvvalue(@color); // * 从颜色中提取 value 值,以HSV色彩空间表示(色调)
    • red(@color); // 从颜色值中提取 'red' 值(红色)
    • green(@color); // 从颜色值中提取 'green' 值(绿色)
    • blue(@color); // 从颜色值中提取 'blue' 值(蓝色)
    • alpha(@color); // 从颜色值中提取 'alpha' 值(透明度)
    • luma(@color); // 从颜色值中提取 'luma' 值(亮度的百分比表示法)
    • saturate(@color, 10%); // 饱和度增加 10%
    • desaturate(@color, 10%); // 饱和度降低 10%
    • lighten(@color, 10%); // 亮度增加 10%
    • darken(@color, 10%); // 亮度降低 10%
    • fadein(@color, 10%); // 透明度增加 10%
    • fadeout(@color, 10%); // 透明度降低 10%
    • fade(@color, 50%); // 设定透明度为 50%
    • spin(@color, 10); // 色相值增加 10
    • mix(@color1, @color2, [@weight: 50%]); // 混合两种颜色
    • greyscale(@color); // 完全移除饱和度,输出灰色
    • contrast(@color1, [@darkcolor: black], [@lightcolor: white], [@threshold: 43%]); // 如果 @color1 的 luma 值 > 43% 输出 @darkcolor,否则输出 @lightcolor
    • 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);
    • iscolor(@colorOrAnything); // 判断一个值是否是颜色
    • isnumber(@numberOrAnything); // 判断一个值是否是数字(可含单位)
    • isstring(@stringOrAnything); // 判断一个值是否是字符串
    • iskeyword(@keywordOrAnything); // 判断一个值是否是关键字
    • isurl(@urlOrAnything); // 判断一个值是否是url
    • ispixel(@pixelOrAnything); // 判断一个值是否是以px为单位的数值
    • ispercentage(@percentageOrAnything); // 判断一个值是否是百分数
    • isem(@emOrAnything); // 判断一个值是否是以em为单位的数值
    • isunit(@numberOrAnything, "rem"); // * 判断一个值是否是指定单位的数值

    含*号的函数只在1.4.0 beta以上版本中可用

    函数解析

    字符串函数 (String functions)

    escape(@string)

    使用URL-encoding的方式编码字符串。

    以下字符不会被编码:, / / / ? / @ / & / + / ' / ~ / ! / $

    最常见的被编码的字符串包括: / # / ^ / ( / ) / { / } / | / : / > / < / ; / ] / [ / =

    参数:

    • 字符串:需要转义的字符串

    返回值:字符串 (string)

    例如:

    escape('a=1')
    

    输出:

    a%3D1
    

    注意:如果参数不是字符串的话,函数行为是不可预知的。目前传入颜色值的话会返回undefined,其它的值会原样返回。写代码时不应该依赖这个特性,而且这个特性在未来有可能改变。

    e

    用于对CSS的转义,与~"value"类似。它接受一个字符串作为参数,并原样返回内容(不含引号)。它可用于输出一些不合法的CSS语法,或者是使用LESS不能识别的属性。

    参数:

    • 字符串:需要转义的字符串

    返回值:字符串的内容,不含引号

    例如:

    filter:e("ms:alwaysHasItsOwnSyntax.For.Stuff()");
    

    输出:

    filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
    

    注意:也接受经~""转义的值或者是数字作为参数。其它的值将产生错误。

    %

    %("format", arguments ...)将会格式化字符串。第一个参数是一个包含占位符的字符串。占位符以百分号%开头,后面接字母s / S / d / D / a / A。后续的参数用于替换这些占位符。如果你需要输出百分号,可以多用一个百分号来转义%%

    使用大写的占位符可以将特殊字符按照UTF-8进行转义,函数将会对所有的特殊字符进行转义,除了( / ) / ' / ~ /!。空格会被转义为%20。小写的占位符将原样保持特殊字符,不进行转义。

    占位符说明:d / D / a / A 可以被任意类型的参数替换(颜色、数字、转义的字符串、表达式等)。如果将它们和字符串一起使用,则整个字符串都会被使用,包含引号。但是,引号将会原样放在字符串中,不会被转义。s / S 可以被除了颜色的之外的任何类型参数替换。如果你将它们和字符串一起使用,则只有字符串的值会被使用,引号会被忽略。

    参数:

    • 字符串:带有占位符的格式化字符串
    • 任意值:用于替换占位符的值

    返回值:格式化后的字符串

    例如:

    • 使用a/d格式化:%("repetitions: %a file: %d", 1 + 2, "directory/file.less");
    • 使用大写的a/d格式化:%('repetitions: %A file: %D', 1 + 2, "directory/file.less");
    • 使用s格式化:%("repetitions: %s file: %s", 1 + 2, "directory/file.less");
    • 使用大写s格式化:%('repetitions: %S file: %S', 1 + 2, "directory/file.less");

    分别输出如下:

    • 使用a/d格式化:"repetitions: 3 file: "directory/file.less"";
    • 使用大写的a/d格式化:"repetitions: 3 file: %22directory%2Ffile.less%22";
    • 使用s格式化:"repetitions: 3 file: directory/file.less";
    • 使用大写s格式化:"repetitions: 3 file: directory%2Ffile.less";

    综合类函数 (Misc functions)

    color(@string)

    解析颜色,将代表颜色的字符串转换为颜色值,参数必须是16进制表示的颜色或者缩写写法。

    参数:

    • @字符串:代表颜色值的字符串

    例如:

    color("#445566")
    color(~"#123")
    

    输出:

    #445566
    #112233
    

    unit

    移除或替换属性值 (dimension) 的单位。

    参数:

    • @dimension: 数字,带或不带单位
    • @unit: 可选,将要替换成的单位,如果省略则移除原单位

    例如:

    unit(5, px)
    

    输出:

    5px
    

    例如:

    unit(5em)
    

    输出:

    5
    

    data-uri

    将一个资源使用BASE64编码嵌入到样式文件,如果开启了ieCompat选项,而且资源文件的体积过大或者是在浏览器中使用,则会使用url()进行回退。如果没有指定MIME,则Node.js会使用MIME包来决定正确的MIME。

    参数:

    • mimetype: MIME字符串,可选参数
    • url: 需要内嵌的文件的url

    例如:

    data-uri('../data/image.jpg');
    

    输出:

    url('data:image/jpeg;base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg==');
    

    在浏览器中会输出:

    url('../data/image.jpg');
    

    例如:

    data-uri('image/jpeg;base64', '../data/image.jpg');
    

    会输出:

    url('data:image/jpeg;base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg==');
    

    算数函数 (Math functions)

    ceil

    向上取整。

    参数:

    • 数字:浮点数

    返回值:向上取整后的整数

    例如:

    ceil(2.4)
    

    输出:

    3
    

    floor

    向下取整。

    参数:

    • 数字:浮点数
    • 返回值:向下取整后的整数

    例如:

    floor(2.6)
    

    输出:

    2
    

    percentage

    将浮点数转换为百分比字符串。

    参数:

    • 数字:浮点数

    返回值:字符串

    例如:

    percentage(0.5)
    

    输出:

    50%
    

    round(number, [places: 0])

    四舍五入取整。

    参数:

    • 数字:浮点数
    • 小数位数:数字,可选,四舍五入取整的小数点位置,默认值为0。

    返回值:数字 (number)

    例如:

    round(1.67)
    

    输出:

    2
    

    例如:

    round(1.67, 1)
    

    输出:

    1.7
    

    sqrt

    计算一个数的平方根,原样保持单位。

    参数:

    • 数字:浮点数

    返回值:数字,平方根

    例如:

    sqrt(25cm)
    

    输出:

    5cm
    

    例如:

    sqrt(18.6%)
    

    输出:

    4.312771730569565%;
    

    abs

    计算数字的绝对值,原样保持单位。

    参数:

    • 数字:浮点数

    返回值:数字,绝对值

    例如:

    abs(25cm)
    

    输出:

    25cm
    

    例如:

    abs(-18.6%)
    

    输出:

    18.6%
    

    sin

    正弦函数,处理时会将没有单位的数字认为是弧度值。

    参数:

    • 数字:浮点数,角度
    • 返回值:数字,角度对应的正弦值

    例如:

    sin(1); // 1弧度角的正弦值
    sin(1deg); // 1角度角的正弦值
    sin(1grad); // 1百分度角的正弦值
    

    分别输出:

    0.8414709848078965;
    0.01745240643728351;
    0.015707317311820675;
    

    百分度是将一个圆周分为400份,每份为一个百分度,英文gradian,简写grad。见http://zh.wikipedia.org/zh/%E7%99%BE%E5%88%86%E5%BA%A6

    asin

    反正弦函数,返回以弧度为单位的角度,区间在 -PI/2 到 PI/2之间。

    参数:

    • 数字:浮点数,代表正弦值,范围为 [-1,1]
    • 返回值:数字,角度

    例如:

    asin(-0.8414709848078965)
    asin(0)
    asin(2)
    

    分别输出:

    -1rad
    0rad
    NaNrad
    

    有关反三角函数的知识可以参见http://zh.wikipedia.org/zh/%E5%8F%8D%E4%B8%89%E8%A7%92%E5%87%BD%E6%95%B0,下同。

    cos

    余弦函数,处理时会将没有单位的数字认为是弧度值。

    参数:

    • 数字:浮点数,角度
    • 返回值:数字,角度对应的余弦值

    例如:

    cos(1); // 1弧度角的余弦值
    cos(1deg); // 1角度角的余弦值
    cos(1grad); // 1百分度角的余弦值
    

    分别输出:

    0.5403023058681398
    0.9998476951563913
    0.9998766324816606
    

    acos

    反余弦函数,返回以弧度为单位的角度,区间在 0 到 PI之间。

    参数:

    • 数字:浮点数,代表余弦值,范围为 [-1,1]
    • 返回值:数字,角度

    例如:

    acos(0.5403023058681398)
    acos(1) 
    acos(2)
    

    分别输出:

    1rad
    0rad
    NaNrad
    

    tan

    正切函数,处理时会将没有单位的数字认为是弧度值。

    参数:

    • 数字:浮点数,角度
    • 返回值:数字,角度对应的正切值

    例如:

    sin(1); // 1弧度角的正切值
    sin(1deg); // 1角度角的正切值
    sin(1grad); // 1百分度角的正切值
    

    分别输出:

    1.5574077246549023
    0.017455064928217585
    0.015709255323664916
    

    atan

    反正切函数,返回以弧度为单位的角度,区间在 -PI/2 到 PI/2之间。

    参数:

    • 数字:浮点数,代表正切值
    • 返回值:数字,角度

    例如:

    atan(-1.5574077246549023)
    atan(0)
    round(atan(22), 6) // 四舍五入输出6位小数
    

    分别输出:

    -1rad
    0rad
    1.525373rad;
    

    pi

    返回圆周率PI。

    参数:无

    返回值:数字,圆周率

    例如:

    pi()
    

    输出:

    3.141592653589793
    

    pow

    假设第一个参数为A,第二个参数为B,返回A的B次方。返回值与A有相同的单位,B的单位被忽略。

    参数:

    • 数字:浮点数,基数
    • 数字:浮点数,冪指数

    返回值:数字,基数的冪指数次方

    例如:

    pow(0cm, 0px)
    pow(25, -2)
    pow(25, 0.5)
    pow(-25, 0.5)
    pow(-25%, -0.5)
    

    输出:

    1cm
    0.0016
    5
    NaN
    NaN%
    

    mod

    返回第一个参数对第二参数取余的结果。返回值与第一个参数单位相同,第二个参数单位被忽略。这个函数也可以处理负数和浮点数。

    参数:

    • 数字:浮点数
    • 数字:浮点数

    返回值:数字,取余的结果

    例如:

    mod(0cm, 0px)
    mod(11cm, 6px);
    mod(-26%, -5);
    

    输出:

    NaNcm;
    5cm
    -1%;
    

    convert

    将数字从一种类型转换到另一种类型。第一个参数为带单位的数值,第二个参数为单位。如果两个参数的单位是兼容的,则数字的单位被转换。如果两个参数的单位不兼容,则原样返回第一个参数。

    兼容的单位组:

    • 长度:m / cm / mm / in / pt / pc
    • 时间:s / ms
    • 角度:rad / deg / grad / turn

    grad为“百分度”,见正弦函数下的说明。turn为“圈/周”的意思,1turn为360度。

    参数:

    • 数字:带单位的数值,浮点数
    • 单位

    返回值:转换单位后的数值

    例如:

    convert(9s, "ms")
    convert(14cm, mm)
    convert(8, mm) // 不兼容的单位
    

    输出:

    9000ms
    140mm
    8
    

    Unit

    返回带不同单位的数值。只有单位被改变,数值本身不会被转换。函数会假设第二个参数带上了合法单位。

    参数:

    • 数字:带单位的浮点数
    • 单位

    返回值:带单位的数值

    例如:

    unit(9s, ~"ms")
    unit(-9, m)
    

    输出:

    9ms
    -9m
    

    颜色函数 (Color functions)

    color

    见“综合函数”部分

    rgb(@r, @g, @b)

    通过十进制红色,绿色,蓝色三种值 (RGB) 创建不透明的颜色对象。在 HTML/CSS 中也会用文本颜色值 (literal color values) 定义颜色,例如 red -> #ff0000

    参数:

    • @red: 整数 0-255 或百分比 0-100%
    • @green: 整数 0-255 或百分比 0-100%
    • @blue: 整数 0-255 或百分比 0-100%

    返回值:颜色 (color)

    例如:

    rgb(90, 129, 32)
    

    输出:

    #5a8120
    

    rgba(@r, @g, @b, @a)

    通过十进制红色,绿色,蓝色,以及 alpha 四种值 (RGBA) 创建带alpha透明的颜色对象。

    参数:

    • @red: 整数 0-255 或百分比 0-100%
    • @green: 整数 0-255 或百分比 0-100%
    • @blue: 整数 0-255 或百分比 0-100%
    • @alpha: 数字 0-1 或百分比 0-100%

    返回值:颜色 (color)

    例如:

    rgba(90, 129, 32, 0.5)
    

    输出:

    rgba(90, 129, 32, 0.5)
    

    argb(@color)

    创建格式为 #AARRGGBB 的十六进制 (hex representation) 颜色 (注意不是 #RRGGBBAA !)。这种格式被用在IE滤镜中,以及.NET和Android开发中。

    参数:

    • @color: 颜色对象 (A color object.)

    返回值:字符串 (string)

    例如:

    argb(rgba(90, 23, 148, 0.5));
    

    输出:

    #805a1794
    

    hsl(@hue, @saturation, @lightness)

    通过色相 (hue),饱和度 (saturation),亮度 (lightness) 三种值 (HSL) 创建不透明的颜色对象。

    参数:

    • @hue: 整数 0-360 表示度数。
    • @saturation: 百分比 0-100% 或数字 0-1
    • @lightness: 百分比 0-100% 或数字 0-1

    返回值:颜色 (color)

    例如:

    hsl(90, 100%, 50%)
    

    输出:

    #80ff00
    

    当你想使用一种颜色来创建另一种颜色时很方便,如:

    @new: hsl(hue(@old), 45%, 90%);
    

    @new 将使用 @old 的 色相值,以及它自己的饱和度与亮度。

    hsla(@hue, @saturation, @lightness, @alpha)

    通过色相 (hue),饱和度 (saturation),亮度 (lightness),以及 alpha 四种值 (HSLA) 创建透明的颜色对象。

    参数:

    • @hue: 整数 0-360 表示度数
    • @saturation: 百分比 0-100% 或数字 0-1
    • @lightness: 百分比 0-100% 或数字 0-1
    • @alpha: 百分比 0-100% 或数字 0-1

    返回值:颜色 (color)

    例如:

    hsl(90, 100%, 50%, 0.5)
    

    输出:

    rgba(128, 255, 0, 0.5)
    

    hsv(@hue, @saturation, @value)

    通过色相 (hue),饱和度 (saturation),色调 (value) 三种值 (HSV) 创建不透明的颜色对象。注意与 HSL 不同,这是另一种在Photoshop中可用的色彩空间。

    参数:

    • @hue: 整数 0-360 表示度数
    • @saturation: 百分比 0-100% 或数字 0-1
    • @value: 百分比 0-100% 或数字 0-1

    返回值:颜色 (color)

    例如:

    hsv(90, 100%, 50%)
    

    输出:

    #408000
    

    hsva(@hue, @saturation, @value, @alpha)

    通过色相 (hue),饱和度 (saturation),色调 (value),以及 alpha 四种值 (HSVA) 创建透明的颜色对象。注意与 HSLA 不同,这是另一种在Photoshop中可用的色彩空间。

    参数:

    • @hue: 整数 0-360 表示度数
    • @saturation: 百分比 0-100% 或数字 0-1
    • @value: 百分比 0-100% 或数字 0-1
    • @alpha: 百分比 0-100% 或数字 0-1

    返回值:颜色 (color)

    例如:

    hsva(90, 100%, 50%, 0.5)
    

    输出:

    rgba(64, 128, 0, 0.5)
    

    hue(@color)

    从颜色对象中提取色相值。

    参数:

    • @color: 颜色对象 (A color object.)

    返回值:整数,范围从0-360

    例如:

    hue(hsl(90, 100%, 50%))
    

    输出:

    90
    

    saturation(@color)

    从颜色对象中提取饱和度值。

    参数:

    • @color: 颜色对象 (A color object.)

    返回值:百分比值 0-100

    例如:

    saturation(hsl(90, 100%, 50%))
    

    输出:

    100%
    

    lightness(@color)

    从颜色对象中提取亮度值。

    参数:

    • @color: 颜色对象 (A color object.)

    返回值:百分比值 0-100

    例如:

    lightness(hsl(90, 100%, 50%))
    

    输出:

    50%
    

    hsvhue

    以HSV色彩空间提取颜色中的色相值。

    参数:

    • 颜色

    返回:整数,范围为0-360

    例如:

    hsvhue(hsv(90, 100%, 50%))
    

    输出:

    90
    

    hsvsaturation

    以HSV色彩空间提取颜色中的饱和度值。

    参数:

    • 颜色

    返回值:百分比,范围0-100

    例如:

    hsvsaturation(hsv(90, 100%, 50%))
    

    输出:

    100%
    

    hsvvalue

    以HSV色彩空间提取颜色中的色调值。

    参数:

    • 颜色

    返回:百分比,范围为0-100

    例如:

    hsvvalue(hsv(90, 100%, 50%))
    

    输出:

    50%
    

    red(@color)

    从颜色对象中提取红色值。

    参数:

    • @color: 颜色对象 (A color object.)

    返回值:整数 0-255

    例如:

    red(rgb(10, 20, 30))
    

    输出:

    10
    

    green(@color)

    从颜色对象中提取绿色值。

    参数:

    • @color: 颜色对象 (A color object.)

    返回值:整数 0-255

    例如:

    green(rgb(10, 20, 30))
    

    输出:

    20
    

    blue(@color)

    从颜色对象中提取蓝色值。

    参数:

    • @color: 颜色对象 (A color object.)

    返回值:整数 0-255

    例如:

    blue(rgb(10, 20, 30))
    

    输出:

    30
    

    alpha(@color)

    从颜色对象中提取 alpha 值。

    参数:

    • @color: 颜色对象 (A color object.)

    返回值:浮点数,介于 0-1 之间

    例如:

    alpha(rgba(10, 20, 30, 0.5))
    

    输出:

    0.5
    

    luma(@color)

    计算颜色对象的 luma 值(亮度的百分比表示法)。使用在WCAG2.0中定义的SMPTE C / Rec. 709 coefficients。 这个计算公式也用在 contrast() 函数中。

    参数:

    • @color: 颜色对象 (A color object.)

    返回值:百分比 0-100%

    例如:

    luma(rgb(100, 200, 30))
    

    输出:

    65%
    

    颜色运算 (Color operations)

    颜色值运算有几点注意事项:参数必须单位/格式相同;百分比将作为绝对值处理,比如 10% 增加 10%,结果是 20% 而不是 11%;参数值只能在限定的范围内;they do not wrap around (这一句不清楚意思,可能是指参数值不会在超过范围后自动从另一侧“穿越”回去。)。返回值时,除了十六进制的颜色值 (hex versions) 外将对其他格式做简化处理。

    saturate(@color, 10%)

    增加一定数值的颜色饱和度。

    参数:

    • @color: 颜色对象 (A color object.)
    • @amount: 百分比 0-100%

    返回值:颜色 (color)

    例如:

    saturate(hsl(90, 90%, 50%), 10%)
    

    输出:

    #80ff00 // hsl(90, 100%, 50%)
    

    desaturate(@color, 10%)

    降低一定数值的颜色饱和度。

    参数:

    • @color: 颜色对象 (A color object.)
    • @amount: 百分比 0-100%

    返回值:颜色 (color)

    例如:

    desaturate(hsl(90, 90%, 50%), 10%)
    

    输出:

    #80e51a // hsl(90, 80%, 50%)
    

    lighten(@color, 10%)

    增加一定数值的颜色亮度。

    参数:

    • @color: 颜色对象 (A color object.)
    • @amount: 百分比 0-100%

    返回值:颜色 (color)

    例如:

    lighten(hsl(90, 90%, 50%), 10%)
    

    输出:

    #99f53d // hsl(90, 90%, 60%)
    

    darken(@color, 10%)

    降低一定数值的颜色亮度。

    参数:

    • @color: 颜色对象 (A color object.)
    • @amount: 百分比 0-100%

    返回值:颜色 (color)

    例如:

    darken(hsl(90, 90%, 50%), 10%)
    

    输出:

    #66c20a // hsl(90, 90%, 40%)
    

    fadein(@color, 10%)

    降低颜色的透明度(或增加不透明度),令其更不透明,对不透明的颜色无效。如果要增加颜色的透明度,使用 fadeout() 函数。

    参数:

    • @color: 颜色对象 (A color object.)
    • @amount: 百分比 0-100%

    返回值:颜色 (color)

    例如:

    fadein(hsla(90, 90%, 50%, 0.5), 10%)
    

    输出:

    rgba(128, 242, 13, 0.6) // hsla(90, 90%, 50%, 0.6)
    

    fadeout(@color, 10%)

    增加颜色的透明度(或降低不透明度),令其更透明,对不透明的颜色无效。如果要增加颜色的透明度,使用 fadein() 函数。

    参数:

    • @color: 颜色对象 (A color object.)
    • @amount: 百分比 0-100%

    返回值:颜色 (color)

    例如:

    fadeout(hsla(90, 90%, 50%, 0.5), 10%)
    

    输出:

    rgba(128, 242, 13, 0.4) // hsla(90, 90%, 50%, 0.6)
    

    fade(@color, 50%)

    给颜色(包括不透明的颜色)设定一定数值的透明度。

    参数:

    • @color: 颜色对象 (A color object.)
    • @amount: 百分比 0-100%

    返回值:颜色 (color)

    例如:

    fade(hsl(90, 90%, 50%), 10%)
    

    输出:

    rgba(128, 242, 13, 0.1) //hsla(90, 90%, 50%, 0.1)
    

    spin(@color, 10)

    向任意方向旋转颜色的色相角度 (hue angle),旋转范围 0-360,超过一周后将从起点开始继续旋转(+ - 控制方向),比如旋转 360 度与 720 度是相同的结果。需要注意的是,颜色值会通过 RGB 格式转换,这个过程不能保留灰色的色相值(灰色没有饱和度,色相值也就没有意义了),因此要确定使用函数的方法能够保留颜色的色相值,例如不要这样使用函数:

    @c: saturate(spin(#aaaaaa, 10), 10%);
    

    而应该用这种方法代替:

    @c: spin(saturate(#aaaaaa, 10%), 10);
    

    因为颜色值永远输出为 RGB 格式,因此 spin() 函数对灰色无效。

    参数:

    • @color: 颜色对象 (A color object.)
    • @angle: 任意数字表示角度 (+ 或 – 表示方向)

    返回值:颜色 (color)

    例如:

    spin(hsl(10, 90%, 50%), 20)
    spin(hsl(10, 90%, 50%), -20)
    

    输出:

    #f27f0d // hsl(30, 90%, 50%)
    #f20d33 // hsl(350, 90%, 50%)
    

    mix(@color1, @color2, [@weight: 50%])

    根据比例混合两种颜色,包括计算不透明度。

    参数:

    • @color1: 颜色对象 (A color object.)
    • @color2: 颜色对象 (A color object.)
    • @weight: 可选项:平衡两种颜色的百分比, 默认 50%。

    返回值:颜色 (color)

    例如:

    mix(#ff0000, #0000ff, 50%)
    mix(rgba(100,0,0,1.0), rgba(0,100,0,0.5), 50%)
    

    输出:

    #800080
    rgba(75, 25, 0, 0.75)
    

    greyscale(@color)

    完全移除颜色的饱和度,与 desaturate(@color, 100%) 函数效果相同。因为颜色的饱和度不受色相值影响,所以输出的颜色会稍显暗淡 (dull or muddy);如果使用luma值可能会有更好的结果,因为它提取的是百分比亮度,而不是线性亮度。比如greyscale('#0000ff')greyscale('#00ff00')会得出相同的结果,尽管对人眼来说,它们的亮度是不一样的。

    参数:

    • @color: 颜色对象 (A color object.)

    返回值:颜色 (color)

    例如:

    greyscale(hsl(90, 90%, 50%))
    

    输出:

    #808080 // hsl(90, 0%, 50%)
    

    contrast(@background, [@darkcolor: black], [@lightcolor: white], [@threshold: 43%])

    这个函数对比 @background 的 luma 值与 @threshold 参数的大小,如果大于输出 @darkcolor, 小于则输出 @lightcolor,便于选择相对于背景更容易阅读的颜色,同时提高了使用颜色的灵活性,与 Compass 的 contrast() 函数 工作方式相同。根据 WCAG 2.0 应该对比颜色的 luma 值,而不是亮度值 (lightness)。

    参数:

    • @background: 需要对比的颜色对象 (A color object to compare against.)
    • @darkcolor: 可选项 – 指定的黑色(默认 black)
    • @lightcolor: 可选项 – 指定的白色(默认 white)
    • @threshold: 可选项 – 百分比 0-100% 界定深色过渡到浅色的转变位置(默认 43%),这个数值决定了输出结果偏向于哪一方,比如判断 50% 的灰色背景应该显示白色还是黑色的文字。一般来说,如果本色方案偏浅,则应该设低一点,否则设高一点。

    返回值:颜色 (color)

    例如:

    contrast(#aaaaaa)
    contrast(#222222, #101010)
    contrast(#222222, #101010, #dddddd)
    contrast(hsl(90, 100%, 50%),#000000,#ffffff,40%);
    contrast(hsl(90, 100%, 50%),#000000,#ffffff,60%);
    

    输出:

    #000000 // black
    #ffffff // white
    #dddddd
    #000000 // black
    #ffffff // white
    

    颜色混合 (Color blending)

    颜色混合的方式与图像编辑器 Photoshop, Firework 或者 GIMP 的图层混合模式 (layer blending modes) 相似,因此制作 .psd 文件时处理颜色的方法可以同样用在 CSS 中。

    multiply(@color1, @color2)

    分别将两种颜色的红绿蓝 (RGB) 三种值做乘法运算,然后再除以 255,输出结果是更深的颜色。(译注:对应Photoshop中的“变暗/正片叠底”。)

    参数:

    • @color1: 颜色对象
    • @color2: 颜色对象

    返回值:颜色 (color)

    screen(@color1, @color2)

    与 multiply() 函数效果相反,输出结果是更亮的颜色。(译注:对应Photoshop中的“变亮/滤色”。)

    参数:

    • @color1: 颜色对象
    • @color2: 颜色对象

    返回值:颜色 (color)

    overlay(@color1, @color2)

    结合 multiply() 与 screen() 两个函数的效果,令浅的颜色变得更浅,深的颜色变得更深。(译注:对应Photoshop中的“叠加”。)注意:输出结果由第一个颜色参数决定。

    参数:

    • @color1: 颜色对象,是用于叠加的颜色,也是结果是更亮还是更暗的决定因素。@color2: 颜色对象,被叠加的颜色

    返回值:颜色 (color)

    softlight(@color1, @color2)

    与 overlay() 函数效果相似,只是当纯黑色或纯白色作为参数时输出结果不会是纯黑色或纯白色。(译注:对应Photoshop中的“柔光”。)

    参数:

    • @color1: 混合色(光源)
    • @color2: 被混合的颜色

    返回值:颜色 (color)

    hardlight(@color1, @color2)

    与 overlay() 函数效果相似,不过由第二个颜色参数决定输出颜色的亮度或黑度,而不是第一个颜色参数决定。(译注:对应Photoshop中的“强光/亮光/线性光/点光”。)

    参数:

    • @color1: 混合色(光源)
    • @color2: 被混合的颜色

    返回值:颜色 (color)

    difference(@color1, @color2)

    从第一个颜色值中减去第二个(分别计算 RGB 三种颜色值),输出结果是更深的颜色。(译注:对应Photoshop中的“差值/排除”。)

    参数:

    • @color1: 被减的颜色对象
    • @color2: 减去的颜色对象

    返回值:颜色 (color)

    exclusion(@color1, @color2)

    效果与 difference() 函数效果相似,只是输出结果差别更小 (lower contrast)。(译注:对应Photoshop中的“差值/排除”。)

    参数:

    • @color1: 被减的颜色对象
    • @color2: 减去的颜色对象

    average(@color1, @color2)

    分别对 RGB 的三种颜色值取平均值,然后输出结果。

    参数:

    • @color1: 颜色对象 (A color object.)
    • @color2: 颜色对象 (A color object.)

    返回值:颜色 (color)

    negation(@color1, @color2)

    difference() 函数效果相反,输出结果是更亮的颜色。请注意:效果相反不代表做加法运算。

    参数:

    • @color1: 被减的颜色对象
    • @color2: 减去的颜色对象

    返回值:颜色 (color)

    展开全文
  • LessCSS

    2019-07-22 20:37:25
    LESSCSS 赋予了动态语言的特性,如 变量, 继承, 运算, 函数. LESS 既可以在 客户端 上运行 (支持IE 6 , Webkit, Firefox),也可以在服务端运行使用 Less CSS 的好处写更少的 资源太大,传百度网盘了,链接在...
  • lesscss 是动态的样式表语言,他让css增加变量,组合,函数,运算等语法。这个项目的网站在国内访问不到,大家都懂的。lesscss使用方法有两种:1.页面添加一个 less.js的文件,css使用 style.less 文件后缀来编写,...
  • cssless混合函数方法

    千次阅读 2018-10-29 11:56:46
    cssless混合函数方法  /* 参数 */ // 阴影色 @shadowColor: rgba(0,0,0,.20); // 文本框提示字颜色 @placeholderColor: #97a8be; /* 函数 */ //---垂直居中布局 .verticalLayout(@left: auto, @right: ...

    css之less混合函数方法 

    /*
        参数
    */
    
    // 阴影色
    @shadowColor: rgba(0,0,0,.20);
    // 文本框提示字颜色
    @placeholderColor: #97a8be;
    
    /*
        函数
    */
    
    //---垂直居中布局
    .verticalLayout(@left: auto, @right: auto, @top: 0, @bottom: 0, @position: absolute) {
        position: @position;
        top: @top;
        right: @right;
        bottom: @bottom;
        left: @left;
        margin: auto;
    }
    
    //---完全居中布局
    .completeCenter(@left: 0, @right: 0, @top: 0, @bottom: 0, @position: absolute) {
        position: @position;
        top: @top;
        right: @right;
        bottom: @bottom;
        left: @left;
        margin: auto;
    }
    
    //---严格盒模型
    .boxSizing (@fn:1) when (@fn = 1) { 
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    .boxSizing (@fn:1) when (@fn > 1) { 
        -webkit-box-sizing: content-box;
        box-sizing: content-box;
    }
    
    //---盒子阴影颜色
    .boxShadow(@range:10px,@color:@shadowColor,@x:0,@y:0,@ins:false) when (@ins=false){
        -webkit-box-shadow: @x @y @range @color;
        -moz-box-shadow: @x @y @range @color;
        box-shadow: @x @y @range @color;
    }
    .boxShadow(@range:10px,@color:@shadowColor,@x:0,@y:0,@ins:false) when (@ins=true){
        -webkit-box-shadow: inset @x @y @range @color;
        -moz-box-shadow: inset @x @y @range @color;
        box-shadow: inset @x @y @range @color;
    }
    
    //---透明度
    .opacity(@alpha){
        @newAlpha: @alpha*100;
        filter: alpha(opacity= @newAlpha);  
        -moz-opacity:@alpha;  
        -khtml-opacity: @alpha;  
        opacity: @alpha;  
    }
    
    //---单行/多行文字溢出省略
    .ellipsis(@line:1) when (@line=1){
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .ellipsis(@line:1) when (@line>1){
        display: -webkit-box!important;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: @line;
    }
    
    //---圆角(全方向)
    .borderRadiusAll(@pixel:50%){
        -webkit-border-radius: @pixel;
        border-radius: @pixel;
    }
    .borderRadius(@leftTop:0,@rightTop:0,@rightBottom:0,@leftBottom:0){
        -webkit-border-radius: @arguments;
        border-radius: @arguments;
    }
    
    //---输入框无输入 提示
    .placeholder(@color:@placeholderColor,@pixel:14px,@lh:1.4){
        &::-webkit-input-placeholder{
            color: @color;
        }
        &:-moz-placeholder{
            color: @color;
        }
        &::-moz-placeholder{
            color: @color;
        }
        &:-ms-input-placeholder{
            color: @color;
        }
        font-size: @pixel;
        line-height: @lh;
        font-family: "Microsoft Yahei UI", "Microsoft Yahei", "微软雅黑", "Segoe UI", "Tahoma", "SimSun";
        
    }
    
    //---过渡
    .transition(@property: all, @duration: 0s, @timing-function: ease, @delay: 0s){
        -webkit-transition: @property @duration @timing-function @delay;
        -moz-transition: @property @duration @timing-function @delay;
        -o-transition: @property @duration @timing-function @delay;
        transition: @property @duration @timing-function @delay;
    }
    //---变形(自行补充)
    .transformTS(@translate3d,@scaleY){
        -webkit-transform: @arguments;
        -moz-transform: @arguments;
        -o-transform: @arguments;
        transform: @arguments;
    }
    //---动画
    .animationSingle(@name,@duration,@timingFn:linear,@delay:0s,@count:infinite){
        -webkit-animation: @name @duration @delay @timingFn @count;
        -moz-animation: @name @duration @delay @timingFn @count;
        -o-animation: @name @duration @delay @timingFn @count;
        animation: @name @duration @delay @timingFn @count;
    }
    
    //---变形中心
    .transformOrigin(@x:50%, @y:50% , @z:0){
        -webkit-transform-origin: @x @y @z;
        -moz-transform-origin: @x @y @z;
        -o-transform-origin: @x @y @z;
        transform-origin: @x @y @z;
    }
    
    //---旋转
    .rotate(@angle:0deg){
        -webkit-transform: rotate(@angle);
        -moz-transform: rotate(@angle);
        -o-transform: rotate(@angle);
        transform: rotate(@angle);
    }
    
    //---旋转自定义
    .rotateCustom(){
        -webkit-transform: @arguments;
        transform: @arguments;
    }
    
    //---缩放
    .scale(@zoom:0.8){
        -webkit-transform: scale(@zoom);
        -moz-transform: scale(@zoom);
        -o-transform: scale(@zoom);
        transform: scale(@zoom);
    }
    
    //---横向缩放
    .scaleX(@zoom:0.8){
        -webkit-transform: scaleX(@zoom);
        -moz-transform: scaleX(@zoom);
        -o-transform: scaleX(@zoom);
        transform: scaleX(@zoom);
    }
    
    //---纵向缩放
    .scaleY(@zoom:0.8){
        -webkit-transform: scaleY(@zoom);
        -moz-transform: scaleY(@zoom);
        -o-transform: scaleY(@zoom);
        transform: scaleY(@zoom);
    }
    
    //---3D转换
    .transformStyle(@theStyle:preserve-3d){
        -webkit-transform-style: @theStyle;
        transform-style: @theStyle;
    }
    
    //---3d偏移
    .translate3d(@x:0,@y:0,@z:0){
        -webkit-transform: translate3d(@x,@y,@z);
        -moz-transform: translate3d(@x,@y,@z);
        -o-transform: translate3d(@x,@y,@z);
        transform: translate3d(@x,@y,@z);
    }
    
    //---过滤
    /**
      * 高斯模糊 blur(px)   0
      * 亮度 brightness(%)  1
      * 对比度 contrast(%)  1
      * 阴影 drop-shadow(h-shadow v-shadow blur spread color)
      * 灰度强化 grayscale(%)  0
      * 色相旋转 hue-rotate(deg)  0
      * 图像反转 invert(%)  0
      * 透明度 opacity(%) 1
      * 饱和度 saturate(%) 1
      * 褐色强化 sepia(%) 0
      */
    .boxFilterDemo(){
        -webkit-filter: blur(0px) brightness(100%) contrast(100%) drop-shadow(0px 0px 0px 0px #000) grayscale(0%) hue-rotate(0deg) invert(0) opacity(1) saturate(100%) sepia(0%);
        filter: blur(0px) brightness(100%) contrast(100%) drop-shadow(0px 0px 0px 0px #000) grayscale(0%) hue-rotate(0deg) invert(0) opacity(1) saturate(100%) sepia(0%);
    }
    //--自定义过滤
    .boxFilter(){
        -webkit-filter: @arguments;
        filter: @arguments;
    }
    
    //---盒子阴影颜色(自定义文本)
    .boxShadowByText(@insetShadow,@shadow){
        -webkit-box-shadow: @insetShadow , @shadow;
        -moz-box-shadow: @insetShadow , @shadow;
        box-shadow: @insetShadow , @shadow;
    }
    
    //---元素的显示隐藏
    /**
      * visible 默认值。元素是可见的。
      * hidden  元素是不可见的。
      * collapse    当在表格元素中使用时,此值可删除一行或一列,但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上,会呈现为 "hidden"。
      */
    .visibility(@value:visible){
        visibility: @visible;
    }
    
    //---线性渐变
    .gradient(@bColor,@eColor,@direction:null) when (@direction=null){
        background: -webkit-linear-gradient(left top, bColor, eColor);
        background: -o-linear-gradient(bottom right, bColor, eColor);
        background: -moz-linear-gradient(bottom right, bColor, eColor);
        background: linear-gradient(to bottom right, bColor, eColor);
    }
    .gradient(@bColor,@eColor,@direction:null) when (@direction=null){
        background: -moz-linear-gradient(top, bColor, eColor);
        background: -o-linear-gradient(top,bColor, eColor);
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(bColor), to(eColor));
    }
    .gradient(@bColor,@eColor,@direction:null) when (@direction=null){
        background: -moz-linear-gradient(top, bColor, eColor);
        background: -o-linear-gradient(top,bColor, eColor);
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(bColor), to(eColor));
    }
    
    //---背景图片
    .backgroundImage(@url){
        background: url(@url) center center no-repeat;
        background-size: 100% 100%;
    }
    
    //---文本垂直居中/利用行高垂直居中
    .textLineHeigth(@pixel){
        height: @pixel;
        line-height: @pixel;
    }
    
    //---字体间隔
    .spacing(@pixel:1px){
        letter-spacing: @pixel;
    }
    
    //---字体间隔升级版
    .spacingPlus(@pixel:1px){
        letter-spacing: @pixel;
        text-indent: @pixel;
    }
    
    //---删除间隙
    .removeGap(@spacing:-4px){
        .spacing(@spacing);
        font-size: 0;
    }
    
    //显示模式,默认为溢出隐藏
    .overflow(@mode:hidden){
        overflow: @mode;
    }
    
    //---镂空按钮悬浮及点击时亮度的变化
    .hollowBtnHover(@color,@borderWidth:1px){
        &:hover{
            border: @borderWidth solid lighten(@color,5%);
            color: lighten(@color,8%);
        }
        &:active{
            border: @borderWidth solid darken(@color,5%);
            color: darken(@color,2%);
        }
    }
    
    //---镂空按钮悬浮及点击时亮度的变化
    .hollowBtnHoverByNormal(@color,@borderWidth:1px){
        &:hover{
            background-color: lighten(@color,0%);
            border: @borderWidth solid lighten(@color,0%);
            color: #fff;
        }
        &:active{
            background-color: darken(@color,6%);
            border: @borderWidth solid darken(@color,6%);
            color: #fff;
        }
    }
    
    //---正常按钮悬浮及点击时亮度的变化
    .btnBgHover(@bgColor){
        &:hover{
            background: lighten(@bgColor,2%);
        }
        &:active{
            background: darken(@bgColor,6%);
        }
    }

     

    展开全文
  • 提到LESSCSS,可能大家不都不太了解。LESSCSS是属于css中的一种动态语言。他可以让CSS使用起来更加灵活,使用方式形如JavaScript中的一些变量,函数等。LESSCSS可以在多种语言和环境中使用,比如服务端、浏览器端。 ...
  • LESSCSS

    2015-07-21 09:20:38
    LESSCSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护。 LESSCSS可以在多种语言、环境中使用,包括浏览器...

    什么是LESSCSS

    LESSCSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护。

    LESSCSS可以在多种语言、环境中使用,包括浏览器端、桌面客户端、服务端。

    语言特性快速预览:

    变量:

    变量允许我们单独定义一系列通用的样式,然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。

    LESS源码:

    @color: #4D926F;
    
    #header {
        color: @color;
    }
    h2 {
        color: @color;
    }
    

    编译后的CSS:

    #header {
        color: #4D926F;
    }
    h2 {
        color: #4D926F;
    }
    

    混合(Mixins)

    混合可以将一个定义好的class A轻松的引入到另一个class B中,从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用,就像使用函数一样。

    LESS源码:

    .rounded-corners (@radius: 5px) {
        -webkit-border-radius: @radius;
        -moz-border-radius: @radius;
        -ms-border-radius: @radius;
        -o-border-radius: @radius;
        border-radius: @radius;
    }
    
    #header {
        .rounded-corners;
    }
    #footer {
        .rounded-corners(10px);
    }
    

    编译后的CSS:

    #header {
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
        border-radius: 5px;
    }
    #footer {
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        border-radius: 10px;
    }
    

    嵌套

    我们可以在一个选择器中嵌套另一个选择器来实现继承,这样很大程度减少了代码量,并且代码看起来更加的清晰。

    LESS源码:

    #header {
        h1 {
            font-size: 26px;
            font-weight: bold;
        }
        p {
            font-size: 12px;
            a {
                text-decoration: none;
                &:hover {
                    border-width: 1px
                }
            }
        }
    }
    

    编译后的CSS:

    #header h1 {
        font-size: 26px;
        font-weight: bold;
    }
    #header p {
        font-size: 12px;
    }
    #header p a {
        text-decoration: none;
    }
    #header p a:hover {
        border-width: 1px;
    }
    

    函数和运算

    运算提供了加,减,乘,除操作;我们可以做属性值和颜色的运算,这样就可以实现属性值之间的复杂关系。LESS中的函数一一映射了JavaScript代码,如果你愿意的话可以操作属性值。

    LESS源码:

    @the-border: 1px;
    @base-color: #111;
    @red:        #842210;
    
    #header {
        color: (@base-color * 3);
        border-left: @the-border;
        border-right: (@the-border * 2);
    }
    #footer {
        color: (@base-color + #003300);
        border-color: desaturate(@red, 10%);
    }
    

    编译后的CSS:

    #header {
        color: #333;
        border-left: 1px;
        border-right: 2px;
    }
    #footer {
        color: #114411;
        border-color: #7d2717;
    }
    

    更多说明

    更多更详细的语法特性请参见语言文档

    快速上手

    LESSCSS的使用是很容易的,首先,使用你最常使用的代码编辑器,按LESSCSS的语法规则写好.less文件,接下来,使用编译工具它编译成.css,最后再引入页面即可。

    GUI编译工具

    为方便起见,建议初学者使用GUI编译工具来编译.less文件,以下是一些可选GUI编译工具:

    1. koala(Win/Mac/Linux)

      国人开发的LESSCSS/SASS编译工具。下载地址:http://koala-app.com/index-zh.html

    2. Codekit(Mac)

      一款自动编译Less/Sass/Stylus/CoffeeScript/Jade/Haml的工具,含语法检查、图片优化、自动刷新等附加功能。下载地址http://incident57.com/codekit/

    3. WinLess(Win)

      一款LESS编译软件。下载地址http://winless.org/

    4. SimpleLess(Win/Mac/Linux)

      一款LESS编译软件。下载地址http://wearekiss.com/simpless

    Node.js库

    LESSCSS官方有一款基于Node.js的库,用于编译.less文件。

    使用时,首先全局安装less(部分系统下可能需要在前面加上sudo切换为超级管理员权限):

    npm install -g less
    

    接下来就可以使用lessc来编译.less文件了:

    lessc example/example.less example/example.css
    

    更多选项可以直接运行lessc查看说明。

    浏览器端使用

    LESSCSS也可以不经编译,直接在浏览器端使用。

    使用方法:

    1. 下载LESSCSS的.js文件,例如lesscss-1.4.0.min.js。
    2. 在页面中引入.less文件

      <link rel="stylesheet/less" href="example.less" />
      

      需要注意rel属性的值是stylesheet/less,而不是stylesheet

    3. 引入第1步下载的.js文件

      <script src="lesscss-1.4.0.min.js"></script>
      

    需要特别注意的是,由于浏览器端使用时是使用ajax来拉取.less文件,因此直接在本机文件系统打开(即地址是file://开头)或者是有跨域的情况下会拉取不到.less文件,导致样式无法生效。

    还有一种情况容易导致样式无法生效,就是部分服务器(以IIS居多)会对未知后缀的文件返回404,导致无法正常读取.less文件。解决方案是在服务器中为.less文件配置MIME值为text/css(具体方法请搜索)。或者还有一种更简单的方法,即是直接将.less文件改名为.css文件即可。

    更多说明

    更多使用上的说明请参见使用说明

    更新说明

    1.4.0

    1.4.0已经正式发布,这个版本引入了一些新特性,如派生(extends)、data-uri函数以及更多的数学函数。详细的变更情况请查看更新日志

    在这个版本中,有一些不兼容的变化。

    • @import-once被移除,现在@import的默认行为就是只引入一次(和旧版本@import-once功能一样)。
    • (~".myclass_@{index}") {...}这样在选择器中插入变量的语法不再被支持,请使用.myclass_@{index} {...}来代替,这种新语法在1.3.1以上版本中都支持。
    • 用于浏览器的less.js不再包含es5-shim.js。因为我们之前用的es5-shim.js版本中有一些错误,而新版本的体积又明显变大了。使用时请根据需要选用es5-shim或者是只在现代浏览器中使用。
    • 引入了一种“严格运算模式”(可选),在严格运算模式中,数学运算必须被括号包裹,如:

      (1 + 1)  // 2
      1 + 1    // 1+1
      

      在1.4.0中,这个选项默认被关闭,但我们希望在未来的某个时间将它默认设置为开启。我们建议你升级代码的写法,并打开严格运算模式。(在命令行中加上-strict-math=on或者是在JavaScript代码中加入strictMath:true。)带括号的写法与旧版的less编译器兼容。

    • 引入了一种“严格单位模式”(strictUnits:true或者strict-units=on),这将强制让lessc验证单位的合法性。例如4px/2px结果为2,而不是2px,而4em/2px将报错。目前没有将这个选项默认打开的计划,但它可能在排查bug的时候有用。
    • 单位的运算功能已完成,所以(4px * 3em) / 4px以前结果是3px,但现在是3em。但是,我们没有取消有单位数字向无单位数字转换的功能,除非“严格单位模式”被开启。

    你可以现在就将选择器中插入变量、运算、单位的涉及到的变化应用到代码中去,这些变化能很好地与less 1.3.3兼容。


    展开全文
  • less文件中定义的函数 Animation 动画 @animation-name规定需要绑定到选择器的 keyframe 名称 @animation-duration规定完成动画所花费的时间,以秒或毫秒计,默认是 0。 @animation-timing-function规定动画的速度...

    定义圆角及调用

    /*
    定义圆角
    @radius 圆角大小
    */
    .round(@radius:5px){
        border-radius:@radius;
        -webkit-border-radius: @radius;
        -moz-border-radius: @radius;
    }
    .round7{
       .round(7px);
    }

    image

     

    定义盒子阴影及调用

    /*
    盒子阴影
    @right_left 右边阴影为正数 左边负数
    @bottom_top 下边阴影为正数 上边负数
    @box  阴影大小
    @box_color 阴影颜色
    */
    .boxshadow(@right_left:5px,@bottom_top:5px,@box :5px,@box_color:#b6ebf7){
        box-shadow:@arguments;
       -moz-box-shadow:@arguments;
       -webkit-box-shadow:@arguments;
    }
    .boxshadow7{
      .boxshadow(7px,7px,7px,black);
    }

    image

     

    定义文字阴影及调用

    /*
    文字阴影,可以指定多组阴影
    @right_left1 右边阴影为正数 左边负数
    @bottom_top1 下边阴影为正数 上边负数
    @text  阴影大小
    @text_color 阴影颜色
    */
    .textshadow(@right_left1:5px,@bottom_top1:5px,@text :5px,@tetx_color:#b6ebf7){
        text-shadow:@arguments;
    }
    .r_b_textshadow{
      .textshadow();
    }

    image

    定义透明度及调用

    /*
    透明度 或渐变 1为不透明 0透明
    css3 rgba(110, 142, 185, .4)!important;前三个是颜色值 后一个是透明值
    用来兼容所有浏览器
    */
    .rgba(@rgba_a:.4,@rgb_b:40){
        filter: alpha(opacity=@rgb_b); 
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=@{rgb_b})"; 
        opacity:@rgb_a;    
    }
    .rgba4{
        .rgba();
    }

    image

    定义列布局及调用

    /*
    列布局
    @c1 列数
    @c2 列宽
    @c3 列间距
    @c4 边框样式
    */
    .column(@c1:3,@c2:310px,@c3:10px,@c4:1px solid #ccc){
        column-count:@c1;
        column-width:@c2;
        column-gap:@c3;
        column-rule:@c4;
        -webkit-column-count:@c1;
        -webkit-column-width:@c2;
        -webkit-column-gap:@c3;
        -webkit-column-rule:@c4;
        -moz-column-count:@c1;
        -moz-column-width:@c2;
        -moz-column-gap:@c3;
        -moz-column-rule:@c4;
    }
    .my_column{
        .column(3,50px,3px,1px solid #ccc);
    }

    image

    定义背景渐变及调用

    /*背景渐变
    @start  渐变开始颜色
    @end  结束颜色
    */
    .bg(@start :#00ffff,@end :#9fffff){
        background:-webkit-gradient(linear,0 0, 0 100%,from(@start),to(@end));
        background:-moz-linear-gradient(top,@start ,@end);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=@start ,
                    endColorstr=@end ,grandientType=0);
    }
    .my_bg{
        .bg(red,yellow);
    }

    image

    定义轮廓内部框及调用

    /*
    画轮廓 就是内部框
    @outline 样式
    @outline1 间距 负数在内部
    */
    .outline(@outline:1px solid #699,@outline1:-10px){
        outline:@outline;
        outline-offset:@outline1;
    }
    .my_outline{
        .outline();
    }

    image

    定义旋转,菱形旋转,缩放,移动及调用

    /*
    旋转角度
    @ro定义度数 
    IE不支持 滤镜支持0,1,2,3
    */
    .rotate(@ro :30deg){
            transform: rotate(@ro);
          -webkit-transform: rotate(@ro);
          -moz-transform: rotate(@ro);
          -o-transform: rotate(@ro);
          filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    }
    .rotate50{
        .rotate(50deg);
    }
    
    /*
    菱形旋转角度
    @x横向缩放比例
    @y纵向缩放比例
    */
    .skew(@roX :30deg,@roY :30deg){
            transform: skew(@roX,@roY);
          -webkit-transform: skew(@roX,@roY);
          -moz-transform: skew(@roX,@roY);
          -o-transform: skew(@roX,@roY);
          -ms-transform: skew(@roX,@roY) ;
    }
    .skew30{
        .skew(50deg);
    }
    
    /*
    放大缩小
    @x横向缩放比例
    @y纵向缩放比例
    */
    .scale(@x :1.2,@y :1.2){
            transform: scale(@x,@y);
          -webkit-transform: scale(@x,@y);
          -moz-transform: scale(@x,@y);
          -o-transform: scale(@x,@y);
          -ms-transform: scale(@x,@y);
    }
    .my_scale{
          .scale();
    }
    
    /*
    移动距离
    @x横向移动距离
    @y纵向移动距离
    */
    .translate(@x :80px,@y :80px){
            transform: translate(@x,@y);
          -webkit-transform: translate(@x,@y);
          -moz-transform: translate(@x,@y);
          -o-transform: translate(@x,@y);
          -ms-transform: translate(@x,@y);
    }
    .translate80{
          .translate();
    }
    
    /*
    综合上面4种变化,效果看下面的过度动画
    @rotate
    @scale
    @skew
    @translate
    */
    .transform(@rotate :360deg,@scaleX :1,@scaleY :1,@skewX :0deg,@skewY :0deg,@translateX :100px,@translateY :0px){
       transform: rotate(@rotate) scale(@scaleX,@scaleY) skew(@skewX,@skewY) translate(@translateX,@translateY);
       -webkit-transform: rotate(@rotate) scale(@scaleX,@scaleY) skew(@skewX,@skewY) translate(@translateX,@translateY);
       -moz-transform: rotate(@rotate) scale(@scaleX,@scaleY) skew(@skewX,@skewY) translate(@translateX,@translateY);
       -o-transform: rotate(@rotate) scale(@scaleX,@scaleY) skew(@skewX,@skewY) translate(@translateX,@translateY);
       -ms-transform: rotate(@rotate) scale(@scaleX,@scaleY) skew(@skewX,@skewY) translate(@translateX,@translateY);
       filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    }
    .my_transform{
          .transform();
    }

    定义过度动画及调用

    /*
    过度动画 
    id是css属性
    2s过度时间 0s是开始时间
    ease-in进入
    */
    .tran(@t :id 2s ease-in 0s){
        transition:@t ;
        -moz-transition:@t ;
        -o-transition:@t ;
        -webkit-transition:@t ;
    }
    .my_tran{
       &:hover{
       .transform();
       .tran(all 2s ease-in 0s);
       }
    }

    定义Animation动画及调用

    /*
    less文件中定义的函数
    Animation 动画 
    @animation-name规定需要绑定到选择器的 keyframe 名称
    @animation-duration规定完成动画所花费的时间,以秒或毫秒计,默认是 0。
    @animation-timing-function规定动画的速度曲线。默认是 "ease"。
    @animation-delay规定在动画开始之前的延迟。默认是 0。
    @animation-iteration-count规定动画应该播放的次数。默认是 1。
    @animation-direction规定是否应该轮流反向播放动画。默认是 "normal"。
    */
    .animation(@animation-name,@animation-duration,@animation-timing-function,
                    @animation-delay,@animation-iteration-count,@animation-direction){
        animation: @arguments;
        /* Firefox: */
        -moz-animation: @arguments;
        /* Safari 和 Chrome: */
        -webkit-animation: @arguments;
        /* Opera: */
        -o-animation: @arguments;
    }
    .my_animation{
       .animation(mykeyframes,5s,linear,2s,infinite,normal);
    }
    
    /***CSS定义的keyframes如下:****/
    @keyframes mykeyframes
    {
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
    }
    
    @-moz-keyframes mykeyframes /* Firefox */
    {
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
    }
    
    @-webkit-keyframes mykeyframes /* Safari 和 Chrome */
    {
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
    }
    
    @-o-keyframes mykeyframes /* Opera */
    {
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
    }

     

     

    参考引用

    http://my.oschina.net/u/98589/blog/57510
    http://lesscss.org/
    http://www.w3school.com.cn/
    http://www.css3maker.com/

    Less在线编译工具:

    http://tool.oschina.net/less 

     

    转载于:https://www.cnblogs.com/fastmover/p/4310727.html

    展开全文
  • less css

    2018-12-13 10:56:20
    Less是一个CSS的超集,Less允许我们定义变量,使用嵌套式声明,定义函数等。严格说Less包含两部分:(1)Less的语法 (2)Less预处理器。浏览器终究只认识CSS,所以Less文件需要经过Less预处理器编译成为CSS。 在...
  • 于是产生了用lesscss3动画能循环使用的想法,说干就干。直接放代码: 一、简单的函数定义使用 //来回闪烁通用代码 //在定义函数的时候可以这么写 //这是一个可以通用的@keyframes .keyframesFunction (@name,@...
  • LessCss.js

    2016-02-16 15:13:17
    LESSCSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护。 LESSCSS可以在多种语言、环境中使用,包括浏览器...
  • LESSCSS是CSS的扩展

    2014-01-20 15:32:24
    LESSCSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护。 LESSCSS可以在多种语言、环境中使用,包括浏览器...
  • LESS函数CSS样式简单上手教程

    千次阅读 2019-10-18 16:19:48
    Less 是一门 CSS 预处理语言,它扩展了 CSS 的写法,增加了变量、函数等特性。 注意点: 在less中,完全兼容css的语法,所以可以直接在less文件中写css没问题 浏览器不认识less文件,需要需要使用less中的样式,...
  • LESS CSS 实例

    2017-03-16 16:31:00
    你可以使用变量、函数、混合、继承等多种编程常用方法来编写 CSS,以更少的代码完成更多的样式。 学习这些工具最好的方法是通过各种实例快速入门,今天我们向你介绍 10 个非常有用的使用 Less CSS 的实例。...
  • LESSCSS成就CSS动态化

    千次阅读 2013-08-15 10:39:37
    提到LESSCSS,可能大家不都不太了解。LESSCSS是属于css中的一种动态语言。他可以让CSS使用起来更加灵活,使用方式形如JavaScript中的一些变量,函数等。LESSCSS可以在多种语言和环境中使用,比如服务端、浏览器端。
  • 它附带具有编程特性(例如变量,函数或Mixin和操作)的普通CSS,这些特性使Web开发人员可以构建模块化,可扩展且更易管理CSS样式 。 在这篇文章中,我们将研究LESSLESS是周围最受欢迎CSS预处理器之一,并且已...
  • LessCss学习笔记

    2019-09-29 15:22:28
    LESSCSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护。 LESSCSS可以在多种语言、环境中使用,包括浏览器...
  • Web设计和开发的世界确实... 今天,我从Web设计的发展中引起了我的注意的是LESS ,这是一种可编程样式表语言,它通过结合一些编程概念(如变量,混合,函数和运算)来扩展我们编写CSS语法的方式。 它打开了编写CSS...
  • LESSCSS学习笔记

    2018-07-04 11:24:24
    LESSCSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护。 LESSCSS可以在多种语言、环境中使用,包括浏览器...
  • LessCSS简述

    2013-12-12 14:42:01
    LESSCSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护。 LESSCSS可以在多种语言、环境中使用,包括浏览器...
  • LESS CSS学习

    2017-08-24 13:53:53
    LESS的存在主要用于解决CSS的问题,包括不方便维护扩展、不利于复用等,因为CSS是一门非程序式语言,没有变量、函数、作用域等概念,而LESSCSS语法的基础上,引入了变量、运算以及函数等功能,简化了CSS的编写,...
  • 让css动起来—-lesscss

    2012-02-27 12:09:32
    为什么今天要谈lesscss呢,因为首先css语言是静态的,而...css木有变量,但是lesscss有,css木有继承,但是lesscss有,lesscss甚至有函数,可以进行属性合并,重写,lesscss优点还有很多很多,提高代码的维护成本,减
  • less css 教程

    2015-12-24 14:41:18
    【兄弟连猿代码官网www.ydma.cn◆QQ:2824209146 ◆想学less css 教程就找“ 兄弟连猿代码”◆...如变量,函数和继承(但不像我们在其它编程语言里看见的传统的继承功能)在less里我们能够创建更加干净和高效的css,用
  • 它是一门CSS预处理,扩充了CSS语言,增加了变量、Mixin混合、函数特性等,使css更容易维护和扩展。它不是一种直接使用的语言,而是生成css的语言。less可以运行在node或者浏览器端。 (常见的css预编译器有三种:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,449
精华内容 579
关键字:

lesscss函数