PHPStorm安装sass

冷不防 2022-05-22 13:27 347阅读 0赞

1. 安装 PHPStorm 的 SASS 插件

打开 setting -> plugins  搜索sass support

![70][]

2. 安装 Ruby

Windows 版本下载地址：

[http://rubyinstaller.org/downloads/][http_rubyinstaller.org_downloads]

![70 1][]

Linux or Mac 地址：

[http://ruby.taobao.org/mirrors/ruby/][http_ruby.taobao.org_mirrors_ruby]

3. 安装 SASS 和 Compass

点击打开 start command prompt with ruby

![70 2][]

运行

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

![70 3][]

会生成三个文件夹和一个 config.rb 文件

在 sass 目录下存放我们自己的样式代码，编译后会自动生成到 stylesheets 目录下，当然你也可以自定义生成地址

5. 配置 Compass 编译环境

打开 setting -> Language & Framework 下面有个 Compass

![70 4][]

勾选 Enable 后 设置你自己安装的 ruby  comopass.bat 路径 和 当前项目的 config.rb 文件路径

6. 配置 SASS 环境

打开 setting -> Tools -> FileWatchers

点击右侧绿色的加号 添加一个 compass scss 项目，配置如下

![70 5][]

应该使用默认的配置就可以的了。

working directory 就是你 刚才用 compass create 的项目目录

新建文件File改后缀为scss，就可以了

注意，新建之后会看到如下提示，因为我们用了compass，所以选择Compass就可以了，点进去点ok

![70 6][]

如果代码中有中文可以

@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();

[70]: /images/20220522/ef3ba1db401d4c639bfb859cffec622b.png
[http_rubyinstaller.org_downloads]: http://rubyinstaller.org/downloads/
[70 1]: /images/20220522/b48665be095e45009749607edb12df83.png
[http_ruby.taobao.org_mirrors_ruby]: http://ruby.taobao.org/mirrors/ruby/
[70 2]: /images/20220522/870490540ba542ef87f233b2b6c03030.png
[70 3]: /images/20220522/26d0ebcdaeda4a98ba2313583609b4de.png
[70 4]: /images/20220522/7749b1c09b754faca271e55c254680e0.png
[70 5]: /images/20220522/5468ab825fb94895a0a1cb806a081b17.png
[70 6]: /images/20220522/4e5d9c210fa448b38cc5a725e513707c.png