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/


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

文章来源: PHPStorm安装sass

人吐槽 人点赞

猜你喜欢

发表评论

用户名: 密码:
验证码: 匿名发表

你可以使用这些语言

查看评论:PHPStorm安装sass