-
Less类似于Jquery,是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。查看全部
-
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 但它们不冲突查看全部
-
/**/会被编译 //不会被编译查看全部
-
运算：支持 +、-、*、/ 不知道大家做没做测试，我在做测试中发现了一个问题，就是当直接与变量做减法时，错误还原（@border-width-5）,当我此时在写这个的时候，我已经发现错误的原因了，我在变量名中用了一个中划线，那与减法是一样的...其实是没有任何问题的！ 解决中划线与减法的冲突：可以为变量加一个括号（(@border-width)-5）；也可以加空格（@border-width - 5），加空格要在减号左右都加，否则不会进行运算！查看全部
-
less中想声明变量一定要用@开头 例如：@变量名：值;查看全部
-
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文件里看是看不到的)查看全部
-
其实说白了就是编程语言常说的函数或者方法调用。 .triangle(right,@w:5px,@c:#ccc){ border-width: @w; border-color: transparent transparent transparent @c; border-style: dashed dashed dashed solid; } .triangle就相当于是一个“方法”或者说“函数”。 .sanjiao{ .triangle(bottom,100px); } @w、@c是形式参数； @w:5px,@c:#ccc这是对参数的初始化； 在.sanjiao中调用.triangle方法。 bottom,100px则是实际参数。 被C语言骗了好多年，原来编程界全是相通的啊！！！查看全部
-
/Users/zhaojk/Desktop/Box_Less/Style/global.less /bin/sh: lessc: command not found Koala 这个错误怎么解决哈？查看全部
-
less匹配模式
.triangle(top,@w:10px,@c:red) { border-width: @w; border-color: transparent transparent @color transparent; border-style: dashed dashed solid dashed; }//箭头向上的三角形
.triangle(right,@w:10px,@c:red) { border-width: @w; border-color: transparent @color transparent transparent; border-style: dashed solid dashed dashed; } //箭头向右的三角形
.triangle(bottom,@w:10px,@c:red) { border-width: @w; border-color: @color transparent transparent transparent; border-style: solid dashed dashed dashed; }//箭头向下的三角形
.triangle(left,@w:10px,@c:red) { border-width: @w; border-color: transparent transparent transparent @color; border-style: dashed dashed dashed solid; } .triangle(@_,@w:10px,@color:red) { width: 0px; height: 0px; overflow: hidden; } //箭头向左的三角形
.triangle(@_,@w,@c) {width:0;height:0;}//默认属性
div { .triangle(left); }
查看全部 -
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Less</title>
</head>
<body>
<style type="text/css">
.sanjiao{
width:0;
height:0;
background: ;
overflow:hidden;
border-width:10px;
border-color:transparent transparent red transparent;
border-style: dashed dashed solid dashed;
}
transparent是透明色;
dashed 是虚线;
</style>
<p>Less is More ,Than css -少即是多，比css</p>
<p>LESS 类似于Jquery，编译工具Koala编译，先设置成中文关掉重新打开， Draemwi或者sublime 1.先新建目录，多建一个main.less 2.在main.less写一个文件头：@charset"utf-8"然后保存。 3.index.html里面还是引main.css文件。 4.只用在main.less里面写则main.css里面就有。 5.LESS里面可以使用css里面的注释/* 我是被编译的 就是css文件里面有） */ //是不会被编译的（就是css文件里面没有）
</p>
<p>变量</p>
在LEss里面定义变量用@ 变量名：值；
<br /> @tes_width:300px; .box{ width:@tes_width; height:@tes_width; }
<br />
<div>
<p>混合</p>
@tes_width:300px; .box{ width:@tes_width; height:@tes_width; .border;}
<br /> .border{border:1px solid #fr2}
.box2{
.box;(即拥有box的属性)
margin-left:2px;
}
<p>混合-可带参数</p>
.border_02(@border_width){
border:solid yellow @border_width;
}
.test_hunhe{
.border_02(30px);
}
<p>混合-默认带值</p>
.border_03(@border_width：10px){
border:solid yellow @border_width;
}
.test_hunhe_03{
.border_03();或者
.border_03(30px);(30px可填可不填)
}
<p>混合例子</p>
.border_radius(@radius:5px){
-webkit-border-radius:@radius;
-moz-border-radius:@radius;
border-radius:@radius;
}
.test_radius{
width:400px;
height:200px;
.border_radius(4px);或者.border_radius();
}
<p>匹配模式</p>
.sanjiao{
width:0;
height:0;
overflow:hidden;
border-width:10px;
border-color:transparent transparent red transparent;
border-style: dashed dashed solid dashed;
}
<div class="sanjiao">
</div>
<p>匹配模式</p>
.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: dashed dashed solid dashed;
}
.triangle(left,@w:5px,@c:#ccc){
border-width:@w;
border-color:transparent @c transparent transparent;
border-style: dashed dashed solid dashed;
}
.triangle(right,@w:5px,@c:#ccc){
border-width:@w;
border-color:transparent transparent transparent @c;
border-style: dashed dashed solid dashed;
}
.triangle(@_,@w:5px,@c:#ccc){
width:0px;
height:0px;
overflow:hidden;
}
现在就可以这么写：
.sanjiao{
.triangle(bottom,100px);
}
</div>
</body>
</html>
查看全部 -
/**/会被编译 //不会被编译查看全部
-
清除浮动 .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得位置保持一致查看全部
-
宣传宣传宣传查看全部
-
避免编译 ~'....' ~"...." 如: width:～'calc(300px-30)'; 那么此时calc(300px-30)就不会由less编译 即: ～'代码';那么此时的代码就不会编译了查看全部
-
？！！！！查看全部
举报