less的基本使用

less的定义

less 是一门 CSS 预处理语言，可以通过预处理器把less文件编译成css，less增加了变量、混合（mixin）、函数等功能，弥补了css的不足，让编写css更加方便

如何使用

一：引入js文件

1. 在html引入less.js

   可以通过cdn方式，也可以把less下载下来，然后通过script标签引入

   <script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js"></script>
   // 或者
   <script src="less.min.js"></script>
   

2. 引入编写好的less文件

   <link rel="stylesheet/less" href="index.less">
   <script src="less.min.js"></script>
   

   注意：link标签要在script标签之前引入，rel属性也要设置成stylesheet/less

3. 执行html

   注意html要起个本地服务器跑，不要直接在浏览器中运行，否则会有跨域问题；

二：依赖安装（推荐）

1. node全局安装less

   npm install -g less  // 也可以通过  yarn global add less
   

2. 在命令行执行

   lessc index.less index.css
   

3. 在html引入编译好的index.css

语法

变量（Variables）

css 如果一个颜色多个地方使用，就得定义多次，如果需要修改，也得改多次，这样很不方便；
less支持变量的写法，把那些用的比较多的相同的值通过变量来定义，只需修改一次。

以 @ 开头声明变量

@width: 50px;
@color: red;
@bgColor: blue;

.div1 {
 width: @width;
 color: @color;
 background: @bgColor;
}
.div2 {
 width: @width;  // 如果要修改width 只需改上面定义的width就行
 color: @color;
 background: @bgColor;
}

// less编译后
.div1 {
 width: 50px;
 color: red;
 background: blue;
}
.div2 {
 width: 50px;
 color: red;
 background: blue;
}

混合（Mixins)

将一类样式的封装好，可以在别的元素里面直接调用，复用

// 需要复用的样式
.center(@width: 100px) {
  width: @width;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: normal;
}
#div1 {
   // 调用
  .center();
}
#div2 {
   // 调用,可以传参
  .center(200px);
}
// 编译后
#div1 {
  width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: normal;
}
#div2 {
  width: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: normal;
}

嵌套（Nesting）

css的元素之间的样式是不能嵌套的，less扩展了这个，可以跟 HTML 的组织结构一样嵌套写样式，方便寻找和修改
嵌套用的比较多有个符号&，代表的是父级元素的引用

@color: red;
body {
  .header {
    color: @color;
  }
  .content {
    color: @color;
    .item {
      color: @color;
      &.item-1 {
        color: @color;
      }
      &-2 { // 要注意这种情况，这里只是使用父级名称
        color: @color;
      }
    }
  }
  .footer {
    color: @color;
  }
}

// 编译后
body .header {
  color: red;
}
body .content {
  color: red;
}
body .content .item {
  color: red;
}
body .content .item.item-1 {
  color: red;
}
body .content .item-2 {
  color: red;
}
body .footer {
  color: red;
}

运算（Operations）

支持+，-，*，/ 符号运算

@width-200: 100px + 100px;
@width-50: 150px - 100px;
@width-10: 5px * 2px;

.div1 {
 width: @width-200;
}
.div2 {
 width: @width-50;
}
.div3 {
 width: @width-10;
}

// 编译后
.div1 {
  width: 200px;
}
.div2 {
  width: 50px;
}
.div3 {
  width: 10px;
}

内置函数（Functions）

Less 内置了很多函数，可以处理百分比，小数，颜色等等

@width: 0.5;
@color: #fa0141;
div{
    width: percentage(@width); // returns `50%`
    color: saturate(@color, 5%) // 增加5%的颜色饱和度
}

// 编译后
div {
  width: 50%;
  color: #fb0041;
}

导入（Importing）

可以导入别的less文件,也可以是css文件，导入后可以使用该文件的变量之类等等

import 'other.less'
import 'other.css'

注释（Comments）

多行注释可以使用 /**/，单行注释可以使用//

/*
多行注释
*/

// 单行注释

循环 (Loop)

less没有现成的for循环，一般是用when + 递归实现；

示例代码：
.loop(@counter) when (@counter > 0) {
  .loop((@counter - 1));    // 下一次调用，直到@counter等于0
  width: (10px * @counter); 
}

div {
  .loop(5); // 调用，传参5
}

// 编译后
div {
  width: 10px;
  width: 20px;
  width: 30px;
  width: 40px;
  width: 50px;
}

条件判断 (Condition)

less 没有现成的if else，你可以使用 when, 如果需要可以结合and 或者 not 或者 ,逗号运算符

.width1(@width) when (@width > 200px) {
    width: @width;
    background: yellow;
}
// and 都要满足
.width2(@width) when (@width > 200px)  and (@width < 400px) {
    width: @width;
    background: red;
}
// not 非运算，不用满足
.width3(@width) when  not (@width > 200px){
    width: @width;
    background: blue;
}
// 逗号运算符 或运算，其中一个满足就行
.width4(@width) when  (@width > 100px), (@width > 200px){
    width: @width;
    background: green;
}
.div1 {
  .width1(400px);
}
.div2 {
  .width2(300px);
}
.div3 {
 .width3(100px);
}
.div4 {
 .width4(150px);
}

// 编译后
.div1 {
  width: 400px;
  background: yellow;
}
.div2 {
  width: 300px;
  background: red;
}
.div3 {
  width: 100px;
  background: blue;
}
.div4 {
  width: 150px;
  background: green;
}

继承(extend)

:extend是一个伪类，可继承它所引用的选择器的样式，参数是所要引用的选择器；

.a {
  color: red;
  .b {
    color: green;
  }
}
.c {
  &:extend(.a);
}

// 编译后
// a和c样式写在一起
.a,
.c {
  color: red;
}
.a .b {
  color: green;
}