发表于: 2016-04-28 00:26:38
2 1449
今天完成的事情:这几天学习了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黑边问题**/
}
评论