前端工程师应该知道的十佳 CSS 工具&网络应用

优秀的前端工程师之所以优秀,除了拥有出色的技能外,还因为他们懂得善用各种利器。难道不是吗?

懂得从无数的免费 CSS 库,工具和自动化脚本程序,来提升前端代码开发效率和质量,比很多东西都要重要。本文将会推送若干由前端工程师筛选的一些 CSS 工具或者网络程序,希望对您有所帮助。

Bourbon

混合库多如牛毛但 , Bourbon 是一个对 Sass 开发者来说,真正有价值的资源。它是一个免费的混合库用于开发前缀和自动值,类似 modular- scale() 功能。

前端工程师应该知道的十佳 CSS 工具&网络应用插图

这不是一个简单的脚本库,而是一个专门为 Sass 准备的简单轻量的混合库。你将需要了解 Bourbon 如何为 Sass 工作。但是,如果你想改进你的工作流程,值得花时间学习。

PostCSS

关于 PostCSS 的解说,小编建议大家阅读一下小撸专门针对 PostCSS 写的文章,将会更好地理解该工具,和判断该工具是否能够为己所用。

前端工程师应该知道的十佳 CSS 工具&网络应用插图1

Scout App

Sass/Compass GUI 也许是开发学习动态 CSS 的最简单的方法。Scout App 是Windows,Mac和Linux 环境最好的解决方案。

前端工程师应该知道的十佳 CSS 工具&网络应用插图2

这个完整的 GUI 工作就像一个项目管理系统,你可以在一个界面下组织 CSS 文件,模板,样板文件和设计资源。这减少了学习终端命令的压力,这样设计者就可以在没有编程大师的情况下组织项目。

Sierra Library

小编最近才发现了 Sierra library ,觉得它是 SASS 最酷的 UI 库。整个东西都是开源的,可以免费下载用于任何项目。

前端工程师应该知道的十佳 CSS 工具&网络应用插图3

它提供完全可定制的选项,改变网格,颜色,排版等几乎所有的东西,而只需要一个单一的变量文件。所有的源代码放在 GitHub 上供你浏览,为你工作。

The Ultimate CSS Generator

前端工程师应该知道的十佳 CSS 工具&网络应用插图4

这是个堪称一绝得 Web Code Tools。这个页面有几乎所有你能想象到的工具,它们都是完全免费的。

当您生成设置时,您将得到实时更新代码输出,以及支持哪些浏览器的小图标。

CSS Menu Maker

CSS Menu Maker 是一个提供许多不同风格的导航菜单的 webapp。你可以找到各种效果和风格的 CSS 菜单,你在获取代码后可以根据自己的需求进行修改。

前端工程师应该知道的十佳 CSS 工具&网络应用插图5

该网站提供 WordPress 和 Dreamweaver 插件,但需要花钱。在线编辑也需要花钱来访问代码,但你可以免费浏览菜单,甚至可以编辑它们,看看它们是如何工作的,并且可以自行对代码进行反向工程。

SassMeister

CodePen 提供 SASS 编译但你可能更喜欢是学习 SASS  如何来变成 CSS。与其安装到你的电脑上运作还不如使用 SassMeister,一个用于 Sass 开发的网络应用。

前端工程师应该知道的十佳 CSS 工具&网络应用插图6

这对初学者来说是一个非常棒的资源,甚至许多专家也喜欢它。它甚至支持第三方库和支持连接到 GitHub,所以你可以网络分享要点或片段。

SCSS Compiler

BeautifyTools 有一个 SCSS compiler 网络应用,可以基于结构和格式化设置自动生成编码输出。有了这个工具,你可以将 SCSS 转码为 CSS,还可以缩小代码和合并多个文件。

前端工程师应该知道的十佳 CSS 工具&网络应用插图7

这个工具对于任何现代的 CSS 工作流来说都是梦幻般的。它有这么多的功能,使建设和运行一个网站变得那么的容易。

Compass

Compass 是一套可以运行 Sass 的工具,提升开发效率,是值得前端开发工程信任的强大框架和最值得信赖的资源。

前端工程师应该知道的十佳 CSS 工具&网络应用插图8

许多新的开发者可能不太清楚 Compass 是干什么的。这是像 PostCSS 一样,除了它直接运行在终端上执行 SASS 文件命令。如果你本身就是一个 Sass 专家,Compass 上手简直是小菜一碟。

Koala App

最后登台的是 Koala。这是一个可以处理Sass, Less, Compass 和 CoffeeScript 的 GUI 应用程序。而且兼容三大系统,而且你会发现它的界面非常的漂亮。

前端工程师应该知道的十佳 CSS 工具&网络应用插图9

Koala 有各种编译选项、自定义错误通知和可选的项目设置,以帮助您保持组织化,并用流畅的可视化编辑器跟踪所有web项目。

小结

 

没有单一的CSS工具可以实现所有工作。但有了完整正确的工具箱,你将拥有看似无限的选择。这些工具在网络上是最好的,它们都是专门针对 CSS 开发者的。

如果你正在寻找 CSS IDES,希望本文对你有所帮助。

via 1stwebdesigner.com MK编译