1、安装Ruby

2、安装sass

3、webstorm配置file watcher

4、移动端自适应

1、安装Ruby

  安装Ruby,有多种方式,打开官网下载

因为,使用的是window选择RubyInstall,下载地址

RubyInstall下载地址

选择对应系统的版本,下载完成,安装

添加到path,建议勾上,安装完成后,打开开始面板,会有一个Start Command Prompt with Ruby,命令行工具。

2、安装sass

  个人偏好sass,也可以选择less或stylus,打开上一步安装的Ruby命令行

输入gem list 看一下安装了那些包,接着gem install sass

3、webstorm配置file watcher

  打开webstorm,File -> settings -> Tools -> File Watchers

选择+号,新建scss

在输出参数位置,一般会加上--style *;展开格式nestedexpandedcompactcompressed,最传统的选择--style expanded,括号上下换行

工作文件夹和输出位置,可以根据项目来选择,放在同级目录,或者父级,点击insert macros

常见的有文件路径,父文件路径等等,可以自己尝试下,加深理解

4、移动端自适应

  最后,来个实战,基于单页面,做到了大多数手机屏幕很好的适应,包括DPI为2 和 DPI为3的都可以适应

选择淘宝的开源库lib-flexible,参考airen大神写的文章

因为内容较少,只是宣传页面,所以没有选择vue这类框架

直接HTML走起,因为使用了淘宝开源库,就不需要常用的

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

直接在head下引入阿里云的cdn

<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

搭配sass的mixin效果很棒

 @mixin font-dpr($font-size) {
font-size: $font-size; [data-dpr="2"] & {
font-size: $font-size * 2;
} [data-dpr="3"] & {
font-size: $font-size * 3;
}
} $baseFontSize: 75;
$FontSize: 16;
@mixin px2rem($name, $px1){
#{$name}: ($px1 / $baseFontSize) * 1rem;
} @mixin bg-image($url) {
background-image: url($url + "@2x.png");
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
background-image: url($url + "@3x.png");
}
}

对于font-size,需要使用px, 因为rem会导致,出现15.55px奇葩尺寸,中文点阵一般常用是12、14、16px

bg-image是用来自动识别DPI然后添加@2x或@3x后缀

@include px2rem(padding, 25);  // 生成
padding: 0.33333rem; @include bg-image('bubble'); // 生成
.wrapper .bubble {
background-image: url("bubble@2x.png");
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
.wrapper .bubble {
background-image: url("bubble@3x.png");
}
} @include font-dpr(18px); // 生成
.content {
font-size: 18px;
}
[data-dpr="2"] .content {
font-size: 36px;
}
[data-dpr="3"] .content {
font-size: 54px;
}

其中data-dpr是屏幕的DPI,详细代码查看GitHub

webstorm下的sass自动编译和移动端自适应实践的更多相关文章

  1. webstorm 设置 sass自动编译问题

    sass语法.使用它带来的好处,就不再这里做介绍了,主要看怎么在webstorm里配置自动编译. sass编译是需要Ruby环境的,可以到这里去下载  :  https://rubyinstaller ...

  2. webstorm下设置sass

    关于sass,就不想多说什么了.只要你有css基础,十分钟入门好吗.可以参考下资料:http://www.w3cplus.com/sassguide/ 今天想说的是webStorm下如何实现sass自 ...

  3. Intellij Idea下tomcat设置自动编译

    *eclipse默认tomcat下是自动完成编译:而Intellij Idea默认tomcat下不是自动完成编译,从如下开始设置: 进入"settings",如下图找到" ...

  4. WebStorm怎么设置实现自动编译less文件

    首先,需要保证电脑安装过Node.js,下载地址:https://nodejs.org/en/ 安装Node.js的时候会自动安装npm 然后,安装lessc模块 打开cmd控制台 输入下面一行npm ...

  5. webstorm和intellij idea下如何自动编译sass和scss文件

    webstorm和intellij idea下如何自动编译sass和scss文件 https://segmentfault.com/a/1190000008996504 https://www.jia ...

  6. 在webstorm中配置sass的自动编译,并且可以指定编译后的css的目录.

    参考: WebStorm-2018.2-Help-Sass, Less, and SCSS 作者:tobyDing链接:https://www.jianshu.com/p/0fe52f149cab來源 ...

  7. WebStorm 9 自动编译 SCSS 产出 CSS 和 source maps

    1.  上一节我们学习了Windows下搭建Ruby开发环境,也为这一节的学习做了铺垫.因为本节需要在Ruby环境下安装SASS.详细请见:http://www.cnblogs.com/wind128 ...

  8. 项目中使用sass,如何实现自动编译

    本次React项目中用到了Sass,在一个主文件main.scss中引入了其余的scss文件,然后把main.scss文件编译为main.css文件,最后在项目的主文件入口index.html中引入m ...

  9. WebStorm 9 自动编译 LESS 产出 CSS 和 source maps

    1.双击桌面Chrome图标,打开Chrome,按键盘“F12”键,打开开发工具界面,点击其右上角的“设置”按钮,勾选“Enable JavaScript source maps”  及“Enable ...

随机推荐

  1. Linux_System11

    1.查看/var目录的大小:1)ll -hd /var 查看目录的实际大小2)du -sh /var 查看目录所占磁盘空间大小修改权限:chmod 750 hunan修改属主和属组:groupadd ...

  2. 笔记整理--玩转robots协议

    玩转robots协议 -- 其他 -- IT技术博客大学习 -- 共学习 共进步! - Google Chrome (2013/7/14 20:24:07) 玩转robots协议 2013年2月8日北 ...

  3. Javascript数据类型共有六种

    Javascript数据类型共有六种 /* var box; alert(typeof box); // box是Undefined类型,值是undefined,类型返回的字符串是undefined ...

  4. 理解 Objective-C Runtime

    初学 Objective-C(以下简称ObjC) 的人很容易忽略一个 ObjC 特性 —— ObjC Runtime.这是因为这门语言很容易上手,几个小时就能学会怎么使用,所以程序员们往往会把时间都花 ...

  5. WdatePicker 日历控件使用方法+基本常用方法

    WdatePicker 日历控件使用方法+基本常用方法,记录一下. 很好的文章. 网上转来的. 1. 跨无限级框架显示 无论你把日期控件放在哪里,你都不需要担心会被外层的iframe所遮挡进而影响客户 ...

  6. 深圳尚学堂:Web程序员应该会的知识

    互联网的行业里涌入了很多的程序员, 都在为互联网的发展添砖加瓦.程序员可以分为很多种,像Unix程序员.Windows程序员,或是C++程序员.Delphi程序员,等等.今天我们谈谈Web程序员,一名 ...

  7. 用Hashcat每秒计算1.4亿个密码,破解隔壁WIFI密码

    Hashcat是啥 Hashcat是什么呢?Hashcat是当前最强大的开源密码恢复工具,你可以访问Hashcat.net网站来了解这款工具的详细情况.本质上,Hashcat 3.0是一款高级密码恢复 ...

  8. 双击startup.bat启动tomcat时闪退原因及解决方案

    在启动免安装tomcat时,很容易遇到双击startup.bat,启动窗口闪退而tomcat服务未启动的状况. 具体原因:tomcat在启动时,需要读取环境变量和配置信息,如果缺少Java环境,即缺少 ...

  9. iOS深入学习之Weak关键字介绍

    iOS深入学习之Weak关键字介绍 前言 从大二的开始接触OC就用到了weak属性修饰词,但是当时只是知道如何去用这个关键字:防止循环引用.根本没有深入地去了解它. 在刚来北京的时候面试过程中也常常考 ...

  10. Webappbuilder自定义widget模板

    Webappbuilder自定义widget模板 by 李远祥 到\\widgets\samplewidgets目录下拷贝 CustomWidgetTemplate 文件并重命名为MyWidget 设 ...