Less学习笔记

• 判断是否安装less

  
  image.png

• 在线安装

npm install -g npm install -g less

• 离线安转
  直接将文件粘贴

  
  image.png
  

-检查
lessc
lessc -v

• 编译

  
  image.png
  

  可使用插件自动编译

• 推荐学习网站

  
  image.png

• less 语法
  注释
  编译/*/
  不编译//

• 变量
  必须@ ：为等于 ；为结束
  不能以数组开头 特殊字符 区分大小写

• 字符拼接

  
  image.png

• 混入

@charset "UTF-8";
/*混入*/
/*组合样式的例子*/
//.w50{
//  width: 50%;
//}
//.f_left{
//  float: left;
//}
//.f_right{
//  float: right;
//}
/*类混入*/
//.w50-f_left{
//  .w50();
//  .f_left();
//}

/*函数混入*/
/*定义函数*/
.w50(){
  width: 50%;
}
/*定义函数包含参数*/
//.f_left(){
//  float: left;
//}
//.f_right(){
//  float: right;
//}
/*
1.定义了参数（没有默认值），调用的时候必须传参
2.怎么定义默认值 和定义变量值是一样的
3.定义了参数（有默认值），可传可不传
*/
.f(@direction:left){
  float: @direction;
}
.borderRadius(@width:100px){
  border-radius: @width;
  -webkit-border-radius:@width;
  -moz-border-radius:@width;
  -o-border-radius:@width;
  -ms-border-radius:@width;
}
.w50-f_left{
  .w50();
  .f(right);
  .borderRadius(20px);
}

• 引入

@charset "UTF-8";

@import "variables";

@import "mixins";

@import "topBar";

@import "banner";

/*运算*/
@num:5;
ul{
  width: 100%*@num;
  li{
    width: 100%/@num;
    color: red+yellow+blue;
    background: gray*0.3;
    /*内置函数*/
    border-color: darken(red,20%);
  }
}

• 嵌套

@charset "UTF-8";
.wjs_app{
  display: block;
  img{
    display: none;
  }
  /*需要连接的情况：&*/
  &:hover{
    img{
      display: block;
      position: absolute;
      left: 50%;
      margin-left:-60px;
      border: 1px solid #ccc;
      border-top: none;
      top:40px;
      z-index: 100000;
    }
  }
  > div{
    display: block;
  }
}

编译结果

@charset "UTF-8";
.wjs_app {
  display: block;
  /*需要连接的情况：&*/
}
.wjs_app img {
  display: none;
}
.wjs_app:hover img {
  display: block;
  position: absolute;
  left: 50%;
  margin-left: -60px;
  border: 1px solid #ccc;
  border-top: none;
  top: 40px;
  z-index: 100000;
}
.wjs_app > div {
  display: block;
}

• How to use less

<h3>在浏览器端使用less</h3>
<p>1.less无法在浏览器端直接使用</p>
<p>2.浏览器不识别</p>
<p>3.必须解析成css代码</p>
<p>4.通过less解析插件（javascript）</p>
<p>5.引入less文件需要加上 type="text/less" </p>
<p>6.less.watch(); 无刷新预览样式</p>
<p>7.以http形式打开网页预览</p>
</body>