-
@arguments 变量查看全部
-
&代表上一层选择器查看全部
-
嵌套规则查看全部
-
less中声明变量方法查看全部
-
less中声明变量用@开头，例如：@变量名：值查看全部
-
/*我是被编译的*/ 在css中可以看到的注释 //我是不被编译的 在css中看不到的注释查看全部
-
清除浮动 .clearfix:after{ content:""; display:block; clear:both; } .clearfix{ zoom:1; } 可用@import “xx”的方式导入less(可应用于导入变量的情景，less为后缀的文件可以省略后缀) 导入css时: @import "xxx.css",用这种方法，该css不会被编译出来 到入css并且编译出来:@import (less) "xxx.css"（(less)和xxx.css之间应该有空格），该@import语句放在less文件中的位置跟编译出css得位置保持一致查看全部
-
避免编译： 语法：~'',适用场景：不需要Less帮你完成编译的，如calc() .box { width: ~'cacl(300px - 30px)' ; } !important 优先级最高，一般调试的时候用查看全部
-
@arguments的使用方法: .border-arg(@w:30px,@c:red,@xx:solid){ border:@arguments;//等价于 border : @w @c @ xx ; } 那么此时这个@arguments就会将所有的参数全部代入 .test_arg { .border-arg(); //不传值， .border-arg(40px); //传值更改了宽度 } @arguments 使用不多，作为了解查看全部
-
//嵌套 .list { width: 600px ; margin: 30px auto ; padding: 0; list-style: none ; li { height: 30px ; line-height:30px ; margin-bottom: 5px ; padding: 0 10px; } a { float: left ; //&代表所有的父选择器（而不只是最近的长辈） &:hover{ color: red ; } } span { float: right ; } } 只要html页面中的布局布置好，样式文件里面， li , a , span 写成平级的，可以减少嵌套层次，省了很多事查看全部
-
@val:300px; .box{ width: @val + 20;/*less没有强制要求必须加单位，只要有一个有单位即可*/ height: (@val - 20) * 5; color: #ccc - 10 ;/*less会把颜色转成 255 的数值，然后进行计算，输出颜色值对应的颜色，工作中很少用到*/ }查看全部
-
//匹配模式－定位 .pos(r){ position: relative ; } .pos(a){ position: absolute ; } .pos(f){ position: fixed ; } .pipei{ width: 200px ; height: 200px ; .pos(f) ; }查看全部
-
.sanjiao{ width: 0; height: 0; overflow: hidden; border-width: 10px; border-style: dashed dashed solid dashed;/*兼容IE6*/ border-color: transparent transparent red transparent; } //匹配模式 .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 ; } .sanjiao{ .triangle( left , 100px ); }查看全部
-
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 但它们不冲突查看全部
-
less中声明变量用@开头，例如：@变量名：值查看全部
举报
0/150
提交
取消