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

查看安装是否成功的方式：
一、git bash里看
二、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/

根着红色提示走就好啦

---

本章 完 。