less modular development

---

layout: 'page'
title: 'less模块'
date: 2019-09-30 16:14:04
tags: JAVASCRIPT
categories: JAVASCRIPT

---

What is less?

less css is pre-compiled language, less so on the pre-compiled language is to make css with object-oriented programming ideas.

Compile less of

• Compiled in the development environment (product development is not completed, under development, this is a development environment)

Import less.js

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

• In a production environment compiler (product development completed, you need to be deployed to the server)

Project on-line, can not be less deployment, so that each time the user opens the page will need to re-compile, huge performance, we deployed to the server is compiled 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 syntax

• Creating variables

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

• String concatenation

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

• Nested hierarchy

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

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

  }

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

  }

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

  }
}

• function

.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中的内容*/