sass的概念，作用，好处
Sass，全称为”Syntactically Awesome Stylesheets”，是一种强大的样式表预处理器，为前端开发人员提供了一种更优雅、更高效的方式来编写CSS。与传统的CSS相比，Sass引入了一系列的增强功能和扩展，旨在简化和改善样式表的编写过程。通过引入变量、嵌套规则、混合器、继承等概念，Sass使得前端开发者能够以更模块化、可重用的方式组织和管理样式代码。
Sass的作用不仅仅局限于样式的编写，它还可以提升开发工作流程的效率。
在平常开发中，我们使用项目往往是使用react，或者vue等框架，在框架之中，我们往往是使用sass-loader来支持sass语法，那么如果不使用框架，仅仅是普通的静态页面，又或者仅仅是在本地练习sass语法，应该怎么做呢
如何使用
首先新建一个文件夹，在文件夹中使用npm初始化
mkdir sass-test
cd sass-test
npm init -y
然后安装sass
npm i sass
安装了sass之后，就可以开始使用了。sass的命令行功能是这样的：
sass source.scss:aim.css
可以将sass文件转换成普通的css文件，还可以使用watch功能，来监测我们正在编写的文件，既可以监测文件夹，也可以监测文件。（相当于热部署）
sass --watch source.scss:aim.css
sass --watch ./scss:./css
下面开始实操
新建一个文件index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>sass demo</title>
</head>
<body>
<div class="container">
<div class="content">
I am a container.
</div>
</div>
</body>
</html>
文件中有一个div，待会用css语句来控制这个div的样式
然后创建一个index.scss，填入我们要设置的div样式，要用sass语法
.container {
.content {
height: 200px;
width: 200px;
background: cyan;
font-size: 24px;
line-height: 200px;
}
}
类名的嵌套，很明显的scss语法
然后我们将index.scss文件转化成index.css,好让index.html引用
npx sass --watch index.scss:index.css
我们可以看到文件夹中已经生成了index.css，还有一个map文件应该调试用的。
下面修改index.html
<link rel="stylesheet" href="index.css" />
保存看看页面的效果
大功告成
总结
这篇文章先是简单介绍了sass，然后讲了在普通的页面中，如何使用sass，还给出了相应的示例。下面文章会讲更多sass语法
原文链接：https://juejin.cn/post/7247342069616836645 作者：慢功夫
