为了账号安全,请及时绑定邮箱和手机立即绑定

less即学即用

Busy Web前端工程师
难度初级
时长 1小时29分
学习人数
综合评分9.63
196人评价 查看评价
9.9 内容实用
9.6 简洁易懂
9.4 逻辑清晰
  • @arguments用的不是特别多。如果传入的参数需要同时变化的时候,可以使用它,会比较便捷。 @arguments包含了所有传递进来的参数 如果你不想单独处理每一个参数的话就可以像这样写: .border_arg(@w:30px,@c:red,@xx:solid){ border:@arguments; //@arguments可以把你所传的所有的变量直接带过来,在这里@arguments,就等于border:@w @c @xx;是一个意思 }
    查看全部
    0 采集 收起 来源:@arguments变量

    2015-08-04

  • less嵌套规则 嵌套越多,匹配次数越多次,所以尽量少嵌套。 .list{ .... li{ .... } a{ &:hover{ color:red } // & 代表上一层选择器,这里的上一层选择器是a } }
    查看全部
    0 采集 收起 来源:嵌套规则

    2018-03-22

  • Less-运算 -任何数字、颜色或者变量都可以参与运算,运算应该被包裹在括号中 例如:加减乘除 @test_01:300px; .box_02{ width:(@test_01-200)*5; //因为上面@test_01带了单位px,所以这里的200就不需要带单位了 color:#ccc-20; //less会把颜色转为255,然后进行加减乘除,实际工作中颜色运算很少用 }
    查看全部
    0 采集 收起 来源:运算

    2015-08-04

  • Less-匹配模式 -相当于JS中的if,但不完全是 -满足条件后才能匹配 .sanjiao{ width:0; height:0; overflow:hidden; //这行用来处理IE6最小高度的问题 border-width:10px; border-color:red transparent transparent transparent; border-style:solid dashed dashed dashed; //因为border-style:solid;这样写在IE6会有黑底 } //这样就实现了一个红色倒三角 .triangle(top,@w:5px,@c:#ccc){ border-width:@w; border-color:transparent transparent,@c,transparent; border-style:dashed dashed solid dashed; .triangle(bottom,@w:5px,@c:#ccc){ border-width:@w; border-color:@c transparent transparent transparent; border-style:solid dashed dashed dashed; } .triangle(@_,@w:5px,@c:#ccc){ width:0; height:0; overflow:hidden; } .sanjiao{ .triangle(bottom,100px); } 匹配模式-定位例子 .pos(r){ position:relative; } .pos(a){ position:absolute; } .pos(f){ position:fixed; } .pipei{ width:100px; height:100px; .pos(r); }
    查看全部
    0 采集 收起 来源:匹配模式

    2015-08-04

  • Less 混合:一个元素引用另一个元素的样式 1、混合变量 例如:.border{border:solid 10px red;} 如果.div也想用这个样式直接写: .div{ .border } 可带参数 2.变量没带值: .border-radius(@radius){css代码} .border_02(@border_width){ border:solid yellow @border_width; } .test_hunhe{ .border_02(30px); } 3.变量带(默认)值:.border-radius(@radius:5px){css代码} .border_03(@border_width:10px){ border:solid green @border_width; } .test_hunhe_03{ .border_03(); } 另外,虽然.border-02 和.border-03里面的变量都叫@border-width 但它们不冲突
    查看全部
    0 采集 收起 来源:混合

    2015-08-04

  • less中想声明变量一定要用@开头 例如:@变量名:值;
    查看全部
    0 采集 收起 来源:变量

    2015-08-04

  • Less中的注释 /**/可以被编译 //不可以被编译
    查看全部
    0 采集 收起 来源:Less中的注释

    2015-08-03

  • Less类似于jquery,是一个库。 是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护。
    查看全部
  • GMS
    三角修复:border-style: dashed;
    查看全部
    0 采集 收起 来源:匹配模式

    2015-07-29

  • /**/可以被编译 //不可以被编译
    查看全部
    0 采集 收起 来源:Less中的注释

    2015-07-24

  • 三角号,原来朝下的话就是上面的颜色是有的,其他是没有的……兼容ie6的话呢就是把其它的边设置为dashed .round{ width: 0; height: 0; overflow: hidden; border-style: dashed solid dashed dashed; border-width: 10px; border-color: transparent red transparent transparent; }
    查看全部
    0 采集 收起 来源:匹配模式

    2015-07-22

  • 使用lessphp直接调用less生成css这样网站维护更方便。
    查看全部
  • 避免编译:~''
    查看全部
  • 避免编译:~''
    查看全部
  • &代表他的上一层选择器
    查看全部
    0 采集 收起 来源:嵌套规则

    2018-03-22

举报

0/150
提交
取消
课程须知
基础的HTML、CSS知识,最好能有一些基础的前端开发经验。
老师告诉你能学到什么?
教程中介绍less作为css预处理语言的功能和特性,以及less的编译工具、变量的概念以及用法、如何使用嵌套写法来编写层叠样式、自带的函数以及用法,比如color函数、Math函数、讲解less如何编写不被编译的内容,以及在less中如何使用JavaScript表达式等等。

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!