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/ |