css预处理器-scss

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

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

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文件的扩展名 是 .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文件中。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值