Sass学习实践笔记（一）

一、准备

• 下载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}