SCSS 环境配置

sass 和 scss 是什么

scss的历史

2007年发行
2016年完全成熟

sass是什么

sass就是把所有分号冒号都去掉的css（哈哈哈）

【一本正经】
sass的官方解释器是开源的并且用Ruby语言写成的
但是也有用PHP、C语言、Java等实现的版本
（C语言版本叫做llibSass，Java语言版本叫做JSass）
SassScript提供以下功能：变量、嵌套、混入（Mixin）、选择器继承等。

//就像这样... （缩进 格式必须这样写）
body
    color red
    
div
    color blue

然后呢……
大家觉得不好使（最主要是前端工程狮看不懂）就特别不开心
所以就又把分号冒号都加上了……
再然后 scss就出生了

scss是什么

在sass的基础上把分号冒号都加回来
其实就是css加强版...

body{
    color:red;
}
p{
    color blue
}

安装node

必须安装node（自己百度吧）
node安装完成后会自带一个 npm
yarn 装不装都行 npm如果处理问题就装个yarn

查看安装是否成功的方式：
1、git bash里看
2、cmd 的快捷键：键盘上的小旗键加 R

//这两个命令都一样：/* 
node -v  输入后安回车显示版本
npm -v   输入后安回车显示版本
yarn -v   输入后安回车显示版本

配置淘宝的源

需要配置淘宝的源 http://npm.taobao.org/
千万不要装 cnpm
如果连接有问题就百度npm淘宝第一篇文章就可以看到

不会的可以点下面这个链接
https://segmentfault.com/a/11...

安装 http-server

有了淘宝源才能安装

安装它用来查看当前的html

/* 命令行输入： */
npm install -g http-server

圈出的这两个用谁都行

获取预览链接

圈出的为预览链接放入浏览器就能浏览啦

它要一直运行千万不要断需要写别的命令就另开一个窗口
ctrl + c 中断运行

工具安装

另开一个命令窗口
输入以下代码

//第一步
npm init -y

//第二步
npm i -D parcel
//parcel 是代替 webpack 不需要任何配置就能使用 webpack 的工具

安装成功后使用命令进入你的项目目录
输入以下代码

npx parcel 你的文件名.html

用这个命令就可以把你写的scss sass 自动转为 css

输入红色网址即可浏览

如果安装失败
百度搜索：node sass安装失败
自行解决

真的是懒人必备……
戳这里：
https://codepen.io/pen/

根着红色提示走就好啦

本章完。