把你的注意力从方法和技术的洪流中移开一会, 你就可能会错过什么! 上周我遇到我的一个前端开发朋友, 他很兴奋地跟我谈论他使用的一些新工具. 其中最有意思的是使用 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 也可以删除所有不必要的或过时的浏览器前缀, 如果有的话, 以及重复的类.
来源: http://www.jianshu.com/p/de2c76c9724a