Days 21 Less

1. npm install -g less
   lessc styles.less styles.css
   2.变量

@charset "UTF-8";
/*注释：在css当中可以使用，所有编译的过程当中生成在css文件*/
//注释：css不支持,不会编译在css文件

/*变量*/
//必须@前缀，：是等于的以上，必须分号结束；
//不能以数组开头，不能包含特殊字符，区分大小写
@mainColor:#e92323;
@className:box;

div{
  background: @mainColor;
}
a:hover{
  color: @mainColor;
}
//变量用于字符拼接使用方法
.@{className}{
  color: @mainColor;
}

3.Mixin

@charset "UTF-8";

.w50(){
  width: 50%;
}
/*
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);
}

4.嵌套

@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;
  }
}

5.@import 模块化样式

@import "variables";

@import "mixins";

@import "topBar";

@import "banner";

6.运算&内置函数

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

7.less在浏览器中的使用

    
    
    
    
    


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