一、Less的安装
1、安装node.js
因为Less是基于node环境的,所以使用Less前必须先安装node.js。
安装node.js:从Node.js 中下载适应自己电脑的环境进行傻瓜式安装即可
判断是否成功安装:
1.Win+R 运行命令cmd,进入命令窗口
2.输入node -v ,如果显示了版本号,说明安装成功
2、安装Less
1.基于node.js在线安装Less:运行cmd命令 "npm install -g less"
2.检查是否安装成功,输入"less -v"查看版本号,有则表示安装成功
二、Less的使用
因为html文档引用的是css文件,因此需要在VS Code上安装一个插件:easy less
注意:安装完成后记得重启一下VS Code再使用哦~
测试:创建一个less.less文件,输入代码,保存即可自动生成less.css文件
less.less:
@color:#fff;
@Color:#eee;
@CoLor:#666;
@font:20px;
* {
margin: 0;
padding: 0;
}
body {
background-color: @Color;
}
header {
display: flex;
justify-content: space-around;
align-items: center;
height: 100px;
background-color: @color;
a {
text-decoration: none;
color: @CoLor;
font-size: @font;
font-weight: 700;
&:hover {
font-size: @font * 1.2rem;
text-decoration: underline;
}
}
}
less.css:
* {
margin: 0;
padding: 0;
}
body {
background-color: #eee;
}
header {
display: flex;
justify-content: space-around;
align-items: center;
height: 100px;
background-color: #fff;
}
header a {
text-decoration: none;
color: #666;
font-size: 20px;
font-weight: 700;
}
header a:hover {
font-size: 24px;
text-decoration: underline;
}
有意者可前往Less中文网 Less教程 了解更多。