hbuilder和sublime的autoprefixer安装或者里sass的$mixin处理浏览器前缀
Autoprefixer是一个后处理程序,不象Sass以及Stylus之类的预处理器。它适用于普通的CSS,可以实现css3代码自动补全。也可以轻松跟Sass,LESS及Stylus集成,在CSS编译前或编译后运行。详情见,https://github.com/postcss/autoprefixer
这里说明一下autoprefixer和compass关系,首先他们都能浏览器前缀自动补全,区别在于一个是为css编译,一个是为sass编译。在应用上:如果是手机端,那直接用sass和autoprefixer;如果是pc端,pc段考虑老版本的浏览其比较多,用compass比较多。
当Autoprefixer添加前缀到你的CSS,还不会忘记修复语法差异。这种方式,CSS是基于最新W3C规范产生:
a {
background : linear-gradient(to top, black, white);
display : flex
}
::placeholder {
color : #ccc
}
编译成: a {
background : -webkit-linear-gradient(bottom, black, white);
background : linear-gradient(to top, black, white);
display : -webkit-box;
display : -webkit-flex;
display : -moz-box;
display : -ms-flexbox;
display : flex
}
:-ms-input-placeholder {
color : #ccc
}
::-moz-placeholder {
color : #ccc
}
::-webkit-input-placeholder {
color : #ccc
}
::placeholder {
color : #ccc
}
Autoprefixer 同样会清理过期的前缀,因此下面的代码:
a {
-webkit-border-radius : 5px;
border-radius : 5px
}
编译成:
a {
border-radius : 5px
}
因为经过Autoprefixer处理,CSS将仅包含实际的浏览器前缀。
安装node.js
(略)
安装Autoprefixer,
见https://github.com/postcss/autoprefixer:
npm install autoprefixer -g
安装postcss-cli(如果网速不好,会安装错误,我安装两次,可以安装npm的淘宝镜像)
Autoprefixer其实是postcss的插件,见https://github.com/code42day/postcss-cli
npm install postcss-cli -g
配置外部工具
1.打开HBuilder,运行-外部工具-外部工具配置
新建一个外部工具配置
名称填写autoprefixer(这个随意,就是起个名字)
要执行的命令或文件填写npm安装目录\postcss.cmd(mac下应为npm安装目录\postcss)如
C:\Users\wu\AppData\Roaming\npm\postcss.cmd
工作目录填写${project_loc}
参数填写-u autoprefixer -o ${resource_loc} ${resource_loc}
2.sublime就比较简单
ctrl+shift+p(前提是安装了install packages),搜索autoprefix css
搜到了点击安装,选中当前的css的文件
在ctrl+shift+p,输入autoprefix css,会有一短暂的卡顿后生成如下图:
使用autoprefixer
点击你的css、sass文件,然后右键,依次点击外部工具-autoprefixer(此处为你新建外部工具的名称)等待编译,编译完毕即可
3.利用sass的@mixin
http://codecloud.net/16133.html
hbuilder和sublime的autoprefixer安装或者里sass的$mixin处理浏览器前缀的更多相关文章
- autoprefixer安装或者里sass的$mixin处理浏览器前缀
Autoprefixer是一个后处理程序,不象Sass以及Stylus之类的预处理器.它适用于普通的CSS,可以实现css3代码自动补全.也可以轻松跟Sass,LESS及Stylus集成,在CSS编译 ...
- Autoprefixer:一个以最好的方式处理浏览器前缀的后处理程序
Autoprefixer解析CSS文件并且添加浏览器前缀到CSS规则里,使用Can I Use的数据来决定哪些前缀是需要的. 所有你需要做的就是把它添加到你的资源构建工具(例如 Grunt)并且可以完 ...
- sublime Text 的安装、破解、汉化、使用
Sublime Text 3安装与使用 本文是Sublime Text 全程指引 by Lucida (http://www.cnblogs.com/figure9/p/sublime-text- ...
- Sublime Text 3安装与使用
本文是Sublime Text 全程指引 by Lucida (http://www.cnblogs.com/figure9/p/sublime-text-complete-guide.html)的笔 ...
- sublime 插件的安装
sublime(text3)插件的安装 之前一直对sublime插件的安装搞不懂,导致自己不能充分地运用它的便捷性.昨天仔细看了下百度,恍然大悟,一下子把必备的插件都装了: 对于插件的安装,首先要在s ...
- 编码神器之sublime(插件安装)
一款优秀的编辑器是程序员的左膀右臂,相信每一个程序员手边都有自己熟悉的编辑器. 从一开始使用sublime的时候就开始喜欢上了这款编辑器,被他强大的功能深深的吸引了. sublime的强大来源于他的扩 ...
- Sublime Text 3安装与使用 Package Control 插件安装
原文地址:http://www.cnblogs.com/zhcncn/p/4113589.html 本文是Sublime Text 全程指引 by Lucida (http://www.cnblogs ...
- Sublime Text中安装插件来实现px与rem间的换算
今天在群里无意中看到了群友分享的一篇关于移动端的文章.里面其他内容我倒不大感兴趣,反而是rem让我提起了兴趣. 首先来谈一下rem,rem是CSS3中新增加的一个单位值,它和em单位一样,都是一个相对 ...
- Sublime Text 3安装与使用,安装插件,快捷键,默认配置
本文是Sublime Text 全程指引 by Lucida (http://www.cnblogs.com/figure9/p/sublime-text-complete-guide.html)的笔 ...
随机推荐
- [转]redis的三种启动方式
来源:https://www.cnblogs.com/pqchao/p/6549510.html redis的启动方式1.直接启动 进入redis根目录,执行命令: #加上‘&’号使red ...
- C++ template —— 智能指针(十二)
在管理动态分配的内存时,一个最棘手的问题就是决定何时释放这些内存,而智能指针就是用来简化内存管理的编程方式.智能指针一般有独占和共享两种所有权模型.-------------------------- ...
- 今日Java——Cay Horstmann访谈
这是本人在InfoQ中文站审校的文章,原文链接是:http://www.infoq.com/cn/articles/java_cay_horstmann,感觉内容很不错,分享给大家看看. 近日Info ...
- Esper学习之十五:Pattern(二)
上一篇开始了新一轮语法——Pattern的讲解,一开始为大家普及了几个基础知识,其中有说到操作符.当时只是把它们都列举出来了,所以今天这篇就是专门详解这些操作符的,但是由于篇幅限制,本篇先会讲几个,剩 ...
- 【Spring Boot&&Spring Cloud系列】使用Intellij构建Spring Boot和Mybatis项目
一.创建项目 1.File->New->Project->spring initializer 2.勾选Web SQL Template Engines 3.项目生成之后,点击add ...
- jQuery属性操作(四)
通过阅读jQuery为属性操作封装的基本方法和为处理兼容性问题提供的hooks,发现jQuery在属性操作方面并没有做过多的设计,只是处理一下兼容性问题,然后调用基础的DOM操作方法.以下是对JQue ...
- POP3命令与分析
http://www.cnblogs.com/crystalray/p/3302121.html POP3(Post Office Protocol 3)即邮局协议的第3个版本,它是规定个人计算机如何 ...
- SSL是什么?如何使用?
SSL(Secure Sockets Layer 安全套接层),及其继任者传输层安全(Transport Layer Security,TLS)是为网络通信提供安全及数据完整性的一种安全协议.TLS与 ...
- LeetCode 34 Search for a Range (有序数组中查找给定数字的起止下标)
题目链接: https://leetcode.com/problems/search-for-a-range/?tab=Description Problem: 在已知递减排序的数组中,查找到给定 ...
- vue2.0笔记《一》列表渲染
内容中包含 base64string 图片造成字符过多,拒绝显示