less学习

less其实就是把less文件解析成css文件

利用koala 把目录放进去，然后在右键设置输出路径，然后点击编译，就会出现一个css文件

less的注释

//  不会被编译的，不会在css中显示，优先

/**/  会被编译的，会在css中显示

定义一个变量

@test_300px;    @变量名：值

使用变量

.box{

width:@test_width;

height:@test_width;

background-color:yellow;

}

混合

.border{

 border:solid  5px  pink

}

.box{

width:@test_width;

height:@test_width;

background-color:yellow;

.border

}

.box2{

.box1;

.border;

margin：10px

}

混合可带参数

.border_02(@border_width){

      border:solid yellow @border_width;

}

.test_hunhe{

.border_02(30px)//这里必须要传一个值

}

混合带吗默认值

.border_03(@border_width：10px){

      border:solid red @border_width;

}

.test_hunhe_03{

.border_03()//因为带有默认值，可以不传值

}

//匹配
.triangle(right,@w:5px,@c:blue){
  border-width:@w;
  border-color: transparent  @c transparent transparent;
  border-style:  dashed  solid dashed dashed;
}
.triangle(bottom,@w:5px,@c:blue){
  border-width:@w;
  border-color: transparent transparent @c  transparent;
  border-style: dashed dashed solid  dashed;
}
.triangle(top,@w:5px,@c:blue){
  border-width:@w;
  border-color: @c transparent transparent transparent;
  border-style: solid dashed dashed dashed;
}
//@_ 默认就会带着的样式
.triangle(@_,@w:5px,@c:blue){
  width: 0;
  height: 0;
  overflow: hidden;
}
.triangle{

  .triangle(top)

}

//嵌套
.list{
  width: 600px;
  margin: 30px auto;
  padding: 0;
  list-style: none;
  li{
    height: 30px;
    line-height: 30px;
    background: pink;
    margin-bottom: 5px;
  }

  a{
    float: left;
    //&他的上一层选择器
    &:hover{
      color:red
    }
  }
  span{
    float: right;
  }
}

//@argument 所有参数一步代入

//避免编译 ~'.....'
.test_03{
  width: ~'calc(300px-30px)';
}
//！important 优先级最高
.test_04{
    .test_03 !important;
}

@charset "utf-8";
//引入less文件
@import "ku";
//引入css文件  在哪引入就会出现在哪
@import (less) "a.css";
body{
  background:#cccccc;
}