likes
comments
collection
share

🤔️不懂就问，你知道在开发静态页面时，如何使用sass吗？

作者站长头像
站长
· 阅读数 44

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

🤔️不懂就问，你知道在开发静态页面时，如何使用sass吗？我们可以看到文件夹中已经生成了index.css，还有一个map文件应该调试用的。

下面修改index.html

<link rel="stylesheet" href="index.css" />

保存看看页面的效果🤔️不懂就问，你知道在开发静态页面时，如何使用sass吗？

大功告成

总结

这篇文章先是简单介绍了sass，然后讲了在普通的页面中，如何使用sass，还给出了相应的示例。下面文章会讲更多sass语法

转载自:https://juejin.cn/post/7247342069616836645
评论
请登录