这是我参与11月更文挑战的第19天，活动详情查看：2021最后一次更文挑战
一、Less、Sass/Scss是什么?
1、Less： 是一种动态样式语言. 对CSS赋予了动态语言的特性，如变量、继承、运算、函数。
Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可在服务端运行。
2、Sass： 是一种动态样式语言，Sass语法属于缩排语法，
比css比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等)，更容易阅读。
Sass与Scss是什么关系? Sass的缩排语法，对于写惯css前端的web开发者来说很不直观，也不能将css代码加入到Sass里面，因此sass语法进行了改良，Sass 3就变成了Scss(sassy css)。与原来的语法兼容，只是用{}取代了原来的缩进。
二、less和sass的相同之处 Less和Sass在语法上有些共性，比如下面这些：
1、混入(Mixins)——class中的class；
2、参数混入——可以传递参数的class，就像函数一样；
3、嵌套规则——Class中嵌套class，从而减少重复的代码；
4、运算——CSS中用上数学；
5、颜色功能——可以编辑颜色；
6、名字空间(namespace)——分组样式，从而可以被调用；
7、作用域——局部修改样式；
8、JavaScript 赋值——在CSS中使用JavaScript表达式赋值。
三、less和sass的区别 Less和Sass的主要不同就是他们的实现方式。
Less是基于JavaScript，是在客户端处理的。
Sass是基于Ruby的，是在服务器端处理的。
关于变量在Less和Sass中的唯一区别就是Less用@，Sass用$。
1、Less： 【两种注释方式】
①//less中的注释，但这种不会被编译
②/*
这也是less中的注释，但是会被编译 */
2、【less中的变量】 1、声明变量:
@变量名:变量值;
使用变量: @变量名
less中变量的类型：
①数字类 1 10px
②字符串：无引号字符串 red ;有引号字符串 "haha"
③颜色类：red #000000 rgb()
④值列表类型：用逗号和空格分隔 10px solid red
变量使用原则：
多次频繁出现的值、需要修改的值，设为变量
2、混合(MiXins)
①无参混合
声明：.name{}
选择器中调用：.name;
②代参混合
无默认值
声明：.name(@param){}
调用：.name(parValue);
有默认值
声明：.name(@param:value){}
调用：.name(parValue); //parValue可省
如果声明时，参数没有默认值，则调用时必须赋值，否则报错！
无参混合，会在css中编译除同名的class选择器，有参的不会
3、less的匹配模式： 使用混合进行匹配，类似于if结构
声明：
.name(条件一，参数){}
.name(条件二，参数){}
.name(@_,参数){}
调用：
.name(条件值，参数值);
匹配规则：根据调用时提供的条件值去寻找与之匹配的"MiXins"执行，其中@_表示永远需要执行的部分
4、less中的运算
-
-
- / 可带、可不带单位
-
颜色运算时，红绿蓝分三组计算，组内可进位，组间互不干涉
5、if条件结构： @if 条件 {}@else {}
6、for循环结构： //不包含10;
@for $i from 1 to 10{}
//包含10;
@for $i from 1 through 10{}
7、while循环结构： $j: 1;
@while $j<10 {
.while#{$j} { border:#{$j}px solid red;
}
j+1;
}
8、each循环遍历 @each item in a,b,c,d{//item表示每一项}
