精华内容
下载资源
问答
  • LESS详解之函数(七)

    千次阅读 2013-11-26 08:56:58
    之前已经为大家介绍了6次关于LESS自带函数这块的小知识了,今天依然为大家介绍LESS自带函数的相关知识。主要介绍一些关于判断函数,这期间还有些小例子以便大家更好的理解与运用。

      之前已经为大家介绍了6次关于LESS自带函数这块的小知识了,今天依然为大家介绍LESS自带函数的相关知识。主要介绍一些关于判断的函数,这期间还有些小例子以便大家更好的理解与运用。


      iscolor判断颜色(@colorOrAnything)


      这个函数是用来判断一个值是否是一个颜色。


      LESS代码

    @c : #666;
    
    .meng (@c) when (iscolor(@c)){
    	color: @c;
    }
    
    div {
    	height:20px;
    	.meng(@c)
    }

      编译后的CSS代码

    div {
      height: 20px;
      color: #666666;
    }
    

      isnumber判断数字(@numberOrAnything)


      这个函数是用来判断一个值是否是数字。这个值可以带单位也可以不带单位。


      LESS代码

    @n : 300px;
    @h : 20;
    
    .meng (@n) when (isnumber(@n)){
        width:@n;
    }
    .leng (@h) when (isnumber(@h)){
        height:@h;
    }
    
    div {
        .meng(@h);
        .meng(@n);
    }

      编译后的CSS代码

    div {
      width: 20;
      width: 300px;
    }
    

      isstring判断字符串(@stringOrAnything)


      LESS中也有字符串的类型,可以用这个函数来判断是否是字符串。


      LESS代码

    @n : "梦龙小站";
    
    .meng (@n) when (isstring(@n)){
    	content:@n;
    }
    div {
    	.meng(@n);
    }

      编译后的CSS代码

    div {
      content: "梦龙小站";
    }
    

      iskeyword判断关键字(@keywordOrAnything)


      判断一个值是否是关键字。这个暂时还没研究出来关键字是什么,所以没弄出个例子。有小伙伴儿知道的可以在下面评论哟。


      isurl判断地址(@urlOrAnything)


      判断一个值是否是url.这个暂时还没研究出来“url”怎么书写才能判断出来,所以没弄出个例子。有小伙伴儿知道的可以在下面评论哟。


      ispixel判断px为单位的数值(@pixelOrAnything)


      判断一个值是否是以px为单位的数值


      LESS代码

    @n : 30px;
    @h : 50em;
    
    .meng (@n) when (ispixel(@n)){
    	width:@n;
    }
    .long (@h) when (ispixel(@h)){
    	height:@h;
    }
    div {
    	.meng(@n);
    	.long(@h);
    }

      编译后的CSS代码

    div {
      width: 30px;
    }
    

      ispercentage判断百分数(@percentageOrAnything)


      判断一个值是否是百分数


      LESS代码

    @n : 50%;
    @h : 100em;
    
    .meng (@n) when (ispercentage(@n)){
    	width:@n;
    }
    .long (@h) when (ispercentage(@h)){
    	height:@h;
    }
    div {
    	.meng(@n);
    	.long(@h);
    }

      编译后的CSS代码

    div {
      width: 50%;
    }
    

      isem判断以em为单位的数值(@emOrAnything)


      判断一个值是否是以em为单位的数值


      LESS代码

    @n : 50%;
    @h : 100em;
    
    .meng (@n) when (isem(@n)){
    	width:@n;
    }
    .long (@h) when (isem(@h)){
    	height:@h;
    }
    div {
    	.meng(@n);
    	.long(@h);
    }

      编译后的CSS代码

    div {
      height: 100em;
    }
    

      isunit判断指定单位的数值(@numberOrAnything, "rem")


      判断一个值是否是指定单位的数值


      LESS代码

    @n : 50%;
    @h : 100em;
    
    .meng (@n) when (isunit(@n, "em")){
    	width:@n;
    }
    .long (@h) when (isunit(@h, "em")){
    	height:@h;
    }
    div {
    	.meng(@n);
    	.long(@h);
    }

      编译后的CSS代码

    div {
      height: 100em;
    }
    

      LESS详解之函数(七)就为大家介绍到这里了。这一波儿接着一波儿的LESS函数的介绍,能为大家有所帮助。感谢大家长期以来对梦龙小站的支持。


    展开全文
  • LESS详解之函数(五)

    千次阅读 2013-11-15 08:09:55
    之前已经为大家介绍了一些LESS函数,大家应该对之前介绍的有所了解了。下面为大家介绍一系列的颜色运算函数。依旧会为大家附上小例子。希望这些有关LESS函数能在大家编写LESS的时候有所帮助。

      之前已经为大家介绍了一些LESS函数,大家应该对之前介绍的有所了解了。下面为大家介绍一系列的颜色运算函数。依旧会为大家附上小例子。希望这些有关LESS的函数能在大家编写LESS的时候有所帮助。

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


      aturate饱和度增加 10%(@color, 10%)


      增加一定数值的颜色饱和度。参数:@color: 颜色对象 (A color object.),@amount: 百分比 0-100%。返回值:颜色 (color)。


      LESS代码

    div {
    	width:saturate(hsl(90, 90%, 50%), 10%);
    }

      编译后的CSS代码

    div {
      width: #80ff00;
    }
    

      desaturate饱和度降低 10%(@color, 10%)


      降低一定数值的颜色饱和度。参数:@color: 颜色对象 (A color object.);@amount: 百分比 0-100%。返回值:颜色 (color)


      LESS代码

    div {
    	width:desaturate(hsl(90, 90%, 50%), 10%);
    }

      编译后的CSS代码

    div {
      width: #80e51a;
    }
    

      lighten亮度增加 10%(@color, 10%)


      增加一定数值的颜色亮度。参数:@color: 颜色对象 (A color object.),@amount: 百分比 0-100%。返回值:颜色 (color)


      LESS代码

    div {
    	width:lighten(hsl(90, 90%, 50%), 10%);
    }

      编译后的CSS代码

    div {
      width: #99f53d;
    }
    

      darken亮度降低 10%(@color, 10%)


      降低一定数值的颜色亮度。参数:@color: 颜色对象 (A color object.),@amount: 百分比 0-100%。返回值:颜色 (color)


      LESS代码

    div {
    	width:darken(hsl(90, 90%, 50%), 10%);
    }

      编译后的CSS代码

    div {
      width: #66c20a;
    }
    

      fadein透明度增加 10%(@color, 10%)


      降低颜色的透明度(或增加不透明度),令其更不透明,对不透明的颜色无效。如果要增加颜色的透明度,使用 fadeout() 函数。参数:@color: 颜色对象 (A color object.),@amount: 百分比 0-100%。返回值:颜色 (color)


      LESS代码

    div {
    	width:fadein(hsla(90, 90%, 50%, 0.5), 10%);
    }

      编译后的CSS代码

    div {
      width: rgba(128, 242, 13, 0.6);
    }
    

      fadeout透明度降低 10%(@color, 10%)


      增加颜色的透明度(或降低不透明度),令其更透明,对不透明的颜色无效。如果要增加颜色的透明度,使用 fadein() 函数。参数:@color: 颜色对象 (A color object.),@amount: 百分比 0-100%。返回值:颜色 (color)


      LESS代码

    div {
    	width:fadeout(hsla(90, 90%, 50%, 0.5), 10%);
    }

      编译后的CSS代码

    div {
      width: rgba(128, 242, 13, 0.4);
    }
    

      fade设定透明度为 50%(@color, 50%)


      给颜色(包括不透明的颜色)设定一定数值的透明度。参数:@color: 颜色对象 (A color object.),@amount: 百分比 0-100%。返回值:颜色 (color)


      LESS代码

    div {
    	width:fade(hsl(90, 90%, 50%), 10%);
    }

      编译后的CSS代码

    div {
      width: rgba(128, 242, 13, 0.1);
    }
    

      spin色相值增加 10(@color, 10)


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

    div {
    	width:saturate(spin(#aaaaaa, 10), 10%);
    }

      而应该用这种方法代替(LESS代码):

    div {
    	width:spin(saturate(#aaaaaa, 10%), 10);
    }

      因为颜色值永远输出为 RGB 格式,因此 spin() 函数对灰色无效。参数:@color: 颜色对象 (A color object.),@angle: 任意数字表示角度 (+ 或 – 表示方向)

      返回值:颜色 (color)


      LESS代码

    div {
    	width:spin(hsl(10, 90%, 50%), 20);
    	height:spin(hsl(10, 90%, 50%), -20);
    }

      编译后的CSS代码

    div {
      width: #f27f0d;
      height: #f20d33;
    }
    

      mix混合两种颜色(@color1, @color2, [@weight: 50%])


      根据比例混合两种颜色,包括计算不透明度。参数:@color1: 颜色对象 (A color object.),@color2: 颜色对象 (A color object.),@weight: 可选项:平衡两种颜色的百分比, 默认 50%。返回值:颜色 (color)


      LESS代码

     div {
    	width:mix(#ff0000, #0000ff, 50%);
    	height:mix(rgba(100,0,0,1.0), rgba(0,100,0,0.5), 50%);
    }

      编译后的CSS代码

    div {
      width: #800080;
      height: rgba(75, 25, 0, 0.75);
    }
    

      greyscale完全移除饱和度输出灰色(@color)


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


      LESS代码

     div {
    	width:greyscale(hsl(90, 90%, 50%));
    }

      编译后的CSS代码

    div {
      width: #808080;
    }
    

      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)


      LESS代码

     div {
    	width:contrast(#aaaaaa);
    	height:contrast(#222222, #101010);
    	padding:contrast(#222222, #101010, #dddddd);
    	color:contrast(hsl(90, 100%, 50%),#000000,#ffffff,40%);
    	background-color:contrast(hsl(90, 100%, 50%),#000000,#ffffff,60%);
    }

      编译后的CSS代码

    div {
      width: #000000;
      height: #ffffff;
      padding: #dddddd;
      color: #000000;
      background-color: #000000;
    }
    


      LESS详解之函数(四)就为大家介绍到这里了,这只是LESS函数中的一小部分。后面的几天将为大家一波儿接着一波儿的介绍LESS详解之函数。希望这一波儿一波儿的介绍LESS详解之函数能为大家有所帮助。

    展开全文
  • Less 函数用法

    千次阅读 2018-06-07 10:50:27
    escape(@string); // 通过 URL-encoding 编码字符串  e(@string); // 对字符串转义  %(@string, values…); // 格式化字符串  unit(@dimension, [@unit: “”]);...含*号的函数只在1.4.0 beta以上版本中可用
    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以上版本中可用
    展开全文
  • Less常用函数集合

    2018-06-04 10:53:32
    含*号的函数只在1.4.0 beta以上版本中可用 escape(@string); // 通过 URL-encoding 编码字符串 e(@string); // 对字符串转义 %(@string, values...); // 格式化字符串 unit(@dimension, [@unit: ""]); ...

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

    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"); // * 判断一个值是否是指定单位的数值

    http://www.1024i.com/demo/less/reference.html

    展开全文
  • LESS 函数方法

    千次阅读 2018-04-22 15:22:17
    判断类型 (Type) 颜色定义 (Color Definition) 颜色操作 颜色混合 混合 (misc) // 字符转颜色 color("#CCC") //返回图像尺寸(示例尺寸100*50) image-size("file.jpg"); // =&...
  • LESS CSS 函数手册

    千次阅读 2013-11-24 23:56:02
    代码时不应该依赖这个特性,而且这个特性在未来有可能改变。 e 用于对CSS的转义,与 ~ "value" 类似。它接受一个字符串作为参数,并原样返回内容(不含引号)。它可用于输出一些不合法的CSS语法,或者是...
  • Less-条件判断

    千次阅读 2019-10-06 17:38:47
    less中可以通过when给混合添加执行...= =)、逻辑运算符、或检查函数来进条件判断 (),()相当于JS中的|| /* 当下边 div 中 .size 传入的第一个参数是100px或者第二个参数是100px才会执行*/ .size(@width,@height) w...
  • less函数执行的条件语句写法

    千次阅读 2019-03-23 09:36:36
    条件语句的条件如果命中多个,都执行,但只渲染最后一个 -------------------------------------------------------------------------------------------------------------------------------------------- ...
  • less

    万次阅读 2021-01-15 08:21:52
    less less可以说是动态化的css语言,主要是因为他的代码可以复用 less的使用: 在全局npm 安装less ,并执行lessc less文件路径 编译完成后的css路径,然后把编译后的css文件引入到html就可以了 bootCDN搜索less,...
  • 文章目录函数(Functions)注释(Comments)导入(Importing) 函数(Functions) 因为函数实在太多了,一个一个出来还记不住,没得多大意义,这里...(1) 逻辑判断函数 if() index.less代码 >>> @width:0px;
  • 从1.4.0版本开始,less添加了一个很好用的内置函数:data-uri。这个函数可以自动将less代码中引用的图片进行base64编码。比如我们要引用一个小图片作为背景,我们可以这样: .foo-icon { background: data-uri...
  • 11_less中的条件判断

    2020-12-06 00:38:03
    = =),逻辑运算符,或检查函数来进行条件判断 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="renderer" content="webkit"> .
  • stl::map的比较函数(less, <)

    千次阅读 2010-03-17 19:53:00
    stl的map很好用,其原型是:template class Key, class T, class Compare = less, class Allocator = allocatorconst Key,T> > ...但如果key是自定义类型,仍想使用map,则必须自行为map提供less函数。比如:struct stu{
  • 不多说,直接上代码,注释都在代码里清清楚楚 less @sizeMan:100%; //关键帧动画函数 .keyframes(@name:move,@content){ // @name:动画名,@content:动画内容 @keyframes @name {@content();} } ...
  • less语法详解

    万次阅读 2017-06-11 15:06:06
    而且我还要思考怎样出组织良好且易于维护的CSS代码。与JavaScript,java等语言不同的是,CSS是一门非程序设计语言,没有变量、函数、作用域等概念。所以这对习惯了OOP思想的我来说,看似没有逻辑的代码意味着繁重...
  • 目录目录 软件环境 file文件对象 open文件操作 ...文件 write writelines写入多行内容 write和writelines的区别 将标准输出重定向写入到指定文件 文件指针 tell获取当前文件指针位置 truncate截断文件 se
  • 函数原型为: tf.less(x, y, name=None) x, y 有相同的shape,并且有相同的数据类型。 x, y 中的元素按照对应位置做比较,如果 x 中某元素小于 y 中对应元素,返回 True; 否则,返回 False。 tf.less 返回值类型为...
  • Less的条件表达式Guards

    千次阅读 2017-11-21 16:55:24
    Less的条件表达式 ...为了尽可能地接近CSS的语言结构,Less使用关键字 when 而不是 if/else来实现条件判断,因为 when 已经在CSS的 @media query 特性中被定义。 表达式中可以使用比较运算符、逻辑运算符、或检查函
  • less 使用指南

    千次阅读 2018-01-08 15:49:43
    参考文档: less 中文网 less 快速入门 less 指南 ...Less is More, Than CSS - 少即是多,比如CSS。...Less 是一门 CSS 预处理语言。...Less 是一种由Alexis ...LESS是开源的,其第一个版本由Ruby成,但在后续的版
  • Less 常用语法

    2019-02-22 15:20:58
    less 和 sass 是两种 css 预编译语言,其目的是为了更快、更结构的编写 css 文件,是一种强大的 css 编译语言,能使用 变量、运算符、判断、方法等等。 本文我只一些自己常用的方法,要看全部的帮助文档,参阅...
  • less快速学习

    2020-07-31 15:23:29
    less 学习 看到 less 老是想起 less is more 这句话,这门语言的确是把原来很繁琐的 css 给包装成一门类似于编程语言的语言,感觉看视频只能学习到一点,关键还是看官方文档 less 是一个 css 扩展,让 css 变成...
  • less的基本用法

    万次阅读 2021-01-11 07:56:20
    less less可以说是动态化的css语言,主要是因为他的代码可以复用 less的使用: 在全局npm 安装less ,并执行lessc less文件路径 编译完成后的css路径,然后把编译后的css文件引入到html就可以了 bootCDN搜索less,...
  • less循环操作

    2020-08-19 13:18:04
    less循环与js的while语句横向式,其实就是一个递归函数配合when函数一起使用,当满足条件将会停下来 .loop(@counter) when (@counter > 0) { width: (10px * @counter); // 一些属性的设置 .loop(@counter - 1) ...
  • Less语言特性

    千次阅读 2016-03-22 18:31:22
    Less函数手册作为CSS的一种扩展,LESSCSS不仅向下兼容CSS的语法,而且连新增的特性也是使用CSS的语法。这样的设计使得学习LESS很轻松,而且你可以在任何时候回退到CSS。Content : 1. 变量 2. 混合(Mixins) 3. ...
  • Less的引用

    千次阅读 2015-10-05 13:17:56
    Less语法介绍 body { background-color: #eee; } 引入Less语法: <link rel="stylesheet/less" type="text/css" href="styles.less"> <script src="less.js" type="text/javascript"></script> 说明: less.js...
  • less学习的一些笔记

    万次阅读 2019-08-02 14:54:39
    less学习的一些笔记Less语法规范设置变量混合带参数的混合模式匹配导引表达式嵌套规则运算函数Math函数命名空间作用域importing(导入)字符串插值避免编译JavaScript表达式Other Explaination对于npm一些命令使用 ...
  • 通过开源文档学LESS系列3

    千次阅读 2014-02-07 20:29:03
    通过开源文档学LESS系列2,通过tRRtoolbelt.less的代码解读来学习LESS,主要讲解了LESS中的命名空间、作用域、多条件判断和类型判断函数、字符串插值和避免编译。 本教程通过解读css effects项目源码来继续学习LESS...
  • less动态类名匹配

    千次阅读 2020-05-11 00:17:04
    如果项目中有很多margin或者padding样式,并且值都不一样,那在less中定义公共的类名样式,再重复使用也很麻烦,这个时候一个动态类名和动态的样式值就很好用。 less本身没有循环的语法,但是函数可以递归来调用...
  • Less和SASS

    2018-08-22 20:52:53
    less中我们可以通过条件判断实现渲染不同的样式,有点像switch,不是通过if实现的,而是when实现的 在when方法中添加条件时,不需要单位 当判断相等时,使用等号(=)实现,没有(== 和 ===) 判断多个条件时,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 48,575
精华内容 19,430
关键字:

less写判断函数