1. 安装 PHPStorm 的 SASS 插件
打开 setting -> plugins 搜索sass support
2. 安装 Ruby
Windows 版本下载地址：
Linux or Mac 地址：
http://ruby.taobao.org/mirrors/ruby/
3. 安装 SASS 和 Compass
点击打开 start command prompt with ruby
运行
gem sources --remove https://rubygems.org/ gem sources -a https://ruby.taobao.org/ gem install sass gem install compass 4. 新建 Compass + SASS 项目
创建一个项目根目录，cd 进入后，执行：
compass create xxxx
会生成三个文件夹和一个 config.rb 文件
在 sass 目录下存放我们自己的样式代码，编译后会自动生成到 stylesheets 目录下，当然你也可以自定义生成地址
5. 配置 Compass 编译环境
打开 setting -> Language & Framework 下面有个 Compass
勾选 Enable 后 设置你自己安装的 ruby comopass.bat 路径 和 当前项目的 config.rb 文件路径
6. 配置 SASS 环境
打开 setting -> Tools -> FileWatchers
点击右侧绿色的加号 添加一个 compass scss 项目，配置如下
应该使用默认的配置就可以的了。
working directory 就是你 刚才用 compass create 的项目目录
新建文件File改后缀为scss，就可以了
注意，新建之后会看到如下提示，因为我们用了compass，所以选择Compass就可以了，点进去点ok
如果代码中有中文可以
@charset "utf-8";
注意，文件目录不能有中文
7. 开始写代码了
@charset "utf-8";
/*
1、写入CSS的尺寸/屏幕宽度 = UI图标注的尺寸/UI图宽度
即：写入CSS的尺寸 = (UI图标注的尺寸*屏幕宽度)/UI图宽度
2、我们将根元素设置为100px，则1rem=100px
然而为了不失真要计算出对应的比例，于是1rem = 屏幕宽度/UI设计图宽度*100px
即：屏幕640px，给的设计稿宽640px，那么这种情况下1rem就表示100px
如果屏幕320px，给的设计稿宽640px，那么这种情况下1rem就表示50px
要想做成响应式，只需要配合@media计算好对应屏幕下html font-size的值。
当然为了好计算，我们全部以100px为基准
3、于是：写入CSS的尺寸 = UI图标注的尺寸/100px*1rem
*/
// 计算rem的基准字体
$rem-base-font-size: 100px;
// UI设计图的分辨率宽度
$UI-resolution-width: 640px;
// 需要适配的屏幕宽度
$device-widths: 240px, 320px, 360px, 375px, 384px, 412px, 414px, 424px, 480px, 540px, 640px, 720px, 750px, 768px, 800px, 980px, 1024px, 1080px, 1152px, 1366px, 1440px, 2160px;
// 根据不同设备的屏幕宽度，定义
的基准font-size @mixin html-font-size() { @each $current-width in $device-widths { @media (min-width: $current-width) { html { $x: $UI-resolution-width / $current-width; // 计算出是几倍屏 font-size: $rem-base-font-size / $x; } } } } @include html-font-size();
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/207023.html原文链接：https://javaforall.net
