编译型CSS（Less）

以你之姓@ 2023-02-13 14:45 162阅读 0赞

#### 编译型HTML：模板引擎（Pug）。 ####

#### 编译型CSS：less、sass、stylus。 ####

# 一、如何搭建Less的运行环境 #

### 1、Vue项目下的Less： ###

（1）利用npm下载Less：

npm install less --save-dev
    npm install less-loader --save-dev
    //less-loader的最高版本：6.0

（2）卸载最高版本less-loader，下载4.1.0版本。

npm install less-loader
    npm install less-loader@4.1.0 --save-dev

（3）配置web-pack：@\\build\\webpack.base.conf.js

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

（4）在单组件文件.vue中

### 2、uni-app项目下的Less ###

工具 | 插件安装：less编译（安装）  
在但组件文件.vue中：`<style lang="less"></style>`

### 3、原生开发下如何使用Less ###

1.  使用编译型CSS必须在服务器下操作。
2.  新建本地文件：`<link rel=“stylesheet/less” type=“text/css” href=“style/index.less” />`
3.  在less官网上下载less.js文件：`<script src=“js/less.min.js”></script>`

# 二、在Less技术中使用变量 #

1.  定义变量：@变量名:变量值
2.  使用变量：  
    （1）变量可以作为css属性的取值：@变量名
    
        @co:#3358ff;
          .box{ 
            color:@co
          }
    
    （2）变量作为CSS属性取值以外的用法：@\{变量名\}
    
        <div class="first">我是first</div>
    
        @fi:first;
        @bgc:background-color;
        .@{ fi}{ 
        	color: #ff5857;
        	@{ bgc}:#0f0;
        }
    
    ![在这里插入图片描述][20200530151526279.png]

# 三、在Less技术中使用嵌套 #

1.  普通嵌套：根据HTML标记对的嵌套关系实现

@back:#c2d3c1;
    #demo{ 
    	width: 100%;
    	height: 50px;
    	background-color: @back;
    		.ul{ 
    		width: 1200px;
    		height: 50px;
    		background-color: #ff5857;
    		margin: 0 auto;
    		display: flex;
    		li{ 
    			width: 25%;
    			height: 100%;
    			text-align: center;
    			line-height: 50px;
    		}
    	}
    }

1.  鼠标经过

li{ 
    	width: 25%;
    	height: 100%;
    	text-align: center;
    	line-height: 50px;
    	&:hover a{ 
    		text-decoration: underline;		//&表示上一层级的选择器
    	}
    	a{ 
    		color: #7fa96a;
    	}
    }

# 四、Less运算：+ - \* / () #

1.  \+用来表示数值相加，不能表示字符串连接。
2.  运算符两侧的运算数有一侧带有单位即可。
3.  运算符与运算数之间必须带有空格。

@height:50px;
    #demo{ 
    	width: 100%;
    	height: @height + 20px;
    }

# 五、混合（Mixin） #

1.  无参混合：  
    （1）创建混合：
    
        .fontStyle{ 
        	font-size: 20px;
        	color: #3385ff;
        }
        #fontStyle(){ 
        	font-size: 20px;
        	color: #ff5857;
        }
        #box(){ 
        	font-size: 50px;
        }
    
    （2）调用混合：
    
        .demo{ 
        	.fontStyle();
        }
        .demo{ 
        	#box();
        }
2.  有参混合：

.fontStyle(@fs,@color,@ff){ 
    	font-size: @fs;
    	color: @color;
    	font-family: @ff;
    }
    .fa{ 
    	.fontStyle(20px,#ff5857,Microsoft YaHei);
    }
    .fb{ 
    	.fontStyle(16px,#3385ff,SimSun);
    }
    .fc{ 
    	.fontStyle(26px,orange,SimHei);
    }

（1）混合中的形参可以带有默认值：

.fontStyle(@fs,@color:#d8ad7a,@ff){ 
    	font-size: @fs;
    	color: @color;
    	font-family: @ff;
    }

（2）Less混合中实参向形参的传递时按照参数名来进行传递的。

.fd{ 
    	.fontStyle(@color:gray,@fs:30px,@ff:Microsoft YaHei);
    }

（3）使用@arguments表示传递过来的所有参数。

.borderS(@style,@width,@color){ 
    	border: @arguments;
    }
    .demo{ 
    	.borderS(solid,1px,#f00)
    }

（4)使用@rest表示剩余的参数。

.borderS(@bgc,@rest...){ 
    	background-color: @bgc;
    	border: @rest;
    }
    .demo{ 
    	.borderS(#3385ff,solid,1px,#f00)
    }
    
    /*或者写为：*/
    .borderS(@rest...){ 
    	border: @rest;
    }

（5）在混合中使用匹配模式：  
![在这里插入图片描述][20200530162016640.png]

<div id="box">我使用了编译型CSS：less</div>
    <div id="fox">我使用了编译型CSS：less</div>

.st(abc,@a,@b){ 
    	font-size: @a;
    	color: @b;
    }
    .st(xyz,@a){ 
    	text-align: @a;
    }
    #box{ 
    	.st(abc,18px,#f00);
    }
    #fox{ 
    	.st(xyz,right);
    }

例：制作四个方向的三角形（此案例为向上）：

.triangle(top,@width,@color){ 
    	border-color: @color transparent transparent transparent;
    }
    .triangle(right,@width,@color){ 
    	border-color: transparent @color transparent transparent;
    }
    .triangle(bottom,@width,@color){ 
    	border-color: transparent transparent @color transparent;
    }
    .triangle(left,@width,@color){ 
    	border-color: transparent transparent transparent @color;
    }
    .triangle(@_,@width,@color){ 
    	width: 0;
    	height: 0;
    	border-style: solid;
    	border-width: @width;
    }
    .box{ 
    	.triangle(bottom,20px,#3385ff);
    }

# 六、嵌套混合/命名空间： #

#box{ 
    	.btn{ 
    		color: #3385ff;
    		width:80px;
    		height: 30px;
    		border: 1px solid gray;
    		&:hover{ 
    			background-color: #ff3857;
    		}
    	}
    }
    .btn2{ 
    	/*方法一*/
    	#box.btn();
    	/*方法二*/
    	#box > .btn();
    }

# 七、混合引导（Minxin Guards） #

在Less中使用流程控制。

1.  条件控制：  
    when(条件1) and | , (条件2)  
    逻辑与：and  
    逻辑或：，  
    逻辑非：not  
    例：根据元素的宽度（200px）设置背景颜色。元素宽度大于200px，背景颜色为@ff857；元素宽度小于200px，背景颜色为\#3385ff；
    
        .setBgc(@width,@height) when(@width>200px){ 
        	width: @width;
        	height: @height;
        	background-color: #ff5857;
        }
        .setBgc(@width,@height) when(@width<=200px){ 
        	width: @width;
        	height: @height;
        	background-color: #3385ff;
        }
        .box1{ 
        	.setBgc(150px,220px)
        }
        .box2{ 
        	.setBgc(220px,220px)
        }
    
    1.  循环控制  
        本质是使用混合的递归调用。  
        如何在Node环境下全局使用Less技术。  
        （1）全局安装Less：npm install -g less  
        （2）在本地新建一个文件夹：例如文件夹less  
        （3）在该文件夹中编译less代码  
        （4）在cmd中进入该文件夹，并编译less文件：less index.less index.css  
        例：制作一个自动栅格系统：
        
            .grid(@n,@i:1) when(@i<=@n){ 
            	.col-@{ i}{ 
            		width:@i*100%/@n
            	}
            	.grid(@n,@i+1)
            }
            .grid(24);

[20200530151526279.png]: https://img-blog.csdnimg.cn/20200530151526279.png
[20200530162016640.png]: https://img-blog.csdnimg.cn/20200530162016640.png