-
1、Less-避免编译 -有时候我们需要输出一些不正确的CSS语法或者使用一些less不认识的专有语法 -要输出这样的值我们可以在字符串前加上~ 例如：.test_03{ width:~calc(300px-30px)';//（原封不动的输出，避免编译） //对于滤镜等less不认识的语法，避免报错。 } //用双引号也可 2、!important关键字 -会为所有混合所带来的样式，添加上!important !important拥有样式的最高优先级一般调试的时候才会用 更多less网址：lesscss.net 总结： 1、编译工具 (1)koala编译(推荐使用--是国人开发的LESS/SASS编译工具) (2)Node.js库 (3)浏览器端使用 2、Less中的注释 -可以使用CSS中的注释( /**/ ) -也可以用//注释 //编译时会自动过滤掉(即如果在less里写的是//注释，在转到css文件里看是看不到的)查看全部
-
less文件引入另一个less @import "ku";less文件引入css文件@import(less) "a.css"查看全部
-
Less简介查看全部
-
http://koala-app.com/index-zh.html查看全部
-
http://koala-app.com查看全部
-
less中声明变量：@变量名:值; 变量的使用： div{ width:@变量名; }查看全部
-
不能用red-300查看全部
-
1、Less-避免编译 -有时候我们需要输出一些不正确的CSS语法或者使用一些less不认识的专有语法 -要输出这样的值我们可以在字符串前加上~ 例如：.test_03{ width:~calc(300px-30px)';//（原封不动的输出，避免编译） //对于滤镜等less不认识的语法，避免报错。 } //用双引号也可 2、!important关键字 -会为所有混合所带来的样式，添加上!important !important拥有样式的最高优先级一般调试的时候才会用 更多less网址：lesscss.net 总结： 1、编译工具 (1)koala编译(推荐使用--是国人开发的LESS/SASS编译工具) (2)Node.js库 (3)浏览器端使用 2、Less中的注释 -可以使用CSS中的注释( /**/ ) -也可以用//注释 //编译时会自动过滤掉(即如果在less里写的是//注释，在转到css文件里看是看不到的)查看全部
-
@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 } } css选择器的子选择器越多，即嵌套越多，匹配次数越多次，加载性能会越低下，所以尽量少嵌套。查看全部
-
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 但它们不冲突查看全部
-
1.less中声明变量用@开头 写法是 @变量名:值; 例如：@test_width:300px; 2.sublime 里要装less这个插件，才能高亮显示代码 3.语法错误是保存过less文件，koala才会提醒查看全部
-
@_ 不管匹配到谁，都要带上@_里的内容查看全部
举报
0/150
提交
取消