# 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

需要手动配置

如下图：

![image-20210105175431085](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210105175431085.png)



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

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

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

> gem install sass



或者用

#### less 安装

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

```
npm install -g less
```



### sass 使用 

```
sass app.scss app.css
```

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

less 编译：

```
lessc test.less > test.css
```

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



### sass 和 less语法

sass 和less 完全支持css的语法

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

父子关系嵌套写法：

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

 编译出来的结果为：

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



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

sass中文网：

https://www.sass.hk/guide/

less中文网

https://less.bootcss.com/