PX2REM

sass文档

假设设计稿是640px,稿内div宽高256px*128px。
在使用动态rem时，通常我们需要手动转换将px值转换为对应的rem，但这过程略显繁琐，这时我们可以借助工具实现自动转换,将px自动变成rem。

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进入编辑模式，在scss文件里添加:

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

$designWidth : 640; //640是设计稿的宽度，你要根据设计稿的宽度填写。
.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文件就会自动得到css文件

3.把scss变成css

node-sass -wr scss -o css

当前终端不要关它会一直监听变化，再开个分栏⌘ + d
修改你的内容并保存，然后按Esc+:wq+按Enter

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

px就是你的像素值，根据你的实际情况更改

欢迎点击 我的博客 查看更多文章