sass文檔

假設(shè)設(shè)計(jì)稿是640px,稿內(nèi)div寬高256px*128px。
在使用動(dòng)態(tài)rem時(shí)，通常我們需要手動(dòng)轉(zhuǎn)換將px值轉(zhuǎn)換為對應(yīng)的rem，但這過程略顯繁瑣，這時(shí)我們可以借助工具實(shí)現(xiàn)自動(dòng)轉(zhuǎn)換。

1.安裝

npm config set registry https://registry.npm.taobao.org/ 
touch ~/.bashrc 
echo 'export SASS_BINARY_SITE="https://npm.taobao.org/mirrors/node-sass"' >> ~/.bashrc
source ~/.bashrc 
npm i -g node-sass 

2.編輯scss

mkdir ~/Desktop/scss-demo
cd ~/Desktop/scss-demo
mkdir scss css
touch scss/style.scss
cd ~/Desktop/scss-demo
vi scss/style.scss //編輯scss

Vim/Vi中按i進(jìn)入編輯模式，在scss文件里添加:

@function px( $px ){
  @return $px/$designWidth*10 + rem;
}

$designWidth : 640; //640是設(shè)計(jì)稿的寬度，你要根據(jù)設(shè)計(jì)稿的寬度填寫。
.child{
  width: px(320);
  height: px(160);
  margin: px(40) px(40);
  border: 1px solid red;
  float: left;
  font-size: 1.2em;
}

Vim/Vi中保存并退出:按Esc+:wq+按Enter
編輯scss文件就會(huì)自動(dòng)得到css文件

3.把scss變成css

node-sass -wr scss -o css

當(dāng)前終端不要關(guān)它會(huì)一直監(jiān)聽變化，再開個(gè)分欄? + d
修改你的內(nèi)容并保存，然后按Esc+:wq+按Enter

cd ~/Desktop/scss-demo
vi scss/style.scss 
保存`Esc`+`:wq`+按`Enter`
cat css/style.css//查看結(jié)果

[圖片上傳失敗...(image-cb7c28-1652623255212)]
px就是你的像素值，根據(jù)你的實(shí)際情況更改