一、准备
- 下载Ruby:https://rubyinstaller.org/downloads/
- 安装过程中勾选Add Ruby executables to your PATH就会自动配置环境变量了
- 安装完成后,查看ruby版本和gem版本:ruby -v和gem -v
二、安装
gem install sass
三、查看版本
sass -v
四、编译命令
# --watch代表开启实时监听,
# --style指定压缩格式
*>sass --watch sass路径:css路径 --style [nested|expanded|compact|compressed]
五、输出风格
-
sass代码
nav
ul
margin: 0
padding: 0
list-style: none
li
display: inline-block
a
display: block
padding: 6px 12px
text-decoration: none
-
nested嵌套风格css代码
nav ul {
margin: 0;
padding: 0;
list-style: none; }
nav li {
display: inline-block; }
nav a {
display: block;
padding: 6px 12px;
text-decoration: none; }
-
expanded展开风格css代码
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
-
compact紧凑风格css代码
nav ul { margin: 0; padding: 0; list-style: none; }
nav li { display: inline-block; }
nav a { display: block; padding: 6px 12px; text-decoration: none; }
-
compressed压缩风格css代码
nav ul{margin:0;padding:0;list-style:none}nav li{display:inline-block}nav a{display:block;padding:6px 12px;text-decoration:none}