Sublime text中通过package control 安装 autoprefixer 自动添加浏览器前缀

最新推荐文章于 2021-12-05 15:18:56 发布

kongming010

最新推荐文章于 2021-12-05 15:18:56 发布

阅读量204

点赞数

CC 4.0 BY-SA版权

分类专栏： sublime

本文链接：https://blog.youkuaiyun.com/kongming010/article/details/99175210

sublime 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何在Sublime Text中通过Package Control安装autoprefixer插件，以便自动为CSS3样式添加浏览器前缀，简化兼容性处理。首先解释了浏览器前缀的作用，接着详细讲解了autoprefixer的安装步骤，包括设置和配置。同时，文章还提到了安装Node.js的必要性以及npm作为Node.js包管理工具的功能和使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS3 浏览器前缀

浏览器样式前缀

为了让CSS3样式兼容，需要将某些样式加上浏览器前缀：

-ms- 兼容IE浏览器
-moz- 兼容firefox
-o- 兼容opera
-webkit- 兼容chrome 和 safari

比如：

div
{    
    -ms-transform: rotate(30deg);        
    -webkit-transform: rotate(30deg);    
    -o-transform: rotate(30deg);        
    -moz-transform: rotate(30deg);    
    transform: rotate(30deg);
}

自动添加浏览器前缀

目前的状况是，有些CSS3属性需要加前缀，有些不需要加，有些只需要加一部分，这些加前缀的工作可以交给插件来完成，比如安装： autoprefixer

可以在Sublime text中通过package control 安装 autoprefixer

Autoprefixer在Sublime text中的设置：

1、preferences/key Bindings-User

{ "keys": ["ctrl+alt+x"], "command": "autoprefixer" }

2、Preferences>package setting>AutoPrefixer>Setting-User

{
    "browsers": ["last 7 versions"],
    "cascade": true,
    "remove": true
}

last 7 versions：最新的浏览器的7个版本
cascade：缩进美化属性值
remove：是否去掉不必要的前缀

安装Node.js

由于Node.js平台是在后端运行JavaScript代码，所以，必须首先在本机安装Node环境。

首先，从Node.js官网下载对应平台的安装程序。

在Windows上安装时务必选择全部组件，包括勾选Add to Path。

安装完成后，在Windows环境下，请打开命令提示符，然后输入node -v，如果安装正常，你应该看到v7.6.0这样的输出：

C:\Users\IEUser>node -v
v7.6.0

继续在命令提示符输入node，此刻你将进入Node.js的交互环境。在交互环境下，你可以输入任意JavaScript语句，例如100+200，回车后将得到输出结果。

要退出Node.js环境，连按两次Ctrl+C。

在Mac或Linux环境下，请打开终端，然后输入node -v，你应该看到如下输出：

$ node -v
v7.6.0

如果版本号小于v7.6.0，说明Node.js版本不对，后面章节的代码不保证能正常运行，请重新安装最新版本。

npm

npm是什么东东？npm其实是Node.js的包管理工具（package manager）。

为啥我们需要一个包管理工具呢？因为我们在Node.js上开发时，会用到很多别人写的JavaScript代码。如果我们要使用别人写的某个包，每次都根据名称搜索一下官方网站，下载代码，解压，再使用，非常繁琐。于是一个集中管理的工具应运而生：大家都把自己开发的模块打包后放到npm官网上，如果要使用，直接通过npm安装就可以直接用，不用管代码存在哪，应该从哪下载。

更重要的是，如果我们要使用模块A，而模块A又依赖于模块B，模块B又依赖于模块X和模块Y，npm可以根据依赖关系，把所有依赖的包都下载下来并管理起来。否则，靠我们自己手动管理，肯定既麻烦又容易出错。

讲了这么多，npm究竟在哪？

其实npm已经在Node.js安装的时候顺带装好了。我们在命令提示符或者终端输入npm -v，应该看到类似的输出：

C:\>npm -v
4.1.2

如果直接输入npm，你会看到类似下面的输出：

C:\> npm

Usage: npm <command>

where <command> is one of:
    ...

div{
    transform: rotate(30deg);  /*此时按下快捷键 ctrl + alt + x  结果如下*/
}
 /*按下快捷键 ctrl + alt + x  后的结果*/
div{
    -webkit-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
            transform: rotate(30deg);
}