less学习

less是什么

css里边的jquery 可以使用多种编译环境将less转换为css 我是用的是node安装less 文件.less
write less do more
依程序员的角度去编写css
css3的出现 css 兼容性写法使用less更容易 -webkit- -moz- -o-等使用less的混合写法更加方便

less中的变量

@name:value
在使用的时候 height:@name

less中的类混合

在没有less之前 想让一个div有两个类得到效果 只能是给这个div加两个类 从而达到两个类的效果混合
但是有了less之后 不再需要两个类 只需要在less中将需要混合的类放在一起
less

.bg{
    height: @test_width;background: red;.border;
}
.border{
    border: 10px solid #0D3349;
}

生成的css

.bg {
  height: 300px;
  background: red;
  border: 10px solid #0D3349;
}

有了这个功能 就能实现就能够实现将许多类的公共代码抽取出来 再使用混合为每一个类加入这部分公共的代码

less中可带参数的混合

为待混合的部分增加参数 这样在其他类调用的时候更加灵活
less

.bg{
    height: @test_width;background: red;.border(11px);
}
.border(@border_width){
    border: @border_width solid #0D3349;
}

生成的css代码

.bg {
  height: 300px;
  background: red;
  border: 11px solid #0D3349;
}

为这个参数指定默认值
less 为@border_width指定默认值10px

.bg{
    height: @test_width;background: red;.border();
}
.border(@border_width:10px){
    border: @border_width solid #0D3349;
}

值得注意的是.bg只是一个定义的过程 在.border里边调用才可以生成css
这样在调用这个混合的时候即使没有参数的时候也不会报错 生成的css如下
css

.bg {
  height: 300px;
  background: red;
  border: 10px solid #0D3349;
}

less中的匹配模式

相当于js中的if 但不完全是
less没有出现之前 在页面上写一个三角形的方法

.sanjiao{
  width: 0;height: 0;overflow: hidden;
  border-width:10px ;
  border-color: transparent transparent red transparent;
   border-style: dashed dashed solid dashed;
  //dashed  是为了兼容ie6
}

使用了less的匹配模式来实现

.tringle(top,@w:10px,@c:red){
  border-width:@w;
  border-color: @c;
  border-style:dashed dashed solid dashed ;
}
.tringle(bottom,@w:10px,@c:red){
  border-width:@w;
  border-color: @c;
  border-style:solid dashed dashed  dashed ;
}
.tringle(@_,@w:10px,@c:red){   //不管会执行那个tringle都会执行这一个  而且后边的这两个参数必须携带
    width: 0;height: 0;overflow: hidden;
}
.sanjiao_shang{
   .tringle(top)
}
.sanjiao_xia{
  .tringle(bottom)
}

生成的css

.sanjiao_shang {
  border-width: 10px;
  border-color: red;
  border-style: dashed dashed solid dashed ;
  width: 0;
  height: 0;
  overflow: hidden;
}
.sanjiao_xia {
  border-width: 10px;
  border-color: red;
  border-style: solid dashed dashed  dashed ;
  width: 0;
  height: 0;
  overflow: hidden;
}

less中可以对变量进行预算 只要这个变量带着单位 运算的时候是需要运算整数 不需要管单位 同时颜色也可以进行运算

less中的嵌套规则

但是在css中尽量的少去嵌套 增加web性能
less

.list{
  width: 600px;margin: 30px auto;
  padding:0;
  li{
    height: 30px;
  }
  a{
    &:hover{           //&代表的就是上一层选择器
      color: #6ba82f;
    }
  }
}

生成的css

.list {
  width: 600px;
  margin: 30px auto;
  padding: 0;
}
.list li {
  height: 30px;
}
.list a:hover {
  color: #6ba82f;
}

less中的@arguments

less代码

.test(@w:30px,@c:red,@xx:solid){
  border: @arguments;
}
.tt1{
  .test()
}

将会生成的css代码

.tt1 {
  border: 30px red solid;
}