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

本文介绍了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}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端OnTheRun

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值