php 编译 sass,vscode如何编译sass

7d043c237fa06c88a79d18e66c7df789.png

使用vscode来编译sass

第一步,在vscode中安装easy sass 下图是已经安装成功的状态

0a5d2822548657feaa217f8e1ef83ed7.png

第二步,修改vscode的配置"easysass.compileAfterSave": true,

"easysass.formats": [ //nested:嵌套缩进的 css 代码。

//expanded:没有缩进的、扩展的css代码。

//compact:简洁格式的 css 代码。

//compressed:压缩后的 css 代码

{

"format": "expanded",

"extension": ".css"

},

{

"format": "compressed",

"extension": ".min.css"

}

],

"easysass.targetDir": "css/" //路径

第三步,新建一个文件夹,在文件夹中新建两个文件夹,一个sass一个css,如果你没有建css文件夹,编译以后也会自动建一个文件夹的

3ce6f6032559ce0dd00969af0181ef80.png

第四步,然后再sass下面建立demo.sass,然后编写

第五步,按下ctrl + s,就直接编译了,因为你之前设置的时候设置了easysass.compileAfterSave为true,所以保存就会编译一次,这也是为了提高开发效率

最后你会发现再css下面多了一个 css文件,一个min.css文件,这是和你再设置了设置的有关系的,一个没有缩进,一个压缩的

8cd23151508e68ad226aff4fe2185b26.png

本文来自PHP中文网vscode教程栏目。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值