less与scss的区别

相同点

(1)LESS和SCSS都是css的预处理器，可以拥有变量，运算，继承，嵌套的功能，使用两者可以使代码更加的便于阅读和维护。
(2)都可以通过自带的插件，转成相对应的css文件。
(3)都可以参数混入，可以传递参数的class，就像函数一样
(4)嵌套的规则相同，都是class嵌套class

不同点

声明和变量的使用

less使用@符号 scss使用$符号

@bgcg: #bfbcbc30;
$bgcr:red;
body {
	background-color: @bgcg;
	color:@bgcr;
}

变量插值

less

@main:search;
        .@{main}{
            color:green;
        }

scss

$main:search;
        .${main}{
            color:green;
        }

scss支持条件语句 less不支持

@for $i from 1 to 10 {
            .border-#{$i} {
              border: #{$i}px solid blue;
            }
        }

应用外部css文件方式不同

SCSS应用的css文件名必须以‘_’开头（下划线）

颜色函数

LESS使用spin()的函数；SCSS使用名为adjust_hue()的函数
less

@success:darken(spin(@success,-10),10%);

    scss

$success:darken(adjust_hue(@success,-10),10%);

引用父选择器&符号的使用

LESS和SCSS都可以使用&符号表示父选择器，但是SCSS的&符号只能出现在一个组合选择器的开始位置，LESS则没有这个限制