-
@arguments用的不是特别多。如果传入的参数需要同时变化的时候,可以使用它,会比较便捷。 @arguments包含了所有传递进来的参数 如果你不想单独处理每一个参数的话就可以像这样写: .border_arg(@w:30px,@c:red,@xx:solid){ border:@arguments; //@arguments可以把你所传的所有的变量直接带过来,在这里@arguments,就等于border:@w @c @xx;是一个意思 }查看全部
-
less嵌套规则 嵌套越多,匹配次数越多次,所以尽量少嵌套。 .list{ .... li{ .... } a{ &:hover{ color:red } // & 代表上一层选择器,这里的上一层选择器是a } }查看全部
-
Less-运算 -任何数字、颜色或者变量都可以参与运算,运算应该被包裹在括号中 例如:加减乘除 @test_01:300px; .box_02{ width:(@test_01-200)*5; //因为上面@test_01带了单位px,所以这里的200就不需要带单位了 color:#ccc-20; //less会把颜色转为255,然后进行加减乘除,实际工作中颜色运算很少用 }查看全部
-
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); }查看全部
-
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中想声明变量一定要用@开头 例如:@变量名:值;查看全部
-
Less中的注释 /**/可以被编译 //不可以被编译查看全部
-
Less类似于jquery,是一个库。 是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护。查看全部
-
三角修复:border-style: dashed;查看全部
-
/**/可以被编译 //不可以被编译查看全部
-
三角号,原来朝下的话就是上面的颜色是有的,其他是没有的……兼容ie6的话呢就是把其它的边设置为dashed .round{ width: 0; height: 0; overflow: hidden; border-style: dashed solid dashed dashed; border-width: 10px; border-color: transparent red transparent transparent; }查看全部
-
使用lessphp直接调用less生成css这样网站维护更方便。查看全部
-
避免编译:~''查看全部
-
避免编译:~''查看全部
-
&代表他的上一层选择器查看全部
举报
0/150
提交
取消