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

前端OnTheRun

已于 2022-11-01 19:29:44 修改

阅读量530

点赞数

CC 4.0 BY-SA版权

分类专栏：笔记 sass 文章标签： css sass scss

于 2021-08-24 19:47:18 首次发布

本文链接：https://blog.youkuaiyun.com/rowlet/article/details/119883844

笔记同时被 2 个专栏收录

84 篇文章

订阅专栏

sass

6 篇文章

订阅专栏

本文介绍了Sass的安装步骤，包括如何新建scss文件和css文件，并详细讲述了自动编译的过程，包括nested、compact、expanded和compressed四种编译方式及其在index.css中的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

安装

命令: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}