sass和less的区别

文件命名

less文件的后缀是.less;

sass文件的后缀是.scss;

变量

less变量用@声明,sass变量用$声明

less变量:

@color:red;

sass变量:

$color:red;

中划线还是下划线

sass中中划线与下划线等同,而less是不等同的

sass:

$link-color: blue;
a {
  color: $link_color;
}

//编译后

a {
  color: blue;
}

less:

$link-color: blue;
a {
  color: $link_color;
}

//无法编译

嵌套属性

less没有嵌套属性,sass有嵌套属性

用法:

nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}

//解析后
nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

混合

less的混合

.box(@color){
	color:@color;
}
p{
	.box(red);
}

//解析后
p{
	color:red;
}

sass的混合

$mixin box($color){
	color:$color;
}
p{
	@include box(red);
}

//解析后
p{
	color:red;
}