sass(scss) 与 less

sass 和 less 都是我们css的扩展语言，他们完全兼容css的写法并为css添加了许多新的功能。

sass基于ruby语言开发而成，因此安装sass之前需要安装Ruby

windows 通过Ruby 官网（https://rubyinstaller.org/downloads/）下载并完成安装

安装过程中需要勾选Add Ruby executables to your PATH 添加到系统的环境变量否则安装wanchengho

需要手动配置

如下图：

安装完后需要测试安装是否成功，打开cmd

ruby -v
//如安装成功会打印
ruby 2.6.4p104 (2019-08-28 revision 67798) [x64-mingw32]

ruby 安装完成后可以在控制台输入下面命令安装sass

gem install sass

或者用

推荐使用node环境 npm 包管理器进行安装使用如下命令：

npm install -g less

sass app.scss app.css

使用上面命令可以将app.scss 文件编译成 app.css

less 编译：

lessc test.less > test.css

使用上面的命令可以将test.less 编译成test.css

sass 和less 完全支持css的语法

除此之外，还拓展了以下语法：

父子关系嵌套写法：

.box{
	width:70px;
	height:70px;
	.head{
		background:red
	}
}

编译出来的结果为：

.box{
	width:70px;
	height:70px;
}
.box .head{
	background:red
}

其他使用变量嵌套导入混合器....等功能有兴趣自行拓展

sass中文网：

less中文网