VsCode-scss的安装与使用

scss的使用原因

less与scss部分功能是相同的,都可以简化样式的编写,但是在开发中发现,当希望通过函数处理某些数据的时候,无法定义数据的返回,
而scss可以完成对数据运算后返回数据方法的定义,因此决定使用scss

 @function rem($pixle){
    @return $pixle / 10;
}

.box{
    width:rem(20) rem;
}

scss的安装

看了网上的安装教程,发现都说先要安装Ruby作为运行环境,感觉非常麻烦,想到现在很多都可以直接通过npm进行安装,然后本人直接尝试了一下,安装完成后可以正常使用这里记录一下安装的过程:

安装nodejs

本人之前已经装过nodejs因此无需再次安装,因此可以直接使用npm,未安装的可以直接去查看nodejs的安装

设置npm全局安装

以上两个问题可以从以下位置找到解决方案:
https://blog.csdn.net/tjj3027/article/details/84751321

如果已经安装或设置过,直接看一下部分:

安装sass

npm install -g sass

安装easy sass

搜索商店,查找easy sass安装,完成后重启vscode即可

然后不需要设置任何内容,编写.scss文件后,自动保存即可生成以下的文件,甚至包括压缩的文件,非常nice!
在这里插入图片描述

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

三知之灵

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值