一个.net程序员教你使用less

@min-width:200px;    //定义变量 变量名一定要时候@  然后 后面分号加上数值 每个变量只能定义一次
@min-height:100px;
//----------------------------------------------------------------------------------------------
/*下面的看见是不是比较陌生，这个类似函数功能，我把常用的
  css 过渡兼容性都封装起来以后用的时候直接调用这个方法
  就可以了*/
.transition(@duration:0.8s,@timing-function:ease)
{
    transition:@duration @timing-function;
    -moz-transition:@duration @timing-function;
    -o-transition:@duration @timing-function;
    -webkit-transition:@duration @timing-function;
    -ms-transition:@duration @timing-function;
}
/*这个也是个方法在下面也有调用*/
.GetDefaultColor(@color:#f00) {
    background-color: @color;
}

.divs {
    /*调用获取默认颜色方法*/
    .GetDefaultColor(#000);
    width: percentage(0.5);
    height: min-height;
    /*看见这行代码了吗？这就是上面的函数如果你想要封装的更多你可以使用类，
       这里说的类就是大函数嵌套小函数，和js 的类差不多写法如上面所示*/
    .transition(0.5s,ease-in-out);

    /*less 是可以嵌套的 选择器可以再次嵌套选择器会生成 .divs p {}这样的形式
      & 这个就是当前选择器的父辈的名字
        这个&在这个嵌套里面就相当于 .divs*/

    &:hover {
        background-color: #b6ff00;
    }
}

/*下面的看见是不是比较陌生，这个类似函数功能，我把常用的
  css 过渡兼容性都封装起来以后用的时候直接调用这个方法
  就可以了*/
/*这个也是个方法在下面也有调用*/
/* line 20, style.less */
.divs {
  /*调用获取默认颜色方法*/
  background-color: #000000;
  width: 50%;
  height: min-height;
  /*看见这行代码了吗？这就是上面的函数如果你想要封装的更多你可以使用类，
       这里说的类就是大函数嵌套小函数，和js 的类差不多写法如上面所示*/
  transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  -webkit-transition: 0.5s ease-in-out;
  -ms-transition: 0.5s ease-in-out;
  /*less 是可以嵌套的 选择器可以再次嵌套选择器会生成 .divs p {}这样的形式
      & 这个就是当前选择器的父辈的名字
        这个&在这个嵌套里面就相当于 .divs*/
}
/* line 33, style.less */
.divs:hover {
  background-color: #b6ff00;
}