Less是什么?
1.Less类似于jQuery( css中的jQuery )
LessCss是一种动态样式语言,属于css预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护。
LessCss可以再多种语言、环境中使用,包括浏览器端、桌面客户端、服务端。
本质上,LESS 包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成对应的 CSS 文件.
这里用 sublime编辑器+koala编译工具
新建main.less,输入 @charset"utf-8"; 保存。
将项目文件(这里命名为Less,其中包括img与style文件夹),托到koala中,执行编译。
它将自动生成main.css文件,在sublime中打开,(准备完成)
Less中的注释:
/*我是被编译的*/ (显示在css中)
//我是不被编译的 (不显示)
内容:变量、混合、匹配模式、运算 嵌套规则、@arguments变量、避免编译、!important关键字
1.变量
@width:30px;
2.混合
<span style="font-family:Microsoft YaHei;">@test_width:300px;
.box{
width:@test_width;
height:@test_width;
background-color:yellow; //2.混合
.border;
} //混合
.border{
border:solid 5px pink;
}</span>
3.混合 - 可带参数的(必填)
<span style="font-family:Microsoft YaHei;">.border_02(@border_width){
border:solid yellow @border_width;
}
.test_hunhe{
.border_02(30px);
}</span>
4.混合 — 默认带值
<span style="font-family:Microsoft YaHei;">.border_03(@border_width:10px){
border:solid green @border_width;
}
.test_hunhe_03{
.border_03(20px);
}</span>
5.匹配模式 (@_ :无论选谁都必须带上我 )
<span style="font-family:Microsoft YaHei;">.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(left,@w:5px,@c:#ccc){
border-width: @w;
border-color: transparent @c transparent transparent;
border-style: dashed solid dashed dashed;
}
.triangle(right,@w:5px,@c:#ccc){
border-width: @w;
border-color: transparent transparent transparent @c;
border-style: dashed dashed dashed solid;
}
// @_ : 无论上面选谁,都必须带上我
.triangle(@_,@w: 5px,@c: #ccc){
width: 0;
height: 0;
overflow: hidden;
}
.sanjiao{
.triangle(right,100px);
}</span>
6.匹配模式的定位
<span style="font-family:Microsoft YaHei;">.pos(r){
position: relative;
}
.pos(a){
position: absolute;
}
.pos(f){
position: fixed;
}
.pipei{
width: 200px;
height: 200px;
background-color:green;
.pos(r);
}</span>
7.运算
<span style="font-family:Microsoft YaHei;">@test_01:300px;
.box_02{
width:@test_01 + 20;
color:#ccc - 10;
}</span>
8.嵌套规则 (& : 代表上一层选择器)
<span style="font-family:Microsoft YaHei;">.list{
width:600px;
li{
height:30px;
}
a{
float: left;
//& 代表上一层选择器
&:hover{
color:red;
}
}
span{
float:right;
}
}</span>
9. @arguments变量
<span style="font-family:Microsoft YaHei;">.border-arg(@w:30px,@c:red,@xx:solid){
border:@arguments; //带上了所有默认值
}
.test_arguments{
.border-arg(40px); //更改了第一个变量的值
}</span>
10.避免编译
1. 有时候我们需要输出一些不正确的css语法或者使用一些LESS不认识的专有语法。
2. 要输出这样的值我们可以在字符串前加上一个 ~
例如: width:~''
<span style="font-family:Microsoft YaHei;">.test_03{
height:calc(300px-30px); //返回 270px width:~'calc(300px-30px)'; //返回 300px-30px
}</span>
11. !important关键字
.test_important{ .border_03()!important;}
小技巧总结:
@_ : 无论选谁都必须带上我
& :代表上一层选择器
@arguments : 可变参(代表所有)
~‘’: 避免编译
自己感觉less还是很好用的,方便了css结构的编写,推荐哟。
想了解更多,访问http://lesscss.net