推荐工具
koala 是一个前端预处理器语言图形编译工具,支持Less、Sass、Compass、CoffeeScript,帮助web开发者更高效地使用它们进行开发。跨平台运行,完美兼容windows、linux、mac。
/* 是被编译的注释 */
// 是不被编译的注释
less中声明变量,
要用@开头,例如:@变量名:值
@test_width: 300px;
.classname{
width:@test_width;
}
混合
- 基础混合
aborder{ //引用时不带括号 值
border:solid 5px pink;
}
.classname01{
width:@test_width;
.aborder;
}
.classname02{
.classname01;
margin-left:10px;
}
- 混合-可带参数
.border_02(@border_width){
border:solid yellow @border_width;
}
.test_hunhe{
.border_02(30px);
}
- 混合-默认带值
.border_03(@border_width:10px){
border:solid green @border_width;
}
.test_hunhe_03{
border_03();
}
// 混合的例子
border_radius(@radius:5px){
-webkit-border-radius:@radius;
-moz-border-radius:@radius;
border-radius:@radius;
}
radius_tes{
width:100px;
height:100px;
border_radius();
}
匹配模式
匹配模式- 小三角标实例
.triangle(top,@w:5px,@c:#ccc){ //三角向上
border-width: @w;
border-color: transparent transparent @c transparent;
border-style: dashed dashed solid dashed;
}
.triangle(buttom,@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(left,36px);
}
匹配模式- 定位实例
.pos(a){
position: absolute;
}
.pos(r){
position: relative;
}
.pos(f){
position: flex:
}
.prepre{
width:200px;
height:200px;
background-color:green;
.pos(a);
}
运算
任何数字,颜色或者变量都可以参与运算,运算应该被包裹在括号中
@test_width:300px;
@test_hight:200px;
.box{
width:@test_width + 30 //宽度加 30 像素
height:(@test_hight-40)*7 // 先减去40,在乘7倍
color:#ccc - 10;
}
嵌套规则
&
对尾类使用hover
或focus
对链接的使用&
a{
color:#eee;
&:hover{
cool: red;
}
}
变量 @arguments
@arguments
包含了所有传递进来的参数
.border_reg(@w:30px,@c:red,@ll:solid){
border: @arguments
}
test_arguments{
.border_reg(68px);
}
避免编译
有时候需要输出一些不正确的css 语法或者使用一些less 不认识的专有语法,在字符串前加上一个
~
.test_02{
width:~'calc(300px - 20px)';
}
!important 关键字 //层级优先最高
.border_03(@border_width:10px){
border:solid green @border_width;
}
.test_important{
border_03()!important;
}