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 ...
随机推荐
- nginx 判断访问文件或目录不存在rewrite
文件及目录匹配,其中:* -f和!-f用来判断是否存在文件* -d和!-d用来判断是否存在目录* -e和!-e用来判断是否存在文件或目录* -x和!-x用来判断文件是否可执行样例 : 判断访问的图片是 ...
- 解析xml的问题未解决
工作上需要解析xml,目前的逻辑是:解析xml到对象中,然后对象再插入数据库.但这存在内存溢出的风险. 今天做的另外一件事是将循环用到工作上,暂时还没有测试,是否能保证程序的重启.有待观察 ##### ...
- OSG世界坐标转屏幕坐标(转载)
OSG世界坐标转屏幕坐标 #define M(row,col) m[col * 4 + row] void Transform_Point(double out[4], const double m[ ...
- orientationchange
<!DOCTYPE html> <html> <head> <title>OrientationChange Event Example</tit ...
- 使用PHPMailer发送带附件并支持HTML内容的邮件
PHPMailer是一个封装好的PHP邮件发送类,支持发送HTML内容的电子邮件,以及可以添加附件发送,并不像PHP本身mail()函数需要服务器环境支持,您只需要设置邮件服务器以相关信息就能实现邮件 ...
- linux iptables 配置
1.查看已有配置 iptables -L -n 2.清除原有规则. iptables -F 清除预设表filter中的所有规则链的规则 iptables -X 清除预设表f ...
- iOS 登陆之界面设置
1.界面构成 1.1. 效果图 1.2. 元素 背景图 用户名的输入框 密码的输入框 登陆按钮 忘记密码 用户注册 第三方登陆 两个分割线
- win7下安装sdks
原文及更多内容:http://yysource.sourceforge.net/?p=103 下载和安装 Windows 调试工具 http://msdn.microsoft.com/zh-CN/wi ...
- 编写Node.js原生扩展
Node.js是一个强大的平台,理想状态下一切都都可以用javascript写成.然而,你可能还会用到许多遗留的库和系统,这样的话使用c++编写Node.JS扩展会是一个不错的注意. 以下所有例子的源 ...
- Linux 菜鸟学习笔记--系统分区
硬盘分区 常识 主分区:最多只能有4个 扩展分区:用于突破主分区最多4个的限制 *最多只能有1个 *主分区+扩展分区最多有4个 *不能写入数据,只能包含逻辑分区 逻辑分区 格式化:实际是写入文件系统, ...