web前端学习教程：开发 CSS 最好的前端工具推荐！

把你的注意力从方法和技术的洪流中移开一会，你就可能会错过什么！上周我遇到我的一个前端开发朋友，他很兴奋地跟我谈论他使用的一些新工具。其中最有意思的是使用 Grunt 来编译 SCSS。

人们很容易忘记不是每个人都和你走在同一条路上。他们或是有使用限制，或是视野狭窄，无法洞悉周遭的环境。我使用 Grunt 和使用 SCSS 一样久。听他讲起他不得不通过命令行可以手动触发编译之后，我很是痛苦。所以我想分享一些我经常使用的前端开发工具（尤其是CSS）和极为重要的前端开发工具。

在学习过程中有什么不懂得可以加我的WEB前端学习交流扣扣qun，前面是133，中间868，后面是702。群里有不错的学习教程与开发工具、项目源码分享，专业的老师解答问题。与你分享web前端企业当下人才需求及怎么从零基础学习好web前端，和学习什么内容。

1、文件查看和编译

首先，如果你还在使用命令行编译SASS，那肯定得看自动执行的过程，这里有许多你用得上的工具，我使用 Grunt-Watch，但是有很多人喜欢 Gulp-Watch。

一些 IDE 内建预处理器，可以看看到底哪个适合你。

2、CSS库

库是一个大型工具包，它包含并混合从 CSS 重置、跨浏览器背景渐变和使用黄金比例设置字体大小的便捷数学计算等的很多东西。

主流的库：

Bourbon

Compass

PostCSS

我使用 Compass 好几年了，这是一个很棒的工具集。

但是我发现它能做的远超我的实际需要 。我用在 Compass 上学到的知识创建了一个轻量级的自定义栈插件，它使得 scss 编译时间从4秒降低到几乎为零。

3、Autoprefixer

不必担心浏览器前缀问题了！

Autoprefixer 基于 https://caniuse.com 添加所需的前缀。当我单枪匹马干活时，给我节省了不少时间，强烈推荐。

4、Animate.css

我喜欢编写我自己的 CSS 动画效果，但经常我们没有太多的时间。

Animate.css 可以让我快速的添加和测试 CSS 动画效果，无需思考这些动画的逻辑。

5、KSS styleguide

KSS 允许你从你的CSS直接创建一个样式向导文件，这有很多的优点。

配对的 KSS含有一个模块化的CSS，比如BEM，允许你可靠的创建一个可重复使用的可见样式集，你会从强大的文档中获得巨大的回报。

KSS Styleguide is one of my favorite front end development tools

你通过文档化的CSS得到正强化。

由于文档和可视化的样式向导，组件更容易被找到和重用-不用怀疑，如果已经建立了一个类似的组件！

6、CSS minification with CSS NANO

自动缩小我编写的CSS文件。

Minification for front end development

CSSNANO 也可以删除所有不必要的或过时的浏览器前缀，如果有的话，以及重复的类。