SCSS是什么
加强版的CSS
SaSS的历史
Awesome非常厉害的类CSS语言2007年第一版2016年完全成熟
把所有括号分号冒号都去掉的CSS
SCSS在Sass基础上把括号冒号分号都又重新加了回来Ruby语言写的 Rails全栈框架
安装与运行
零配置学习-使用parcel parcel代替webpack的
npx parcel index.html把你的html跑起来
零配置学习-使用jsbin.com
最简单的几个语法
1.嵌套选择器 2.变量 3.mixin 4.placeholder
可以使用变量
如$r:red; h1{color:$r}
可以使用嵌套
如：body{border:1px solid red;
>ul{
border:2px solid green;
}
}
可以把一堆代码写在一起，起一个名字，在不同地方使用，这种方法叫mixin，还可以接受变量，并且设置默认值，选择器不放一起，样式每次都复制一次
mixin只是把代码机械的复制了，并没有节省代码量，为了解决这个问题，发明了placeholder，样式写一次，选择器放一起
在线编码网站jsbin codepen codesandbox
BEM（block element modifier） CSS命名法
- 主要名字.user-card
- 细节部分 .user-card__picture .user-card__name
- 状态部分 .user-card--active
直接加&符号可以省略前置部分代码
嵌套属性，属性也是可以嵌套的，比如font-size,font-family可以嵌套写
注释，
css注释/这是CSS注释/
sass注释//这是sass注释
变量也是可以有作用域的CSS变量的作用域覆盖
支持加减乘除取余
颜色相关运算，提供了一套操控颜色的函数，30多种关于颜色的函数
关于字符串插值
配置好功夫剧，直接开干
一套css，适应所有手机，
只用vw，放弃所有px，用页面宽度作为我们布局的唯一标准
mixin %和function的区别
vue-ElementUI饿了么出品 新时代的bootstrap
react-AntDesign阿里巴巴出品
vue-cli单间vue的应用
如果在gitbash下出现无法上下选中的情况，需要更换命令行工具，或者百度一下即可解决
elementUI最高级的用法就是找到你想要的，放到合适的地方
et -i会生成sass文件
et 会把sass文件编译成需要的文件
首先全局安装vue-cli
然后使用vue-cli创建vue的hello-world
在hello-world里面引入element-ui
基于elementUI使用et（element-theme）工具创建index.css
将index.css引入vue，旧可以得到新的elementUI
一个项目只能使用npm或yarn不能同时使用
SCSS配置多页面
新建文件夹
npm init -y初始化
引入webpack，webpack-cli，最好使用yarn来安装
运行npx webpack npx默认与nodejs同时安装，无需额外安装
在webpack.config.js中设置模式，开发或者生产模式
安装webpack-dev-server
安装html-webpack-plugin插件
运行webpack-dev-server npx webpack-dev-server
