如何能更好的写出CSS？分享web前端大佬资料总结( 四 ) _CSS

安装live-server软件包：npm install -g live-server 。注意：它是一个全局包。
将npm-run-all添加到项目依赖项中：npm install npm-run-all --save-dev：有了它我们就可以同时运行多个脚本。
将这些脚本添加到package.json：

{..."scripts": {"start": "npm-run-all --parallel liveserver watch","liveserver": "live-server","watch": "node-sass sass/main.scss css/style.css -w",},...}现在如果你运行 npm run start ，就可以立即看到代码的变更。
添加自动前缀
我们设置好了开发工具，太棒了！现在，让我们来谈谈构建工具，特别是：自动前缀（Autoprefixer）。
它是一个工具（尤其是postcss插件），它可以解析CSS ，并利用这些值（https://caniuse.com/）将提供商的前缀加入到CSS规则中。
实际上，在构建网站时，你可能会使用一些并非所有浏览器都完全支持的新功能。因此，提供商方案可以提供对这些功能的支持。以下是一个示例：
-webkit-animation-name: myAnimation;-moz-animation-name: myAnimation;-ms-animation-name: myAnimation;你可能会想，这写起来太乏味了。这就是为什么我们需要自动前缀来帮助我们的CSS代码获得浏览器的兼容，而不用增加额外的复杂性。
那么我们如何用更聪明地构建CSS呢？

将所有的SCSS文件编译成一个主CSS文件。
使用自动前缀为CSS文件添加前缀。
压缩CSS文件

还有最后几步，请坚持看下去，马上就结束了。

添加两个依赖项， postcss-cli和autoprefixer：npm install autoprefixer postcss-cli --save-dev
修改build脚本，并将这些脚本添加到 `package.json：

{..."scripts": {"start": "npm-run-all --parallel liveserver watch","liveserver": "live-server","watch": "node-sass sass/main.scss css/style.css -w","compile": "node-sass sass/main.scss css/style.css","prefix": "postcss css/style.css --use autoprefixer -o css/style.css","compress": "node-sass css/style.css css/style.css --output-style compressed","build": "npm-run-all compile prefix compress"...}现在当你运行 npm run build 时，可以生成经过压缩的 CSS 代码，并且添加了提供商前缀！太棒了是不是吗？但是你知道更酷的是什么吗？这里为你设置了一个代码仓库，以帮助你迅速开始：）
如果你想知道我是如何在项目中应用这些技术的，请点击这里查看代码仓库和结果。希望你能通过这些例子更深入理解。现在，你可以准备开始编写具有可维护性、模块化和可重用性的 CSS 代码了。