2021-08-24 Sass学习笔记(六) sass的安装和使用

安装

命令:npm install -g sass

使用

新建一个scss文件

style.scss

body{
	font-size: 20px;
	ul{
		list-style-type: none;
		color:white;
		li{
			background-color: seagreen;
			margin:5px;
		}
	}
}

新建一个css文件(可以省略,自动生成)

index.css

//不用写代码

输入命令:sass xxx.scss:aaaaa.css

sass style.scss:index.css
发现scss文件被解析成css文件
index.css(若没有此css文件会自动生成)

body {
  font-size: 20px;
}
body ul {
  list-style-type: none;
  color: white;
}
body ul li {
  background-color: seagreen;
  margin: 5px;
}

正常引入css文件即可<link rel="stylesheet" href="style.css">

自动编译

输入命令:sass --watch xxx.scss:aaaaa.css
sass --watch style.scss:index.css
自动监听scss文件的变化并编译

设置编译方式

输出样式的风格可以有四种选择，默认为nested
nested：嵌套缩进的css代码
expanded：展开的多行css代码
compact：简洁格式的css代码
compressed：压缩后的css代码

命令:sass xxx.scss:aaaaa.css --style [编译方式]

1.nested 嵌套

输入命令:sass --watch style.scss:index.css --style nested,后index.css变成

body {
  font-size: 20px;}
	body ul {
	  list-style-type: none;
	  color: white;}
		body ul li {
		  background-color: seagreen;
		  margin: 5px;}

2.compact 紧凑

输入命令sass --watch style.scss:index.css --style compact后,index.css变成

body{font-size:20px}
body ul{list-style-type:none;color:#fff}
body ul li{background-color:#2e8b57;margin:5px}

3.expanded 扩展

输入命令sass --watch style.scss:index.css --style expanded后,index.css变成

body {
  font-size: 20px;
}
body ul {
  list-style-type: none;
  color: white;
}
body ul li {
  background-color: seagreen;
  margin: 5px;
}

4.compressed 压缩

输入命令sass --watch style.scss:index.css --style compressed后,index.css变成

body{font-size:20px}body ul{list-style-type:none;color:#fff}body ul li{background-color:#2e8b57;margin:5px}