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处理浏览器前缀的更多相关文章

  1. autoprefixer安装或者里sass的$mixin处理浏览器前缀

    Autoprefixer是一个后处理程序,不象Sass以及Stylus之类的预处理器.它适用于普通的CSS,可以实现css3代码自动补全.也可以轻松跟Sass,LESS及Stylus集成,在CSS编译 ...

  2. Autoprefixer:一个以最好的方式处理浏览器前缀的后处理程序

    Autoprefixer解析CSS文件并且添加浏览器前缀到CSS规则里,使用Can I Use的数据来决定哪些前缀是需要的. 所有你需要做的就是把它添加到你的资源构建工具(例如 Grunt)并且可以完 ...

  3. sublime Text 的安装、破解、汉化、使用

    Sublime Text 3安装与使用   本文是Sublime Text 全程指引 by Lucida (http://www.cnblogs.com/figure9/p/sublime-text- ...

  4. Sublime Text 3安装与使用

    本文是Sublime Text 全程指引 by Lucida (http://www.cnblogs.com/figure9/p/sublime-text-complete-guide.html)的笔 ...

  5. sublime 插件的安装

    sublime(text3)插件的安装 之前一直对sublime插件的安装搞不懂,导致自己不能充分地运用它的便捷性.昨天仔细看了下百度,恍然大悟,一下子把必备的插件都装了: 对于插件的安装,首先要在s ...

  6. 编码神器之sublime(插件安装)

    一款优秀的编辑器是程序员的左膀右臂,相信每一个程序员手边都有自己熟悉的编辑器. 从一开始使用sublime的时候就开始喜欢上了这款编辑器,被他强大的功能深深的吸引了. sublime的强大来源于他的扩 ...

  7. Sublime Text 3安装与使用 Package Control 插件安装

    原文地址:http://www.cnblogs.com/zhcncn/p/4113589.html 本文是Sublime Text 全程指引 by Lucida (http://www.cnblogs ...

  8. Sublime Text中安装插件来实现px与rem间的换算

    今天在群里无意中看到了群友分享的一篇关于移动端的文章.里面其他内容我倒不大感兴趣,反而是rem让我提起了兴趣. 首先来谈一下rem,rem是CSS3中新增加的一个单位值,它和em单位一样,都是一个相对 ...

  9. Sublime Text 3安装与使用,安装插件,快捷键,默认配置

    本文是Sublime Text 全程指引 by Lucida (http://www.cnblogs.com/figure9/p/sublime-text-complete-guide.html)的笔 ...

随机推荐

  1. Ansible 使用 Playbook 管理 Nginx 配置文件

    前面我们已经安装完 Nginx,但是在日常维护中经常需要修改配置文件,并重新加载配置文件,因此来写一个管理 Nginx 配置文件的 Playbook: [root@localhost ~]$ mkdi ...

  2. 使用 urllib 进行身份验证

    如下图,有些网站需要使用用户名密码才可以登录,我们可以使用 HTTPBasicAuthHandler() 来实现 from urllib.request import HTTPPasswordMgrW ...

  3. C#调用DLL报“试图加载格式不正确的程序”

    项目右键属性->项目设计器->生成->平台->把'默认设置(任何 CPU)'改为x86或者x64

  4. 解决“Connection to https://dl-ssl.google.com refused”问题

    相信一些人刚开始搞android的安装开发环境的时候会遇到:Failed to fectch URl https://dl-ssl.google.com/android/repository/addo ...

  5. MVC中的一些不同之处(WebForm)

    一. 路由重定向 /// <summary> /// 路由重定向 /// </summary> /// <returns></returns> publ ...

  6. 一.jquery.datatables.js表格显示

    2014年8月10日星期日 使用jquery.datatables.js取后台数据. 1.html代码 <table class="dataTables-example"&g ...

  7. linux 文件编码问题

    iconv -f UTF- -t gb18030 file_input -o file_output 上述命令不一定有用. 大概了解下文件编码,和vim里面的编码情况. 1 字符编码基础知识 字符编码 ...

  8. Ajax提交表单时验证码自动验证 php后端验证码检测

    本文通过源码展示如何实现表单提交前,验证码先检测正确性,不正确则不提交表单,更新验证码. 1.前端代码 index.html <!DOCTYPE html> <html> &l ...

  9. C语言程序设计--字符串与指针及数组与指针

    数组的基本知识 数组的定义 #define SIZE 5 int array_int[5]; //未声明初始化,默认填零 float array_float[5] = {1.01, 2.23, 3.1 ...

  10. 链表的基础题目学习(EPI)

    链表的题目总体来说细节比较多,因为链表的题目在操作链表的过程中本身有些复杂,所以如果链表作为编程题出现的时候,多数情况下题目本身的思路可能不是很复杂,不要把题目往复杂的方向去思考就好了~这里的链表只是 ...