105 lines
1.6 KiB
Markdown
105 lines
1.6 KiB
Markdown
|
# 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
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
或者用
|
|||
|
|
|
|||
|
|
#### 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/
|