• 主页
  • 文章
  • 指导
  • 55+ CSS 工具：预处理器、插件、编辑器和渐变生成器

55+ CSS 工具：预处理器、插件、编辑器和渐变生成器

已发表: 2016-12-30

CSS 代表层叠样式表。 CSS 是一种与 HTML 一起用于设计网页的标记语言。 HTML 页面看起来不太好，但使用 CSS，您可以使它们看起来漂亮而有吸引力。 如果你打算学习 WordPress 主题开发，首先你应该学习 HTML 和 CSS。

主题开发工具系列的更多文章

  • WordPress开发工具系列主页
  • 下载 15 本免费书籍来掌握 HTML、CSS、JavaScript、jQuery、Bootstrap 和 WordPress
  • Web 开发人员的 30 多个最佳 Chrome、Firefox 扩展、教程和工具的终极列表
  • 38 个免费视频课程，学习 HTML、CSS、PHP、jQuery、JavaScript、Git 等

在本文中，我们将为初学者和高级 WordPress 开发人员分享最好的 CSS 工具。 如果您是绝对初学者并且对 HTML 或 CSS 一无所知，您可以下载 38 门免费课程和 15 本书免费电子书，从头开始学习 HTML、CSS 和其他编程语言。

12 个 CSS 工具：CSS 预处理器、应用程序和插件

  1. Less CSS ：Less 是一个 CSS 预处理器，这意味着它扩展了 CSS 语言，添加了允许变量、mixin、函数和许多其他技术的功能，这些技术使您可以使 CSS 更易于维护、主题化和可扩展。

  2. SASS号称是世界上最成熟、最稳定、最强大的专业级CSS扩展语言。 SASS 已经有将近十年的历史了，使用 Sass 构建的框架数不胜数，包括 Compass、Bourbon 和 Susy 等等。

  3. Stylus是一个 CSS 预处理器，它扩展了常规 CSS 的功能。 提供强大的逻辑功能，通过 Node.js / JavaScript 运行的能力，（无 Ruby），作为 Node.js 设置的一部分运行的能力，干净和最小但灵活的语法。

  4. CodeKit（32 美元）是一款功能强大且深受 MAC 用户欢迎的应用程序。 CodeKit 可以编译 Less、Sass、Stylus、CoffeeScript、Typescript、Jade、Haml、Slim、Markdown 和 Javascript。 提供自动刷新浏览器和内置的 Bower，您可以通过单击安装 6,000 多个组件，包括 Bootstrap、jQuery、Modernizr、Zurb Foundation，甚至 WordPress。

  5. PrePros（29 美元） ：Prepros 是一个高级工具，用于编译 LESS、Sass、Compass、Stylus、Jade 等等，带有自动 CSS 前缀，它带有用于跨浏览器测试的内置服务器。 它适用于 Windows、Mac OS X 和 Linux。 它提供自动 CSS 前缀、自动浏览器刷新、文件缩小、图像优化、内置服务器和许多其他功能。

  6. Emmet ：一个免费的插件，供不同的代码编辑器快速轻松地编写代码。 Emmet 是用纯 JavaScript 编写的，可以跨不同平台工作：Web 浏览器、Node.js、Microsoft WSH 和 Mozilla Rhino。

  7. Fire.App ：适用于 Windows 的类似 CodeKit 的工具是 fire.app（它也可以在 Linux 和 Mac 上运行）。 喜欢 Sass/Compass 但讨厌命令行界面？ Fire.app 像我们的 Compass.app 一样具有一流的 Sass/Compass 支持。 不再有供应商 CSS 前缀和手工制作的精灵图像！。 Fire.app 适用于 Mac、Linux 和 Windows 平台。 安装过程就像单击和拖动一样简单。

  8. Snippets是一个免费的代码管理程序。 帮助您在不同的项目中组织和重用代码片段，公开和与您的团队共享代码片段。 这适用于 Mac 和 Windows。

  9. Koala App是一个用于 Less、Sass、Compass 和 CoffeeScript 编译的 GUI 应用程序，以帮助 Web 开发人员更有效地使用它们。 Koala 可以在 Windows、Linux 和 Mac 上运行。

  10. LiveReload CSS 编辑和图像更改实时应用。 CoffeeScript、SASS、LESS 和其他都可以正常工作。 LiveReload 监视文件系统中的变化。 保存文件后，会根据需要对其进行预处理，并刷新浏览器。

  11. Scout App是一个跨平台的应用程序，它将 Sass & Compass 的强大功能交付给网页设计师。 Scout 通过提供更多的控制、优化和组织，帮助您的 CSS 工作流程变得轻而易举。

  12. Crunch 2 Crunch 允许您编写 Less、Sass、CoffeeScript、Markdown*，然后在您进行更改后自动保存 CSS、JavaScript 和 HTML。 想只写纯 CSS 吗？ XML？ 哈斯克尔？ MUSH代码？ Crunch 也可以让你这样做。 Crunch 2 是一个编辑器，可以让你做你想做的事。 因为 Crunch 爱你。

10 个 WordPress 自定义 CSS 插件

如果您想在 WordPress 中自定义 CSS，您可以使用自 WordPress 4.7 起在自定义程序中提供的许多免费插件或内置的编辑 CSS 功能。 我们整理了一份免费的 10 个免费 CSS 插件列表，可帮助您轻松修改和保存自定义 CSS。

您还可以阅读本教程以了解如何使用 Chrome 开发人员工具在 WordPress 主题中编辑 CSS 以及如何在不使用 jQuery 或 PHP 的情况下使用 CSS 在 WordPress 菜单中添加箭头。

15 个 CSS 渐变生成器

  1. colorzilla 渐变编辑器
  2. cssmatic渐变编辑器
  3. 愤怒的工具梯度生成器
  4. gradientgenerator.com/
  5. css3generator.com/
  6. cssportal 梯度生成器
  7. uigradients.com：准备使用漂亮的颜色渐变
  8. css3factory 线性渐变
  9. gradcolor渐变生成器
  10. perbang RGB渐变
  11. paintbycode 渐变生成器
  12. virtuosoft 梯度生成器
  13. westciv 径向渐变
  14. westciv 线性渐变
  15. CSS3 渐变生成器

10 个免费的在线 CSS 编辑器

  1. CSS Portal 的在线 CSS 编辑器
  2. CSSdeck 实验室
  3. ScratchPad 实时 HTML 和 CSS 编辑器
  4. EnjoyCSS 的在线 CSS3 代码生成器
  5. cssdesk
  6. jsfiddle : 在线测试你的 JavaScript、CSS、HTML 或 CoffeeScript
  7. CSSmate 编辑器
  8. CSS 美化和缩小
  9. liveweave HTML5、CSS3 和 JavaScript 游乐场
  10. SelfCSS – 所见即所得的 CSS 编辑器

10个Chrome扩展修改CSS

  1. 浏览器
  2. 风格机器人
  3. 用户 CSS
  4. 实时 CSS 编辑器
  5. 开发工具自动保存
  6. 保存 CSS
  7. 响应式网页设计测试员
  8. 响应式检查员
  9. 视口调整器
  10. 选项卡调整大小 - 分屏布局

最后的话

这就是针对 Web 设计人员和开发人员的 CSS 工具列表的全部内容。 您可以使用这些免费的 CSS 工具轻松自定义样式并保存更改。 Chrome 扩展对于保存您的 CSS 编辑非常有用，无需离开 chrome 开发人员工具。

使用 CSS 预处理器，您可以高效地编写 CSS。 我希望，你会喜欢这些工具。 本文是我们主题开发工具系列的一部分。 不要忘记加入我们的 WordPress 主题开发时事通讯以下载免费书籍并接收有关 WordPress 主题开发的最新文章和教程。

注意：本文最初发表于 createwptheme.com，经授权我们已在此处重新发布。