sass/scss和less的区别：
相同点：变量 混入(Mixins) 嵌套 运算 命名空间 作用域 函数
不同点：
1、编译环境不一样
Sass是在服务端解决的，以前是Ruby，当初是Dart-Sass或Node-Sass，而Less是须要引入less.js来解决Less代码输入css到浏览器，也能够在开发环节应用Less，而后编译成css文件，间接放到我的项目中。
2、编写变量的形式不同。Sass应用$，而Less应用@。
3、Sass反对条件语句，能够应用if{}else{},for{}循环等等。而Less不反对。
正文
less提供两种正文：/**/和//
两者的区别是/**/会将正文编译到css文件中，而//不会。
变量
Less中的变量有以下规定：
以@作为变量的起始标识，变量名由字母、数字、_、-组成；
没有先定义后应用的规定；
定义时 "@变量名: 变量值;" 的模式；援用时采纳 "@变量名" 或 "@{变量名}" 的模式.
f.box{ background-color: @color;}// 甚至能够用变量名定义为变量: @fnord: "I am fnord.";@var: 'fnord';content: @@var;// 解析后content: "I am fnord."; 变量能够用相似ruby和php的形式嵌入到字符串中，像@{name}这样的构造
@base-url: "http://assets.fnord.com";background-image: url("@{base-url}/images/bg.png");混合
混合能够将一个定义好的class A轻松的引入到另一个class B中，从而简略实现class B继承class A中的所有属性。咱们还能够带参数地调用，就像应用函数一样。
@testz_width:300px;.box{ width: @testz_width; height: @testz_width; background-color: yellow; .border;}.border{ border: solid 5px pink;}// 输入：.box { width: 300px; height: 300px; background-color: yellow; border: solid 5px pink;}咱们还能够带参数地调用，就像应用函数一样。
// 混合带参数.border_02(@border_width){ border: solid yellow @border_width;}.text_hunhe{ .border_02(30px);}// 输入：.border { border: solid 5px pink;}咱们还能够混合是默认带参，当调用的class不传参时，就会传入默认参数
// 混合－默认带值.border_03(@border_width:40px){ border: solid green @border_width;}.test_hunhe_03{ .border_03();}// 输入：.test_hunhe_03 { border: solid #008000 40px;}arguments蕴含了所有的传递进来的参数，不必独自解决每一个参数
.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) { box-shadow: @arguments; -moz-box-shadow: @arguments; -webkit-box-shadow: @arguments;}.box-shadow(2px, 5px);// 编译过后的后果是：.box-shadow{ box-shadow: 2px 5px 1px #000; -moz-box-shadow: 2px 5px 1px #000; -webkit-box-shadow: 2px 5px 1px #000;}匹配模式与导引
有些状况下，咱们想依据传入的参数来扭转混合的默认出现。咱们就能够应用匹配模式。能够了解为其余语言中的switch。以下是一个匹配模式的例子：
.triangle(top,@w:5px,@c:#ccc){ border-width: @w; border-color: transparent transparent @c transparent; border-style: dashed dashed solid dashed; }.triangle(bottom,@w:5px,@c:#ccc){ border-width: @w; border-color: @c transparent transparent transparent; border-style: solid dashed dashed dashed; } .triangle(left,@w:5px,@c:#ccc){ border-width: @w; border-color: transparent @c transparent transparent; border-style: dashed solid dashed dashed; } .triangle(right,@w:5px,@c:#ccc){ border-width: @w; border-color: transparent transparent transparent @c; border-style: dashed dashed dashed solid; } .triangle(@_,@w:5px,@c:#ccc){ width: 0; height: 0; overflow: hidden; } 定义好less后咱们就能够进行匹配：
html：<div class="sanjiao"></div>less：.sanjiao{ .triangle(right,100px); // 匹配到第四和第五个混合}后果输入：
当咱们想依据表达式进行匹配，而非依据值和参数匹配时，导引就显得十分有用。
.mixin (@a) when (lightness(@a) >= 50%) { background-color: black;}.mixin (@a) when (lightness(@a) < 50%) { background-color: white;}.mixin (@a) { color: @a;}lightness为less定义的函数，这个函数是用来返回HSL色彩模式的亮度（lightness）。返回值为0-100%的百分比数或 0-1 的整数。
// 运行如下代码：class1 { .mixin(#ddd) }.class2 { .mixin(#555) }// 就会失去：.class1 { background-color: black; color: #ddd;}.class2 { background-color: white; color: #555;}导引序列应用逗号‘,’宰割，当且仅当所有条件都合乎时，才会被视为匹配胜利。导引中可用的全副比拟运算有： > >= = =< <。
.m-mixin (@a) when (@a > 10), (@a < 100) { ... }// 导引能够没有参数，也能够对参数进行比拟运算@media: mobile;.mixin () when (@media = mobile) { ... }.mixin () when (@media = desktop) { ... }.max (@a, @b) when (@a > @b) { width: @a }.max (@a, @b) when (@a < @b) { width: @b }如果想要基于值的类型进行匹配的话，能够应用is表达式进行判断
.mixin (@a, @b: 0) when (isnumber(@b)) { ... }.mixin (@a, @b: black) when (iscolor(@b)) { ... }常见的检测函数：iscolor、isnumber、isstring、iskeyword、isurl
判断一个值是纯数字，还是某个单位量，能够应用函数：ispixel、ispercentage、isem
应用and/not关键字实现与/非条件
.mixin(@a) when (isnumber (@a) ) and (@a > 0) {...}.mixin(@b) when not ( @b > 0){...}运算与防止编译
任何数字、色彩或者变量都能够参加运算. 来看一组例子:
@base: 5%;@filler: @base * 2;@other: @base + @filler;@base-color: #888 / 4;background-color: @base-color + #111;height: 100% / 2 + @filler;如果像上面这样单位运算的话:
@var : 1px + 5; // 6pxwidth : (@var + 5 ) *2; // 被容许应用括号border: (@width * 2) solid black; // 能够在合乎属性中进行应用那么如果咱们不心愿less进行运算，而是将表达式输入呢？
例如css3中新增的属性calc()，其最大的益处就是用在流体布局上，浏览器能够通过calc()计算失去元素的宽度。
less中也思考到了这点，咱们能够应用～“表达式”来防止编译，这样就可原样输入表达式
.test_03{ width:~"calc(300px-30px)";}// 输入：.test_03{ width:calc(300px-30px);}嵌套
ESS 能够让咱们以嵌套的形式编写层叠款式. 让咱们先看下上面这段 CSS:
#header { color: black; }#header .navigation { font-size: 12px;}#header .logo { width: 300px; }#header .logo:hover { text-decoration: none;}// 在 less 中, 咱们就能够这样写:#header { color: black; .navigation { font-size: 12px; } .logo { width: 300px; &:hover { text-decoration: none } }} 留神 & 符号的应用—如果你想写串联选择器，而不是写后辈选择器，就能够用到&了. 这点对伪类尤其有用如 :hover 和 :focus.
函数
less自身提供了一系列的色彩运算函数。色彩会被转化成为HSL色调空间，而后在通道级别操作。
lighten(@color, 10%); // 返回一个比@color低10％更轻的色彩darken(@color, 10%); // 返回一个比@color高10％较暗的色彩saturate(@color, 10%); // 返回比@color多饱和度10％的色彩desaturate(@color, 10%); // 返回一个比@color少饱和度10％的色彩fadein(@color, 10%); // 返回一个比@color少10％透明度的色彩fadeout(@color, 10%); // 返回一个比@color多10％透明度的色彩fade(@color, 50%); // 返回一个色彩透明度为50％的色彩spin(@color, 10); // 返回色调比@color大10度的色彩spin(@color, -10); // 返回一个比@color小10度色调的色彩mix(@color1, @color2); // 返回一个混合@ color1和@ color2的色彩举个小栗子：
@base: #f04615;.class { color: saturate(@base, 5%); background-color: lighten(spin(@base, 8), 25%);}能够获取色彩的具体参数
hue(@color) //获取色相saturation(@color) //获取饱和度lightness(@color) //获取明度也能够在一种色彩的通道下面创立另外一种色彩,@new 将会放弃 @old的 色调, 然而具备不同的饱和度和亮度.@new: hsl(hue(@old), 45%, 90%);
Math函数：less提供了一组不便的数学函数，能够应用它们解决一些数字类型的值。
round(1.67); // returns `2`ceil(2.4); // returns `3`floor(2.6); // returns `2`percentage(0.5); // returns `50%`// 以及如下函数：sqrt:平方根函数 （保留单位）abs:取绝对值 （保留单位）三角函数（返回数值)反三角函数（返回以弧度为单位的角度)pi:返回圆周率 pow(a，b):返回a的b次方 mod（a，b:返回第一个参数对第二参数取余的后果min:返回最小的值 max:返回最大的值类型函数：验证待验证的值是否为某一类型 例如：isnumber()、isstring()、iscolor()、iskeyword()、isurl() 等等。上面简略介绍isnumber()函数
如果待验证的值为数字则返回 true ，否则返回 false 。参数：value - 待验证的值或变量。返回值：如果待验证的值为数字则返回 true ，否则返回 false 。案例： isnumber(#ff0); // false isnumber(blue); // false isnumber("string"); // false isnumber(123 4); // true isnumber(56px); // true isnumber(7.8%); // true命名空间
有时候，咱们可能更好地组织CSS或是单纯的为了更好地封装，咱们会将会一些变量或是混合模块进行打包操作，为了后续进行复用
#bundle { .button () { display: block; border: 1px solid black; background-color: grey; &:hover { background-color: white } } .tab { ... } .citation { ... }}// 当咱们想要在某一个中央引入button的款式的时候：#header a { color: orange; #bundle > .button;}作用域
less的作用域和其余编程语言非常的类似，首先在本地的变量和混合模块进行查找，如果没有找到的话，就会去父及作用域查找，直到找到为止。
@var: red;#page { @var: white; #header { color: @var; // white }}#footer { color: @var; // red }importing(导入)
咱们如果想要引入less文件，.less的后缀能够有能够没有
@import "lib.less";@import "lib";然而想要导入一个CSS文件而且不心愿less对它进行解决，只有加上CSS后缀就能够了。这样的话less就能够跳过，不去解决他了。import "lib.css";
JavaScript表达式
（1）JavaScript 表达式也能够在.less 文件中应用. 能够通过反引号的形式应用:
@var: `"hello".toUpperCase() + '!'`; // @var :"HELLO!"（2）也能够同时应用字符串插值和防止编译
@str: "hello";@var: ~`"@{str}".toUpperCase() + '!'`; //@var: HELLO!;（3）能够拜访JavaScript的环境
@height: `document.body.clientHeight`;（4）将一个JavaScript字符串解析成16进制的色彩值，能够应用 color 函数
@color: color(`window.colors.baseColor`);@darkcolor: darken(@color, 10%);参考：
https://www.jianshu.com/p/9f6...
https://www.jianshu.com/p/35c...