webstorm下的sass自动编译和移动端自适应实践
1、安装Ruby
2、安装sass
3、webstorm配置file watcher
4、移动端自适应
1、安装Ruby
安装Ruby,有多种方式,打开官网下载
因为,使用的是window选择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 *;展开格式nested
,expanded
,compact
,compressed,最传统的选择--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自动编译和移动端自适应实践的更多相关文章
- webstorm 设置 sass自动编译问题
sass语法.使用它带来的好处,就不再这里做介绍了,主要看怎么在webstorm里配置自动编译. sass编译是需要Ruby环境的,可以到这里去下载 : https://rubyinstaller ...
- webstorm下设置sass
关于sass,就不想多说什么了.只要你有css基础,十分钟入门好吗.可以参考下资料:http://www.w3cplus.com/sassguide/ 今天想说的是webStorm下如何实现sass自 ...
- Intellij Idea下tomcat设置自动编译
*eclipse默认tomcat下是自动完成编译:而Intellij Idea默认tomcat下不是自动完成编译,从如下开始设置: 进入"settings",如下图找到" ...
- WebStorm怎么设置实现自动编译less文件
首先,需要保证电脑安装过Node.js,下载地址:https://nodejs.org/en/ 安装Node.js的时候会自动安装npm 然后,安装lessc模块 打开cmd控制台 输入下面一行npm ...
- webstorm和intellij idea下如何自动编译sass和scss文件
webstorm和intellij idea下如何自动编译sass和scss文件 https://segmentfault.com/a/1190000008996504 https://www.jia ...
- 在webstorm中配置sass的自动编译,并且可以指定编译后的css的目录.
参考: WebStorm-2018.2-Help-Sass, Less, and SCSS 作者:tobyDing链接:https://www.jianshu.com/p/0fe52f149cab來源 ...
- WebStorm 9 自动编译 SCSS 产出 CSS 和 source maps
1. 上一节我们学习了Windows下搭建Ruby开发环境,也为这一节的学习做了铺垫.因为本节需要在Ruby环境下安装SASS.详细请见:http://www.cnblogs.com/wind128 ...
- 项目中使用sass,如何实现自动编译
本次React项目中用到了Sass,在一个主文件main.scss中引入了其余的scss文件,然后把main.scss文件编译为main.css文件,最后在项目的主文件入口index.html中引入m ...
- WebStorm 9 自动编译 LESS 产出 CSS 和 source maps
1.双击桌面Chrome图标,打开Chrome,按键盘“F12”键,打开开发工具界面,点击其右上角的“设置”按钮,勾选“Enable JavaScript source maps” 及“Enable ...
随机推荐
- Linux_System11
1.查看/var目录的大小:1)ll -hd /var 查看目录的实际大小2)du -sh /var 查看目录所占磁盘空间大小修改权限:chmod 750 hunan修改属主和属组:groupadd ...
- 笔记整理--玩转robots协议
玩转robots协议 -- 其他 -- IT技术博客大学习 -- 共学习 共进步! - Google Chrome (2013/7/14 20:24:07) 玩转robots协议 2013年2月8日北 ...
- Javascript数据类型共有六种
Javascript数据类型共有六种 /* var box; alert(typeof box); // box是Undefined类型,值是undefined,类型返回的字符串是undefined ...
- 理解 Objective-C Runtime
初学 Objective-C(以下简称ObjC) 的人很容易忽略一个 ObjC 特性 —— ObjC Runtime.这是因为这门语言很容易上手,几个小时就能学会怎么使用,所以程序员们往往会把时间都花 ...
- WdatePicker 日历控件使用方法+基本常用方法
WdatePicker 日历控件使用方法+基本常用方法,记录一下. 很好的文章. 网上转来的. 1. 跨无限级框架显示 无论你把日期控件放在哪里,你都不需要担心会被外层的iframe所遮挡进而影响客户 ...
- 深圳尚学堂:Web程序员应该会的知识
互联网的行业里涌入了很多的程序员, 都在为互联网的发展添砖加瓦.程序员可以分为很多种,像Unix程序员.Windows程序员,或是C++程序员.Delphi程序员,等等.今天我们谈谈Web程序员,一名 ...
- 用Hashcat每秒计算1.4亿个密码,破解隔壁WIFI密码
Hashcat是啥 Hashcat是什么呢?Hashcat是当前最强大的开源密码恢复工具,你可以访问Hashcat.net网站来了解这款工具的详细情况.本质上,Hashcat 3.0是一款高级密码恢复 ...
- 双击startup.bat启动tomcat时闪退原因及解决方案
在启动免安装tomcat时,很容易遇到双击startup.bat,启动窗口闪退而tomcat服务未启动的状况. 具体原因:tomcat在启动时,需要读取环境变量和配置信息,如果缺少Java环境,即缺少 ...
- iOS深入学习之Weak关键字介绍
iOS深入学习之Weak关键字介绍 前言 从大二的开始接触OC就用到了weak属性修饰词,但是当时只是知道如何去用这个关键字:防止循环引用.根本没有深入地去了解它. 在刚来北京的时候面试过程中也常常考 ...
- Webappbuilder自定义widget模板
Webappbuilder自定义widget模板 by 李远祥 到\\widgets\samplewidgets目录下拷贝 CustomWidgetTemplate 文件并重命名为MyWidget 设 ...