简介

        本文介绍less与sass(scss)的区别。

编译环境

less环境较sass简单

less：通过客户端处理的（基于JavaScrip）。

    法1：引入less.js来处理代码输出css到浏览器。

    法2：开发环节使用less，编译成css文件放在项目中。一般用 nmp或yarn将less和less-loader添加到项目里。

sass：通过服务端处理。相比less解析速度会快一点

    需要安装Ruby环境。

上手难度

less：容易上手

sass：上手难度略高

语法

less：变量符是@

sass：变量符是$

变量的作用域也不一样

less：{}内定义的变量为局部变量。

Sass3.4.0之前：没有局部变量，满足就近原则。（3.4.0之后已修复）

功能

条件语句

less

不支持条件语句

scss

支持if{}else{}、for{}循环语句

/** if else */
@if lightness($color) > 30% {
	/**	do....*/
} @else {
	/**	do....*/
}


/**	循环*/
@for $i from 1 to 10 {
  	.border-#{$i} {
    	border: #{$i}px solid red;
  	}
}

输出设置

less

没有输出设置

sass

提供4中输出选项：nested, compact, compressed 和 expanded

1. nested：嵌套缩进的css代码
2. expanded：展开的多行css代码
3. compact：简洁格式的css代码
4. compressed：压缩后的css代码

引入外部css

less

引用外部文件和css中的@import没什么差异。

scss

        scss引用的外部文件命名必须以_开头，文件名如果以下划线_开头的话，sass会认为该文件是一个引用文件，不会将其编译为css文件。

如下例所示：其中_test1.scss、_test2.scss、_test3.scss文件分别设置的h1 h2 h3。

// 源代码：
@import "_test1.scss";
@import "_test2.scss";
@import "_test3.scss";

// 编译后：
h1 {
  font-size: 17px;
}
 
h2 {
  font-size: 17px;
}
 
h3 {
  font-size: 17px;
}