less模块化开发-CSS

什么是less？

less是css预编译语言，less等预编译语言就是让css具备面向对象编程思想。

less的编译

• 在开发环境下编译(产品没有开发完，正在开发中，这个是开发环境)

导入less.js

//=>rel="stylesheet/less" 这块有修改
<link rel="stylesheet/less" href="css/demo1.less">
//=>导入JS文件即可
<script src="js/less-2.5.3.min.js"></script>

• 在生产环境下编译(产品开发完成了，需要部署到服务器上)

项目上线，不能把less部署，这样用户每一次打开页面都需要重新的编译，非常耗性能，我们部署到服务器上的是编译后的css

1.在当前电脑的全局环境下安装less模块
  $ npm install less -g

  验证是否安装成功：$ lessc -v

2.基于命令把我们的less编译成css
  $ lessc xxx/xxx.less xxx/xxx.min.css -x

  把指定目录中的less编译成为css(并且实现了代码的压缩)，把编译后的css存入到具体指定路径中的文件中；上线前在HTML中导入的是css文件；

less的语法

• 变量创建

@bg-src:"../img";

• 字符串拼接

@bg-src:"../img";
.box{
    background:url("@{bg-src}/news_1.png");
}

• 层级嵌套

.pub {
  @H: 100;
  .bg { /*.pub .bg*/
    a { 
      width: unit(@H, px); /*300*/
    }
    @H: 300;//理解为变量提升
  }

  & > .bg { /*.pub > .bg*/

  }

  &.bg { /*.pub.bg*/

  }

  &:hover { /*.pub:hover*/

  }
}

• 函数

.transition(@property:all,@duration:.5s,
           @timing-function:linear,@delay:0s){
    -webkit-transition:@arguments;
    transition:@arguments;
}
.cc{
  .transition;/*默认值*/
  .transition(@duration: 1s);
}

• import

@import (reference) "common.less";/*reference:只把内容导入过来使用,但是不会编译common中的内容*/