SCSS 環境配置

sass 和 scss 是什麼

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

圈出的這兩個用誰都行
clipboard.png

獲取預覽連接

圈出的爲預覽連接 放入瀏覽器就能瀏覽啦
clipboard.png
它要一直運行 千萬不要斷 須要寫別的命令 就另開一個窗口
ctrl + c 中斷運行

工具安裝

另開一個命令窗口
輸入如下代碼

//第一步
npm init -y

//第二步
npm i -D parcel
//parcel 是代替 webpack 不須要任何配置就能使用 webpack 的工具

安裝成功後 使用命令 進入你的項目目錄
輸入如下代碼

npx parcel 你的文件名.html

用這個命令就能夠把你寫的scss sass 自動轉爲 css

clipboard.png
輸入紅色網址 便可瀏覽

若是安裝失敗
百度搜索:node sass安裝失敗
自行解決


不想安裝 只想學 馬上 立刻的那種

真的是懶人必備……
戳這裏:
https://codepen.io/pen/

根着紅色提示走就好啦
clipboard.png

clipboard.png


本章 完 。

相關文章
相關標籤/搜索