Less的使用

1.定义

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。

2.安装

安装好node后，使用命令npm install -g less安装，安装成功后通过lessc -v查看less的版本号

3.语法

@变量名:值
比如

/*错误的变量命名：数字开头、特殊字符、*/
/*变量名区分大小写*/
@font12px:12px;
@color:blue;
body{
	font-size:@font12px;
	color:@color;
}

4.编译

less文件无法直接通过link引用，需要把less文件编译成css文件
把my.less文件编译成my.css文件
通过lessc my.less my.css

5.less的嵌套

(1)普通情况
html文件

<div class="header">
	<a>1</a>
</div>

less文件

.header{
  width: 200px;
  height: 200px;
  background-color: pink;
  a{
    color: #4D99ED;
  }
}

less文件编译生成的css文件

.header {
  width: 200px;
  height: 200px;
  background-color: pink;
}
.header a {
  color: #4D99ED;
}

(2）伪类选择器

.header{
  width: 200px;
  height: 200px;
  color: pink;
  a{
    color: #00FF00;
    &:link{
      color: #FF0000;
    }
    &:visited{
      color: #00FF00;
    }
    &:hover{
      color: #FF00FF;
    }
    &:active{
      color: #0000FF;
    }
    &::after{
      content: "11111";
      color: #ff6cc9;

    }

  }

}

6.less的运算

支持加减乘除运算，可以加括号

运算符左右两侧必须都有一个空格隔开
两个数参与运算，如果一个数有单位，则结果的单位以这一个数的单位为准
两个数参与运算，如果两个数有单位，则结果的单位以第一个数的单位为准

 <div>
        <img src="img/5399000c82228284.jpg!q70.dpg.webp">
    </div>

less代码

@border:5px + 5;
@baseFont:50px;
@num:50;
html {
  font-size: @baseFont;
}
/*运算符左右两侧必须都有一个空格隔开*/
/*两个数参与运算，如果一个数有单位，则结果的单位以这一个数的单位为准*/
/*两个数参与运算，如果两个数有单位，则结果的单位以第一个数的单位为准*/
div{
  width: 900px - 50;
  height: (200px + 50px) * 2;
  border: @border solid blue;
  background-color: #666 - #444;
  img{
    width: 372rem /  @baseFont;
    height: 372rem / @baseFont;
  }

}