发表于: 2016-04-28 00:26:38

2 1452


今天完成的事情:这几天学习了less的用法,task12写了差不多70%了,明天应该能够写完。

明天计划的事情:完成task12

遇到的问题:暂无

收获:总结写这两天学习less的一些基本知识点

1、less中的注释有两种:

    “/**注释**/”   这种注释和css里的一样,编译后会出现在css里面。

    “//注释”         这种注释和js等其他编程语言的一样,编译后不会出现在css里面。

2、变量:用“@”来定义变量,基本格式为:  @变量名:值

     例如:    @width:300px;

3、混合:将通用样式先设置好,需要引用时再放入相应元素中。

     如:定义     引用:   

            编译为:

4、带参数的混合:定义less样式时可以为其附带参数。

      如:

    编译为:

5、匹配模式:类似于js中的if语句,引用中的匹配词与定义的匹配词相同则编译为相应的样式。

    如:

    引用:

    编译为:

6、运算:less中任何数字、颜色或者变量都可以参与运算,与数学运算法则相同。

    如:定义变量@test:200px;           引用:.box{ width:@test+20; }    编译为:.box{ width:220px; }

7、嵌套规则:在less中编写样式时,可以直接在父元素中编写子元素的样式。

    如:

    less样式:

    编译为:

8、@arguments变量:包含了所有传递进来的参数:

    如:定义    .border_arg(@w:30px,@c:red,@xx:solid){ border:@arguments; }    引用: .test{ .border_arg(); }

          编译为: .test{ border: 30px red solid; }

9、避免编译:有时候我们不需要less编译我们编写的样式时,可以在字符串前加“~”并用单引号或双引号包起来。

    如:less代码为:    .test{ width: ~“calc(300px-30px)”; }

           编译为:  .test{ width: calc(300px-30px); }

10、css画小三角兼容方法:

    .sanjiao {

    width: 0;

    height: 0;

    overflow: hidden;/**处理IE6的最小高度问题**/

    border-width: 10px;

    border-color: transparent transparent transparent red;/**需要朝向那边就在其对面加颜色**/

    border-style: dashed dashed dashed solid;/**对应有颜色的边为solid,其他为dashed是处理IE6黑边问题**/

}


返回列表 返回列表
评论

    分享到