PHPStorm安装sass

1. 安装 PHPStorm 的 SASS 插件

打开 setting -> plugins 搜索sass support

2. 安装 Ruby

Windows 版本下载地址：

http://rubyinstaller.org/downloads/

Linux or Mac 地址：

http://ruby.taobao.org/mirrors/ruby/

扫描二维码关注公众号，回复： 1787509 查看本文章

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;

// 根据不同设备的屏幕宽度，定义<html>的基准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();

猜你喜欢