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

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

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

Bourbon

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

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

PostCSS

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

Scout App

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

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

Sierra Library

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

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

The Ultimate CSS Generator

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

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

CSS Menu Maker

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

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

SassMeister

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

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

SCSS Compiler

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

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

Compass

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

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

Koala App

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

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

小结

 

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

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

via 1stwebdesigner.com MK编译

标签