less使用、常用语法解析

使用

1. 客户端使用
   <link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>
2. 服务端使用（vue项目中使用）

• 安装
  npm install less less-loader --save
• 修改webpack.config.js文件，引入less

{
  test: /\.less$/,
  loader: "style-loader!css-loader!less-loader"
}

• 使用

<style lang="less">
  // 你的css样式（less语法）
</style>

语法介绍(基本语法，常用语法介绍)

1. 嵌套

// 编写样式
.render{
  &.container{
    // 样式
  }
  .header{
     // 样式
  }
  .body{
     // 样式
  }
}

// 解析之后的样式
.render.container{ 
  // 样式（注意class之间没有空格）
}
.render .header{
  // 样式（注意class之间有空格）
}
.render .body{
  // 样式
}

2. 变量

// 编写
@color: #222;
.render{
  color: @color;
}

// 解析之后的样式
.render{
  color: #222;
}

3. 混合

// 编写样式
.image{
  border: 1px solid #fff;
  border-radius: 4px;
}
.container-img{
  width: 100px;
  height: 100px;
  @media(min-width: 750px) {
    margin-bottom: 50px;
  }
  .image();
}

// 解析之后的样式
.container-img{
  width: 100px;
  height: 100px;
  border: 1px solid #fff;
  border-radius: 4px;
}
@media (min-width: 750px) {
  .container-img {
    margin-bottom: 50px;
  }
}

4. 函数
   常用的一些函数介绍
   ceil(2.4) => 3
floor(2.4) => 2
percentage(0.5) => 50%
   等等一些函数，但是这些函数，用处不太大，css样式用不到这些函数，所以这里就不详细介绍了。感兴趣的同学，可以看看下面的less函数链接，这里比较全面。
   less函数