Scss
Sass是“Syntactically AwesomeStyleSheets”的首字母缩写。尽管Sass是用Ruby语言编写的,但预编译器LibSass允许用其他语言解析Sass,并将其与Ruby解耦。Sass有一个庞大的活跃社区和广泛的网络学习资源,可供初学者使用。由于其成熟性、稳定性和强大的逻辑能力,Sass已经在CSS预处理器领域领先于其竞争对手。在Web前端培训中,有很多关于CSS的学习课程,可以让你快速掌握这门技术的使用,高效完成开发任务。
可以说,最流行的前端框架引导是用Sass编写的。在版本3之前,Bootstrap的编写语言较少,但Bootstrap4采用了Sass,提高了它的受欢迎程度。
sass中文官网
Sass世界上最成熟、稳定和强大的CSS扩展语言 | Sass中文网
菜鸟教程--sass
sass文件的扩展名 是 .sass
index3.sass
sass文件 如何 生成css文件?
在HBuilder X软件中

接着,在你的项目中的 index3.sass文件上,点击右键,按如下提示操作:

报错:
[编译scss/sass] 18:10:52.847 [0;31m--> LibSass 的二进制文件(E:\web前端代码编辑器\HBuilderX.3.3.13.20220314.full\HBuilderX\plugins\compile-node-sass\node_modules\node-sass-china\vendor\win32-x64-67\binding.node)缺失,请执行下面3条命令下载对应版本的二进制文件:(有可能引发此错误的原因是 Node 版本变更)
binding.node 你下载的hbuilderx 没有这个文件。要自己自行下载。
linux命令:
curl -o binding.node http://cdn.npm.taobao.org/dist/node-sass/v4.7.2/win32-x64-67_binding.node
doc命令:
md E:\web前端代码编辑器\HBuilderX.3.3.13.20220314.full\HBuilderX\plugins\compile-node-sass\node_modules\node-sass-china\vendor\win32-x64-67 cd E:\web前端代码编辑器\HBuilderX.3.3.13.20220314.full\HBuilderX\plugins\compile-node-sass\node_modules\node-sass-china\vendor\win32-x64-67 certutil.exe -urlcache -split -f http://cdn.npm.taobao.org/dist/node-sass/v4.7.2/win32-x64-67_binding.node
手动编译

自动编译
HbuilderX实现保存,自动编译,在配置文件设置key:"ctrl+s"和onDidSaveExecution:"true"
特别注意:
一定要选择 重启HbuilderX。配置文件更改,才会生效。
这是,你只要在index1.scss文件中编写css代码,ctrl+s保存。在index1.scss文件中编写的代码 会 自动编译,并将生成的css代码,放置在index1.css文件中。

Sass是一种成熟的、稳定的CSS扩展语言,以其强大的逻辑能力领先于其他预处理器。广泛应用于前端开发,如Bootstrap框架。Sass文件通常以.sass为扩展名,通过预编译工具转换成CSS。在HBuilder X中,可以设置自动编译,当Sass文件保存时,会自动生成对应的CSS文件。

被折叠的 条评论
为什么被折叠?



