<sub id="17nj5"><progress id="17nj5"></progress></sub><th id="17nj5"><progress id="17nj5"><nobr id="17nj5"></nobr></progress></th>

    <sub id="17nj5"></sub>
    <sub id="17nj5"></sub>

    <progress id="17nj5"><rp id="17nj5"><big id="17nj5"></big></rp></progress>

        <track id="17nj5"></track>

        在Webstorm中使用Autoprefixer的配置方法

        2015-06-02 13:52:54来源:css88作者:

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

        最近玩了一下SASS,感觉不错,不过CSS3在不同?#25945;?#20860;容性代码一直是个头痛的问题,?#20013;?#22788;理费时费力又容易出错。
        曾经一直用sublime text写html和css,这些问题都有相应的插件。用Webstorm写js,但是来回切换编辑器也比?#19979;櫸场?br /> 虽然Webstorm内置了css3自动补全功能,?#31508;?#20837;user-select时,Webstorm会自动补全:

        1. -webkit-user-select: none;
        2. -moz-user-select: none;
        3. -ms-user-select: none;
        4. user-select: none;

        但是很多情况下,这种自动补全并不令人满意,比如当我输入display:flex;时,Webstorm并不会自动补全为:

        1. display:-webkit-box;
        2. display:-webkit-flex;
        3. display:-ms-flexbox;
        4. display:flex;

        关于Autoprefixer

        Autoprefixer是一个后处理程序,不象Sass以及Stylus之类的预处理器。它适用于普通的CSS,可以实现css3代码自动补全。也可以轻松跟Sass,LESS及Stylus集成,在CSS编译前或编译后运行。详情见,https://github.com/postcss/autoprefixer

        当Autoprefixer添加前缀到你的CSS,还不会忘记修复语法差异。这种方式,CSS是基于最新W3C规范产生:

        1. a {
        2. background : linear-gradient(to top, black, white);
        3. display : flex
        4. }
        5. ::placeholder {
        6. color : #ccc
        7. }

        编译成:

        1. a {
        2. background : -webkit-linear-gradient(bottom, black, white);
        3. background : linear-gradient(to top, black, white);
        4. display : -webkit-box;
        5. display : -webkit-flex;
        6. display : -moz-box;
        7. display : -ms-flexbox;
        8. display : flex
        9. }
        10. :-ms-input-placeholder {
        11. color : #ccc
        12. }
        13. ::-moz-placeholder {
        14. color : #ccc
        15. }
        16. ::-webkit-input-placeholder {
        17. color : #ccc
        18. }
        19. ::placeholder {
        20. color : #ccc
        21. }
        22.  

        Autoprefixer 同样会清理过期的前缀,因此下面的代码:

        1. a {
        2. -webkit-border-radius : 5px;
        3. border-radius : 5px
        4. }

        编译成:

        1. a {
        2. border-radius : 5px
        3. }

        因为经过Autoprefixer处理,CSS将仅包含实际的浏览器前缀。

        具体安装和配置:

        所以尝试在Webstorm下搜索autoprefixer插件,无果。那就自己手动配置了一个。首先我考虑配置File Watchers,但是不习惯,原来在sublime text下用autoprefixer都是手动触发的,所以后面我配置了External Tools。

        1.首先?#27604;?#26159;安装node.js;

        (略)

        2.安装Autoprefixer,

        见https://github.com/postcss/autoprefixer:

        1. sudo npm install autoprefixer -g

        要不要加sudo,或者是不是全?#32844;?#35013;(-g)那就看你自己的环境了。

        npm太慢,我是用淘宝的 NPM 镜像的https://npm.taobao.org/

        3.安装postcss-cli

        Autoprefixer其实是postcss的插件,见https://github.com/code42day/postcss-cli

        1. sudo npm install postcss-cli -g

        4.配置External Tools

        打开Webstorm设置,Preferences -> Tools -> External Tools ;点击新增按钮,如图:

        769EDD8B-6AF0-4D6B-B73B-DF2DC25FAA1F

        填写具体配置,例如我的配置,如图:

        0C4975D0-6531-432B-8812-46D56164B817

        1. Program:填入你的postcss-cli 的PATH;
        2. Parameters: -u autoprefixer -o $FileDir$/$FileName$  $FileDir$/$FileName$ ,你可以根据你自己的需要配置,具体参见https://github.com/code42day/postcss-cli
        3. Working directory :$ProjectFileDir$

        配置好后,你可以在css,或sass文件中右键,就可以在右键菜单中看到External Tools – autoprefixer,点击搞定,嘎嘎。

        5.设置快捷键

        右键太麻烦的话,可以设置个快捷键,打开Webstorm设置,Preferences -> Keymap , 搜索External Tools , 配置 autoprefixer即可。 不要和原来的冲突就可以了。

        ps:windows下可以直接用autoprefixer的PATH,具体配置

        414473-5caba82f3555f590 (1)

        赞助商链接:

        2018特码生肖表
        <sub id="17nj5"><progress id="17nj5"></progress></sub><th id="17nj5"><progress id="17nj5"><nobr id="17nj5"></nobr></progress></th>

          <sub id="17nj5"></sub>
          <sub id="17nj5"></sub>

          <progress id="17nj5"><rp id="17nj5"><big id="17nj5"></big></rp></progress>

              <track id="17nj5"></track>
              <sub id="17nj5"><progress id="17nj5"></progress></sub><th id="17nj5"><progress id="17nj5"><nobr id="17nj5"></nobr></progress></th>

                <sub id="17nj5"></sub>
                <sub id="17nj5"></sub>

                <progress id="17nj5"><rp id="17nj5"><big id="17nj5"></big></rp></progress>

                    <track id="17nj5"></track>
                    福彩走势图带连线 上海11选5走势图爱彩乐 阿里巴巴股权结构 使命召唤ol异变风暴攻略(第一章普通,上部分) 玩主机游戏吗 二人麻将8张牌 意大利热那亚港口 悉尼fc排名 北京赛车微信群 乌迪内斯vs卡利亚里