scss的歷史
2007年 發行
2016年 徹底成熟css
sass是什麼
sass就是把全部分號冒號都去掉的css(哈哈哈)html
【一本正經】
sass的官方解釋器是開源的而且用Ruby語言寫成的
可是也有用PHP、C語言、Java等實現的版本
(C語言版本叫作llibSass,Java語言版本叫作JSass)
SassScript提供如下功能:變量、嵌套、混入(Mixin)、選擇器繼承等。前端
//就像這樣... (縮進 格式必須這樣寫) body color red div color blue
而後呢……
你們以爲很差使(最主要是前端工程獅看不懂) 就特別不開心
因此就又把分號冒號都加上了……
再而後 scss就出生了node
scss是什麼
在sass的基礎上把分號冒號都加回來
其實就是css增強版...webpack
body{ color:red; } p{ color blue }
安裝node
必須安裝node(本身百度吧)
node安裝完成後 會自帶一個 npm
yarn 裝不裝都行 npm若是處理問題就裝個yarngit
查看安裝是否成功的方式:
一、git bash裏看
二、cmd 的快捷鍵:鍵盤上的小旗鍵 加 Rweb
//這兩個命令都同樣:/* node -v 輸入後安回車顯示版本 npm -v 輸入後安回車顯示版本 yarn -v 輸入後安回車顯示版本
配置淘寶的源
須要配置淘寶的源 http://npm.taobao.org/
千萬不要裝 cnpm
若是鏈接有問題 就百度npm淘寶 第一篇文章就能夠看到npm
不會的能夠點下面這個連接
https://segmentfault.com/a/11...segmentfault
安裝 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/
根着紅色提示走就好啦
本章 完 。