首先來看一下sass和less的區別
sass和less都是css的預編譯處理語言，他們引入了mixins，參數，嵌套規則，運算，顏色，名字空間，作用域，JavaScript賦值等 加快了css開發效率,當然這兩者都可以配合gulp和grunt等前端構建工具使用
sass和less主要區別:在於實現方式 less是基於JavaScript的在客戶端處理，引入less.js就可以處理，sass是基於ruby所以在服務器處理。
sass優點:
用戶多，更容易找到會用scss的開發，更容易找到scss的學習資源；
可編程能力比較強，支持函數，列表，對象，判斷，循環等；相比less有更多的功能。
less優點
可以在瀏覽器中運行，實現主題定制功能；
npx create-react-app new-app cd new-app npm start
接下來運行npm run eject講webpack配置彈射出來（這一步其實可以先不彈射，為了方便 在這彈射，注意注意注意⚠️ 彈射不可逆），並安裝sass
cnpm install node-sass sass-loader --save
將index.css和App.css改為index.scss和App.scss ，目錄如下
index.js和App.js引入地址改為引入./scss
這個時候頁面沒有任何的變化，一切正常（那我們彈射項目有什么用呢？不要着急，我們接着往下走）
接下來我們做移動端適配（這的方案是vw/vh）
我們在index.scss里面加上一下代碼（切記標點符號，否則會報錯）
這個時候我們在App.scss文件里面來書寫移動端測量出來的代碼（我們在這用px和vw作區分）
這個時候我們看頁面的變化
我們發現vw並沒有生效，為什么呢 （因為在index.scss中的函數這個時候並不是全局的而是局部的，也就是說 函數在index.scss中是可以用的，但在別的文件中是不能用的）
這個時候就要在webpack中做一些配置（前面的彈射用到了吧 哈哈）
我們安裝一個npm包
cnpm install sass-resources-loader --save
在config文件夾下面webpack.config.js文件里面加上一下代碼
加代碼之前如下
加代碼之后
這個時候我們在重啟項目（每當改配置文件之后就需要重啟項目）在看頁面
這個時候寬度已經是vw因為我們是750的設計稿 dpr為2 比例就是2 當我們設計稿的寬度為100px時 我們在代碼中就要寫成vw(200)
這樣就做到了利用sass的函數和變量vw/vh來做到移動端適配