CSS预处理之less,sass

less和sass的基本使用

什么是less：

less是css的增强版，通过less可以编写更少的代码，给开发人员带来遍历，并能够方便后期的维护。

一、less部分

1、安装less的步骤

①打开cmd，输入npm install -g less

②在VScode中安装easy less插件

③浏览器环境下使用 <script src=“less.js”> 引入less

2、less语法

1、变量

//语法
@变量名:变量值

//举例
@a:100

2、嵌套

//语法：
使用{}进行嵌套

//举例
div {
	.son {
		属性:属性值;
	}
}

3、伪类选择器

//语法：
&:伪类选择器{
	属性:属性值;
}

//举例
&:hover {
	background-color:tomato;
}

4、伪元素选择器

//语法：
&::伪元素选择器{
	属性:属性值;
}

//举例
&::after {
	content: ""
}

5、媒体查询@media

//语法：
@media screen and (max-width:500px) { xxx }

//举例：窗口宽度<=600px时，选择器的背景颜色改变
@media screen and (max-width:600px) {
	background-color: yellow;
}

3、使用步骤

1、在项目中新建css文件夹，在里面新建less文件，命名为style.less
2、安装插件后，保存less文件，VSCODE会自动为我们生成对应的css文件，名字为style.css：

3、在html文件中引入生成的style.css文件。

<link rel="stylesheet" href="./css/style.css">

二、sass部分

1、sass的使用方法

第一步：打开文件cmd，执行以下命令
1、初始化，生成package.json配置文件

npm init -y

2、全局安装sass

npm i -g sass

3、将.scss后缀文件转为.css后缀文件

sass index.scss index.css

第二步：在html文件中引入生成的.css后缀文件。

2、sass语法

1、变量

单个变量

//语法
$变量名:变量值

//举例:
$color:red;
div {
	color: $color;
}

map-同属性多档值

//语法
map-get($外层变量名，内层变量名)

//举例
$font:{
	s: 12px,
	m: 14px,
	l: 16px
};
.m1 {
	font-size: map-get($font,s);//获得变量s
}

2、@mixin多个属性形成组合

//语法
@include 变量组合名;

//举例1：不带参数
@mixin n {//定义一个属性组合n
	color: red;
	font-size: map-get($font,l);
	border: 1px solid skyblue;
}
.n1 {
	@include n;//引入属性组合
	border-radius: 2px;
}

//举例2：带参数
@mixin n($color) {//定义一个属性组合n
	color: $color;
	font-size: map-get($font,l);
	border: 1px solid skyblue;
}
.n1 {
	@include n(green);//引入属性组合，传参数
	border-radius: 2px;
}

3、嵌套（同less）

//语法：
使用{}进行嵌套

//举例
div {
	.son {
		属性:属性值;
	}
}

4、伪类选择器（同less）

//语法：
&:伪类选择器{
	属性:属性值;
}

//举例
&:hover {
	background-color:tomato;
}

5、伪元素选择器（同less）

//语法：
&::伪元素选择器{
	属性:属性值;
}

//举例
&::after {
	content: ""
}

6、媒体查询@media（同less）

//语法：
@media screen and (max-width:500px) { xxx }

//举例：窗口宽度<=600px时，选择器的背景颜色改变
@media screen and (max-width:600px) {
	background-color: yellow;
}