一、LESS是什么
LESS是CSS预处理语言，是CSS的扩展。
然后说说比较流行的几款预编译器：SASS/SCSS、LESS、Stylus。
SASS学习网站：
https://www.sass.hk/
https://www.w3cschool.cn/sass/
https://github.com/sass/sassLESS学习网站：
http://lesscss.cn/
https://less.bootcss.com/
https://www.w3cschool.cn/less/
https://github.com/less/less.jsStylus学习网站：
https://stylus.bootcss.com/
https://github.com/stylus/stylus二、为什么用LESS
SASS/SCSS和Stylus都很强，但是我还是选择了LESS，个人喜欢NodeJS，然后stylus空格我又不喜欢，就用了LESS，现在用的也习惯了，下面就给大家介绍一下LESS的一些用法吧。
LESS——像写javascript一样书写css
特点：
1、写样式更简单：嵌套
2、使用方便：变量、运算、函数
3、学习成本低：语法
三、怎么用LESS
1、安装使用
(1)浏览器中使用
在head中引用：
<link rel="stylesheet/less" type="text/css" href="index.less" />//必须加上/less
<script src="less-1.3.3.min.js"></script>//js必须在less后引用
CDN：
https://cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js
https://cdn.bootcss.com/less.js/3.9.0/less.js观察模式，不调用也可以：
<link rel="stylesheet/less" href="index.less">
<script>less = { env: 'development'};</script>//声明开发模式
<script src="less-1.3.3.min.js"></script>
<script>less.watch();</script>//调用观察模式根据个人需求进行配置，不配置也可以:
<script>
less = {
env: "development", // 开发(development)模式/生产(production)模式
async: false, // 异步加载
fileAsync: false, // load imports async when in a page under
// a file protocol
poll: 1000, // 观察模式间隔
functions: {}, // user functions, keyed by name
dumpLineNumbers: "all", // "comment" or "mediaQuery" or "all"
relativeUrls: false,// whether to adjust url's to be relative
// if false, url's are already relative to the
// entry less file
rootpath: ":/"// a path to add on to the start of every url
//resource
};
</script>(2)在node.js中使用
安装：
npm install -g less编译：
lessc index.less index.css2、语法
保留CSS的基础语法，并进行了扩展
import "reset.css" less在编译时不会变动css文件
import "base" less导入其他less文件时可以省略文件格式
import url("base.less") less也可以使用url形式导入，但是必须有后缀3、运算
在less中，可以在书写属性时直接进行加减乘除
例子：header插入了一个padding
@fullWidth: 1200px;
.header{
width: @fullWidth – 20px * 2;
padding: 0px 20px*2;
}4、变量
(1)格式：以@开头
@headergray: #c0c0c0;
@fullWidth: 1200px;
@logoWidth: 35%;(2)字符串插值
@name: banner;
background: url("images/@{name}.png") no-repeat;
编译：
background: url("images/banner.png") no-repeat;(3)避免编译
background: ~"red";
编译：
background: red;(4)移动端rem布局中的使用
less:
@fullWidth: 750;
@toRem: unit(@fullWidth/10,rem);
header{
height: 150/@toRem;
}
编译：
header{
height: 2rem;
}5、混合
(1)在一个类中继承另一个类
.class1{ }
.class2{
.class1;
}(2)用&替换当前选择器
a{
color: #000;
&:hover{
color: #f00;
}
}(3)在父类中嵌套子类
.class1{
p{
span{
a{ }
}
&:hover{ }
}
div{ }
}(4)带参混合
.color(@color=red){
color: @color;
}
.class1{
.color(#0f0);
}
.class2{
.color();
}6、函数
(1)逻辑控制
格式：statement when(conditons)、prop: if((conditions),value);
例子1：在less中使用一个带参类名展示上下左右四个方向的纯CSS三角形
.triangle(@val) when(@val=left){
width: 0;
height: 0;
border-left: none;
border-right: 20px solid #f00;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
.triangle(@val) when(@val=right){
width: 0;
height: 0;
border-right: none;
border-left: 20px solid #f00;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
.triangle(@val) when(@val=top){
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: none;
border-bottom: 20px solid #f00;
}
.triangle(@val) when(@val=bottom){
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
border-bottom: none;
}
.div1{
.triangle(left);
}
.div2{
.triangle(right);
}
.div3{
.triangle(top);
}
.div4{
.triangle(bottom);
}例子2：
background: if((true), #f00);(2)循环
例子：将8个td的背景依次更换为bg_1.png、bg_2.png、…、bg_8.png
table td{
width: 200px;
height: 200px;
.loop(@i) when(@i<9){
&:nth-child(@{i}){
background: url(~"../images/partner_@{i}.png") no-repeat;
}
.loop(@i+1);
}
.loop(1);
}(3)列表
@backgroundlist: apple, pear, coconut, orange;(4)less函数库
image-size(“bg.png”) 获取图片的Width和Height
image-width() 获取图片的Width和Height
image-height() 获取图片的Width和Height
convert(9s, ms) 转换9秒为毫秒
convert(14cm, mm) 转换14厘米为毫米更多函数参考官方函数库，包括混合函数、数学函数、字符串函数、列表函数等等
7、使用JS表达式
less中还可以引用js表达式，不过一般都不推荐使用，此种方式在使用nodejs将less编译css时可能会报错。
格式：`javascript`
例子：将高度设置为当前获取到的浏览器的高度
@fullHeight: unit(` window.screen.height `, px);
div{
height: @fullHeight;
}尝试将@width: unit(` window.screen.width `, px)引进vw布局？
不推荐，不建议less在正式环境中使用，使用LESS时需要在头部引入js，而在js执行时的时候，会消耗时间，而less编译需要在js执行后，会在一定程度上影响到性能。
码字不易，后面还会放出各种文章，喜欢的关注一下我吖，你们的关注是我最大的动力
github：github.com/hn-failte
个人博客：hn-failte.github.io