普通项目怎么使用scss

提前准备

-编辑器：VS Code 转载教程：https://www.cnblogs.com/clwydjgs/p/10078065.html

步骤

1.scss 官网：https://www.sass.hk/

2.下载ruby 并安装

3.运行 cmd

1.win建+R
2.输入：cmd
3.按回车
4.输入ruby -v
如安装成功会打印
ruby 2.6.4p104 (2019-08-28 revision 67798) [x64-mingw32]

ruby -v
ruby 2.6.4p104 (2019-08-28 revision 67798) [x64-mingw32]

3.更换gem源：因为国内网络的问题导致gem源间歇性中断因此我们需要更换gem源

//1.删除原gem源
gem sources --remove https://rubygems.org/

//2.添加国内淘宝源
gem source -a https://gems.ruby-china.com

//3.打印是否替换成功
gem sources -l   （这是L不是1）

//4.更换成功后打印如下
*** CURRENT SOURCES ***
https://ruby.taobao.org/
当执行这一步的时候,需要修改一下源地址

按网站步骤......一步一步进行

使用

1.打开 VS Code

2.安装插件：Live Scss Compiler

插件

3.此时已经可以使用了

实例测试

1.在电脑盘 新建一个项目(空文件夹)，拖入到VS Code 编辑器中

2.新建一个css文件夹 和 scss文件

新建 scss 文件夹目录

3.新建一个scss文件：style.scss，写scss样式，编译scss(第一次手动点击，之后保存时自动编译)，如下图：

编译scss，生成css

4.结果

图片.png

5.错误效果

时刻注意是否错误

错误提示效果

6.案例效果展示

1.文件夹结构和css引入

文件夹结构和css引入

2.效果如图

案例效果展示