常见CSS预处理器：Less / SASS / Stylus等。
Less预处理器：使用CSS语法，可以做一些逻辑处理，可以使用变量、混合、运算、嵌套等。简化CSS的编写，降低了CSS等维护成本。
1.安装及使用
1）VSCode插件（推荐）
在VSCode中安装插件Easy LESS。可以自动把less文件转换成css文件，保存less文件后自动更新。
2）Node
安装Node环境：（Mac版）
检测Node是否安装成功
在终端中输入：
node -v node环境是否安装成功(如果安装成功,会出现版本号)
npm -v 检测包管理工具是否安装成功(如果安装成功,会出现版本号)
如图。
安装less
在终端输入：
npm install less -g
验证less是否安装成功
lessc -v
将less编译为css文件
在终端输入：
（首先要进入到当前less文件所在的文件夹目录中）
编译less文件cmd命令: lessc 要被编译的less文件 要编译为自定义CSS文件
例如: lessc index.less index.css
2.Less
1）使用
less文件中可以写css代码。语法：@变量名: 值;
调用：@变量名
@fsize: 18px; //把18px存在@fsize记号中
div {
font-size: @fsize; //调用
}
2）运算
运算符号：+ - * /
@w:120px;
div {
width: @w / 2;
}
3）嵌套
less中样式可以嵌套，保存后会自动生成css代码。less代码举栗：
div {
width: 120px;
height: 120px;
a {
width: 100%;
height: 100%;
display: block ;
span {
font-size:18px;
}
}
}
生成的css代码：
div {
width: 120px;
height: 120px;
}
div a {
width: 100%;
height: 100%;
display: block ;
}
div a span {
font-size: 18px;
}
4）混合（函数的使用）
定义函数：把一段相同的代码交给一个函数来管理
.public() { //定义函数
width: 400px;
height: 500px;
background: red;
}
div {
.public(); // 调用函数
}
p {
.public();
}
.public();也可以换成#public();，但后面调用也要用#public();
传参数：
.public(@w) { } // 小括号中的@w相当于假设有了具体的值
//@w 表示假设的宽度, @h 表示假设的高度
.public(@w,@h) {
width:@w;
height: @h;
background: red;
}
div {
.public(600px,300px); // 调用
}
p {
.public(400px,100px);
}
参数的顺序 和 调用的实际值 是一一对应的。
函数参数的默认值：
.public(@w:默认值,@h:默认值...){}
.public(@w:400px,@h:400px) {
width:@w;
height: @h;
background: red;
}
div {
.public(600px,300px); // 调用，宽高为600px，300px
}
p {
.public(); //没有传参，宽高为默认的400px，400px
}
5）引入less文件
<!-- 引入less文件 -->
<link rel="stylesheet/less" type="text/less" href="./08-index.less">
<!-- 引入js文件 -->
<script src="./less.js"></script>
js文件要放在less文件后面。
在本地运行没有效果。 （如：file:///C:/Users...）
在服务器上运行才能有效果。（如http://ip地址....）
安装服务器：在vscode→ 搜索插件live sever→ 安装→ 重启vscode→ 在html页面→鼠标右键点击→ open width live server
3.rem单位
1）em
em是一个相对的长度单位，与盒子自身的font-size值有关；
1em = 盒子中自身字体的大小 * 1
rem是一个相对的长度单位，始终参照html中设置的字体大小。
1rem = html标签中字体的大小 * 1
代码举栗：
html {
font-size: 50px;
}
div {
font-size: 20px;
width: 10em; /*200px*/
height: 10em; /*200px*/
width: 10rem; /*500px*/
height: 10rem; /*500px*/
}
2）使用rem做适配
在不同设备下，只需要更改html中的font-size即可。
人为将UI图横向划分为指定的份数20份（如果UI图width=640px）
计算出1份所占的大小： 640 / 20 = 32px
把计算出的1份的大小设置给html { font-size: 32px;}
1rem = 32px
4.媒体查询
媒体指各种设备，查询指要检测属于哪种设备，通过查询当前属于哪种设备,让网页能够在不同的设备下正常的预览。
1）媒体类型
all (所有的设备)
print (打印设备)
screen(电脑屏幕,平板电脑,智能手机)
2）语法
@media not | only 媒体类型 and (特性条件)
and 可以将多个媒体特性链接到一块，相当于 且 &；
not 排除某个媒体特性 相当于 非 ! （可以省略）
only 指定某个特定的媒体类型 （可以省略）
/*若屏幕大小是320时，div的样式时这样的*/
@media only screen and (width:320px) {
div {
width: 100%;
height: 200px;
background: red;
}
}
/*若除了屏幕大小是320时，其他大小的屏幕的div的样式时这样的*/
@media not screen and (width:320px) {
div {
width: 100%;
height: 200px;
background: red;
}
}
3）外联式语法
<link rel="stylesheet" href="index.css" media="screen and (min-width:640px)">
网友评论