15 必不可少的 Sass 和 Compass 工具

jopen 10年前

学过CSS的人都知道,它不是一种编程语言。
你可以用它开发网页样式,但是没法用它编程。也就是说,CSS基本上是设计师的工具,不是程序员的工具。在程序员眼里,CSS是一件很麻烦的东西。它没有变量,也没有条件语句,只是一行行单纯的描述,写起来相当费事。
很自然地,有人就开始为CSS加入编程元素,这被叫做"CSS预处理器"(css preprocessor)。它的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件。
SASS是各种"CSS预处理器"中的一种。 SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。Sass是一种"CSS预处理器",可以让CSS的开发变得简单和可维护。但是,只有搭配 Compass,它才能显出真正的威力。Compass是Sass的工具库(toolkit)。

Sass本身只是一个编译器,Compass在它的基础上,封装了一系列有用的模块和模板,补充Sass的功能。它们之间的关系,有点像Javascript和jQuery、Ruby和Rails、python和Django的关系。

今天,我们将分享15个基本Sass和Compass工具,以提高您的Sass知识。让我们来看看他们。

1. The Sass Way

15 必不可少的 Sass 和 Compass 工具

If you are looking for information on creating CSS with the help of Sass and Compass, The Sass Way is perfect for you. With so many great regular updates, you must follow them on 推ter and Faebook and benefit from their tutorials..

2. Compass.app

15 必不可少的 Sass 和 Compass 工具

Compass.app 是一个针对 Sass 和 Compass 的菜单工具,帮助设计师通过 UI 的方式编译样式,而不用去记住命令行。它是用 JRuby 开发的,可以在多个平台上使用,而不用安装 Ruby 环境。

3. Scout

15 必不可少的 Sass 和 Compass 工具

SASS编译的界面工具。Scout is basically an app that is known to be a great cross=platform app. It allows you to run Sass and Compass within a ruby environment and allows you to handle your projects smoothly. Scout will take care of all the complex stuff and you will not have to setup ruby.

4. Compass Recipes

15 必不可少的 Sass 和 Compass 工具

If you are looking for great backgrounds, awesome effects, stylish icons, incredible layouts and a lot more, Compass Recipes ins perfect for you.

5. Bourbon

15 必不可少的 Sass 和 Compass 工具

Bourbon is basically a library of Sass mixins, which is designed in way that it will only make things easier. You will not have to configure anything and with bourbon, you can also degrade to old browsers and that too without any hassle.

6. Bourbon Neat

15 必不可少的 Sass 和 Compass 工具

Bourbon near will allow you to take care of responsive layout. It encourages clean and reliable Sass mixins.

7. Susy

15 必不可少的 Sass 和 Compass 工具

If you have been looking for responsive grids for a compass, Susy is here to help you with it. By using Susy, you can create website within a few minutes.



8. Codekit

15 必不可少的 Sass 和 Compass 工具

Codekit is basically a complier that you will help you in saving files automatically of Coffeescript, JAvaScript, Sass, Compass and a lot more. Codekit will also reduce the load times since it combines the files.

9. Sassy Buttons

15 必不可少的 Sass 和 Compass 工具

Sassy buttons, as the name suggests, will help you in creating CSS3 buttons and will also allow you their customization. All you have to do is use some minimal Sass lines.

10. LiveReload

15 必不可少的 Sass 和 Compass 工具

LiveReload basically exists within you menu bar in order to keep an eye on the any sort of changes appearing in the file system. The file is preprocessed instantly after any sort of changes are made and the file is saved.

11. Hammer

As far as hammer is concerned, it has been declared as  a game changer for the world of web development. IT offers Sass’s built-in support along with automatic compilation to CSS.

15 必不可少的 Sass 和 Compass 工具

12. Forge

15 必不可少的 Sass 和 Compass 工具

Forge will help you in creating WordPress themes using a simple and neat environment with the help of front-end languages.

13. Normalize.css (with Sass or Compass)

15 必不可少的 Sass 和 Compass 工具

This is a popular tool and is a great alternate to CSS reorganization. It will help all browsers in submitting elements with consistency.

14. Sass for WordPress

15 必不可少的 Sass 和 Compass 工具

As the name suggests, Sass is basically a plugin for WordPress, which allows user to use Sass within his WordPress projects. This plugin will help you in keeping a check on your Sass files and it will recompile your CSS whenever it is required.

15. Sassaparilla

15 必不可少的 Sass 和 Compass 工具

Sassaparilla 是一组创建响应式网站的规则和风格,Sassaparilla 使用 Sass 和 Compass 建立灵活的可重用的样式表,帮助你简单、快速的创建出响应式网站。