Less（Leaner Style Sheets）：预处理语言学习

中文文档：Less 快速入门 | Less.js 中文文档 - Less 中文网

使用

        1.安装

                (1)使用npm安装

 //全局安装
 npm install less -g
 //局部安装
 npm i less --save-dev
 //查看版本
 lessc -v

                (2)编译

lessc 编译前的less文件.less 编译后创建的css文件.css

                (3)导入

<link rel="stylesheet" type="text/css" href="./less.css">

        2.使用编译工具转换格式

                （1）vscode安装插件easy less，编辑.less文件保存时会自动转换成css文件

                （2）导入

<link rel="stylesheet" type="text/css" href="./less.css">

注释

 /*  注释一块
 @width1: 100px;
 @width2:  200px;
 @color:red;
 */
 // 注释一行

变量 '@'

        less：

 @width1: 100px;
 @width2:  200px;
 @color:red;
 .box{
     width: @width1;
     height: @width2;
     background-color: @color;
 }

        css：

.box {
   width: 100px;
   height: 200px;
   background-color: red;
   margin: 100px;
 }

混合 '()'

        （1）使用顺序与定义顺序无关，可以先使用，再定义；也可以先定义再使用

        （2）有重复的按作用域内部到外部，使用()顺序从上到下

        less：

@width1: 100px;
 @width2:  200px;
 @color:rgb(190, 122, 122);
 ​
 // .borderd{
 //     border: 4px solid rgb(42, 196, 216);
 // }
 #borderd1{
     border: 4px solid rgb(42, 196, 216);
     background-color: blanchedalmond;
 }
 .box{
     width: @width1;
     height: @width2;
     background-color: @color;
     margin: @width1;
     .borderd();//先使用，再定义
     #borderd1();//有重复的按作用域内部到外部，使用()顺序从上到下
 }
 .borderd{
     border: 4px solid rgb(62, 216, 42);
 }

        css：

 .borderd {
   border: 4px solid #3ed82a;
 }
 #borderd1 {
   border: 4px solid #2ac4d8;
   background-color: blanchedalmond;
 }
 .box {
   width: 100px;
   height: 200px;
   background-color: #be7a7a;
   margin: 100px;
   border: 4px solid #3ed82a;
   border: 4px solid #2ac4d8;
   background-color: blanchedalmond;
 }

        html：

<div class="box">变量</div>

嵌套

        less：

                &：父选择器，可以同时使用多个

@width1: 100px;
 @width2:  200px;
 @color:rgb(190, 122, 122);
 @color1: red;
 ​
 .box{
     width: @width1;
     height: @width2;
     background-color: @color;
     div{
         background-color: @color1;
         &:hover{
             background-color: blanchedalmond;
             div{
                 &:hover{
                     background-color: rgb(44, 40, 34);
                 }
             }
         }
         //和上面这个作用相同
         // &div{
         //     &:hover{
         //         background-color: rgb(44, 40, 34);
         //     }
         // }
     }
 }

        css：

 .box {
   width: 100px;
   height: 200px;
   background-color: #be7a7a;
 }
 .box div {
   background-color: red;
 }
 .box div:hover {
   background-color: blanchedalmond;
 }
 .box div:hover div:hover {
   background-color: #2c2822;
 }
 //和上面这个作用相同
 //.box divdiv:hover {
 //  background-color: #2c2822;
 //}

        html：

<div class="box">变量
     <div>嵌套1
         <div>嵌套1</div>
     </div>
 </div>

冒泡@

        less：

.component {
   width: 300px;
   @media (min-width: 768px) {
     width: 600px;
     @media  (min-resolution: 192dpi) {
       background-image: url(/img/retina2x.png);
     }
   }
   @media (min-width: 1280px) {
     width: 800px;
   }
 }

        css：

 .component {
   width: 300px;
 }
 @media (min-width: 768px) {
   .component {
     width: 600px;
   }
 }
 @media (min-width: 768px) and (min-resolution: 192dpi) {
   .component {
     background-image: url(/img/retina2x.png);
   }
 }
 @media (min-width: 1280px) {
   .component {
     width: 800px;
   }
 }

运算 '+、-、*、(a / b) '

1. +、-、*、/ 对任何数字、颜色、变量进行运算

2. 换算

3. 单位：以最左侧操作数的单位类型为准，如果换算无效或失去意义，则忽略单位。如：px 到 cm 或 rad 到 % 的转换

4. 除法要加（a / b）

@width1: 200px;
 @width2:  100px;
 @color:(#224488/2);//#112244
 @color1: #112244 ;
 @height1: @width1 + @width2;    //300px
 @height2: @width1 - 50px;    //150px
 @height3: @width1 * 3;  //600px
 // less版本4.0后除法有更改，所以要加（）
 @height4: (@width1 / 2);  //300px
 ​
 .box{
     width: @width1;
     height: @height4;
     background-color: @color+#888;  //#99aacc
     div{
         background-color: @color1;
     }
 }

转义 '~'

        把字符串作为变量值

        less：

@min768: ~"(min-width: 768px)";
 .element {
   @media @min768 {
     font-size: 1.2rem;
   }
 }
 ​
 @width1: 200px;
 @width2:  100px;
 @color1:~'red';
 .box{
     width: @width1;
     height: @width2;
     background-color: @color1;  //#99aacc
 }

        css：

 @media (min-width: 768px) {
   .element {
     font-size: 1.2rem;
   }
 }
 .box {
   width: 200px;
   height: 100px;
   background-color: red;
 }

函数

命名空间和访问符

        less：

#header() {
     .left {
         float: left;
         background-color: grey;
     }
     .right{
         float: right;
         background-color: rebeccapurple;
     }
 }
 //访问
 #left {
     #header.left();
 }
 // 还可以书写为 #bundle > .button 形式
 #right{
     #header>.right()
 }

        css：

#left {
   float: left;
   background-color: grey;
 }
 #right {
   float: right;
   background-color: rebeccapurple;
 }

映射

        less：

#colors() {
     color: blue;
   }
 .button {
     color: #colors[color];
 }

        css：

 .button {
   color: blue;
 }

作用域

向父级作用域往上层层寻找

        less：

 @var: black;
 #a1 {
   #a2 {
     color: @var; // red
   }
   @var: red;//可以先使用，再定义
 }

        css：

 #a1 #a2 {
   color: red;
 }