SCSS是什么
加強版的CSS
SaSS的歷史
Awesome非常厲害的類CSS語言2007年第一版2016年完全成熟
把所有括號分號冒號都去掉的CSS
SCSS在Sass基礎(chǔ)上把括號冒號分號都又重新加了回來Ruby語言寫的 Rails全楅泡海框架
安裝與運行
零配置學(xué)習(xí)-使用parcel parcel代替webpack的
npx parcel index.html把你的html跑起來
零配置學(xué)習(xí)-使用jsbin.com
最簡單的幾個語法
1.嵌套選擇器 2.變量 3.mixin 4.placeholder
可以使用變量
如$r:red; h1{color:$r}
可以使用嵌套
如：body{border:1px solid red;
>ul{
border:2px solid green;
}
}
可以把一堆代碼寫在一起，起一個名字臀晃，在不同地方使用避消，這種方法叫mixin嫂用，還可以接受變量，并且設(shè)置默認值，選擇器不放一起井仰，樣式每次都復(fù)制一次
mixin只是把代碼機械的復(fù)制了恶守，并沒有節(jié)省代碼量第献，為了解決這個問題，發(fā)明了placeholder兔港，樣式寫一次庸毫，選擇器放一起
在線編碼網(wǎng)站jsbin codepen codesandbox
BEM（block element modifier） CSS命名法
- 主要名字.user-card
- 細節(jié)部分 .user-card__picture .user-card__name
- 狀態(tài)部分 .user-card--active
直接加&符號可以省略前置部分代碼
嵌套屬性，屬性也是可以嵌套的衫樊，比如font-size,font-family可以嵌套寫
注釋飒赃，
css注釋/這是CSS注釋/
sass注釋//這是sass注釋
變量也是可以有作用域的CSS變量的作用域覆蓋
支持加減乘除取余
顏色相關(guān)運算，提供了一套操控顏色的函數(shù)科侈，30多種關(guān)于顏色的函數(shù)
關(guān)于字符串插值
配置好功夫劇载佳，直接開干
一套css，適應(yīng)所有手機臀栈，
只用vw蔫慧，放棄所有px，用頁面寬度作為我們布局的唯一標準
mixin %和function的區(qū)別
vue-ElementUI餓了么出品 新時代的bootstrap
react-AntDesign阿里巴巴出品
vue-cli單間vue的應(yīng)用
如果在gitbash下出現(xiàn)無法上下選中的情況权薯，需要更換命令行工具姑躲，或者百度一下即可解決
elementUI最高級的用法就是找到你想要的，放到合適的地方
et -i會生成sass文件
et 會把sass文件編譯成需要的文件
首先全局安裝vue-cli
然后使用vue-cli創(chuàng)建vue的hello-world
在hello-world里面引入element-ui
基于elementUI使用et（element-theme）工具創(chuàng)建index.css
將index.css引入vue崭闲，舊可以得到新的elementUI
一個項目只能使用npm或yarn不能同時使用
SCSS配置多頁面
新建文件夾
npm init -y初始化
引入webpack肋联，webpack-cli，最好使用yarn來安裝
運行npx webpack npx默認與nodejs同時安裝刁俭，無需額外安裝
在webpack.config.js中設(shè)置模式橄仍，開發(fā)或者生產(chǎn)模式
安裝webpack-dev-server
安裝html-webpack-plugin插件
運行webpack-dev-server npx webpack-dev-server
