分享15款很实用的 Sass 和 Compass 工具

简介:   Sass 是 CSS 的扩展,增加了嵌套规则,变量,混入功能等很多更多。它简化了组织和维护 CSS 代码的成本。Compass 是一个开源的 CSS 框架,使得使用 CSS3 和流行的设计模式比以往任何时候都更容易。

  Sass 是 CSS 的扩展,增加了嵌套规则,变量,混入功能等很多更多。它简化了组织和维护 CSS 代码的成本。Compass 是一个开源的 CSS 框架,使得使用 CSS3 和流行的设计模式比以往任何时候都更容易。

  在这篇文章中,我们已经收集了一组有用的 Sass 和 Compass 工具,将帮助您快速构建 Web 应用程序。

您可能感兴趣的相关文章

 

1. Compass.app

compassapp
Compass is a stylesheet authoring framework that makes your stylesheets and markup easier to build and maintain. With compass, you write your stylesheets in Sass instead of plain CSS. Compass.app is a menubar only app for Sass and Compass. It helps designers compile stylesheets easily without resorting to command line interface. Compass.app is written in Java (JRuby), and works in mac, linux and pc. You do not need to install Ruby environment to use it.

2. Scout

scout
Scout is a cross-platform app that runs Sass and Compass in a self-contained Ruby environment, Scout runs Sass and Compass in a self-contained Ruby environment, letting you effortlessly manage all of your Sass projects with a handful of clicks. You’ll never have to worry about your Ruby setup or deal with technical issues. Scout does all of the heavy lifting, giving you more time to do what you love.

3. Codekit

codekit
Codekit is a powerful compiler that processes Sass, Compass, Less, Stylus, Jade, Haml, Slim, CoffeeScript and Javascript files automatically each time you save. With live browser reloads, image optimization and easy debugging, it makes working with Compass and Sass a breeze. The app also offers team collaboration and helps reduce load times by combining and minifying files.

4. Archetype

archetype
Archteype is a Compass/Sass framework for creating configurable, composable UI patterns and components. It’s well documented and uses a natural language syntax.

5. Susy

Susy
Susy provides responsive grids for Compass, filling the void left when grids were stripped from Compass. You can quickly add media-query breakpoints for new layouts, or create your own math using Susy’s array of grid helpers. It has the power to help you build a site in minutes, or create a scalable grid library for use in large projects.

6. The Saasway

The Sass Way
The Sass Way covers the latest news and topics on crafting CSS using Sass and Compass, with articles, resources and tutorials to suit both beginners and advanced users.

7. Sassaparilla

Sassaparilla
Sassaparilla makes starting responsive web projects faster using Sass and Compass. It focuses heavily on better typography with exceptional vertical rhythm, and lets you work in px while compiling in ems, eliminating a lot of math designers often need to do. It supports variables using Sass for things like color.

8. LivingStyleGuide

livingstyle
The LivingStyleGuide Gem is an easy way to create front-end style guides using Sass and Compass. Just add Markdown to your Sass to create your guides.

9. Pondasee

pondasee
Pondasee has been made to help front-end designers accelerate their work-flow for making web applications. It is NOT a CSS framework, it is a front-end starter kit combined with the power of SCSS & Compass to help build a template.

10. LiveReload

LiveReload
LiveReload resides in your menu bar and monitors changes in the file system. As soon as you save a file, it is preprocessed as required, and the browser is refreshed. It ships with SASS, Compass, LESS, Stylus, CoffeeScript, IcedCoffeeScript, Eco, SLIM, HAML and Jade, and is controlled by two main checkboxes, so you won’t get lost.

11. Koala

koala
Koala is a GUI app for CoffeeScript, Compass, Less, and Sass compilation, to make you a more efficient web developer. It runs on Mac, Linux, and Windows, and includes real-time compilation, multi-language support, and more.

12. Bootstrap Sass

bootstrap saas
Bootstrap-Sass is a Sass-based version of Bootstrap, perfect for your Sass-powered applications. It can be installed with Rails, Compass, or Sass-only.

13. Forge

forge
Forge is a free command-line toolkit for bootstrapping and developing WordPressthemes in a tidy environment using front-end languages like Sass, LESS, and CoffeeScript. Forge creates a neatly organized source folder with clean and simple scaffolding (base template files, SCSS files, and theme options). The source folder is automatically compiled to your local WordPress install(s) as you save changes and work on your theme.

14. Prepros

prepros
Prepros is an app dedicated to making compiling code easier. It compiles all of your Sass, Scss, Compass, Less, Jade, Haml and CoffeeScript in real time, with live browser refresh to keep your preprocessing workflow seamless. It has no dependencies and features a built-in HTTP server, background file watch, error notification and live CSS injection.

15. Break Point

breakpoint
Breakpoint makes writing media queries in Sass super simple — just create a variable using a simplified syntax, based on most commonly used media queries, then call it using the “breakpoint” mixin. Breakpoint handles all of the heavy lifting, from writing the media query itself to handling cross-browser compatibility issues.

 

您可能感兴趣的相关文章

 

本文链接:分享15款很实用的 Sass 和 Compass 工具

编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

相关文章
|
6月前
|
JavaScript 前端开发 开发者
Spartacus 项目中 scss 文件里的 mergeAll 函数
Spartacus 项目中 scss 文件里的 mergeAll 函数
44 0
|
8月前
|
Dart 前端开发 JavaScript
Sass dart-sass 与 node-sass 的区别与选择
Sass dart-sass 与 node-sass 的区别与选择
229 0
|
11月前
|
缓存 Linux Windows
certutil工具使用和bypass学习
certutil工具使用和bypass学习
519 0
|
前端开发
零基础CSS入门教程(1)——认识css
我们这一下小节认识一下css,什么是css,css是干什么的。CSS是层叠样式表的简称,有时可以称为CSS样式表或者级联样式表,也是一种标记语言,主要用于设置HTML页面中的文本内容,图片的外形或者版面的布局以及外观样式,可以称为网页美容师。 CSS最大价值:由HTML专注去做结构呈现,样式由CSS来完成,即结构(HTML)和样式(CSS)相分离CSS规则由两个主要的部分组成:选择器以及一条或多条声明(通俗理解为:选择器即为给谁改样式,多条声明为改成什么样式) 一般将CSS写在中,将HTML写在中,这样就
零基础CSS入门教程(1)——认识css
|
前端开发
零基础CSS入门教程(2)——CSS如何应用
上一篇介绍了CSS的作用,就是用来设置网页的样式的。本篇就用一个最基础的入门实例,来展示下CSS是如何将样式应用到网页上好的,现在我们想将绿色这个样式应用到上面的第一个标签,也就是下面这段代码上。 那么如何应用呢,其实可以通过HTML的style属性来实现。也就是说,style属性的值就是我们要编写的CSS代码部分。通过style属性,我们可以将CSS样式代码应用到指定的标签上。看下面的代码,我们给p标签设置了style样式,style属性的值color:aquamarine;就是CSS代码 效果如下 从上
零基础CSS入门教程(2)——CSS如何应用
|
前端开发
零基础CSS入门教程(18)——注释
我们可以看到在代码里面加注释,在网页上面是显示不出来的,我们要学会使用注释,并且养成使用注释的习惯。我们之前学习html的注释,不止是html有注释css也有注释。注释再我们英语和文言文里面很常见。/* 设置背景颜色和字体颜色 */
零基础CSS入门教程(18)——注释
|
前端开发
零基础CSS入门教程(7)——CSS外联写法
我们前几个小结学习了选择器,我们这几个小结学习一下css外联写法,并且熟练运用。我们为什么要学习外联写法那,我们再写css的时候少量的代码我们可以写在html里面但是我们要是做项目或者工程我们就必须使用外联写法。目录 第一步新建html把外联样式导进来 外联css的代码 效果如下 我们这一小结学习了css外联写法,我们外联写法一般用在代码非常多的时候使用。
零基础CSS入门教程(7)——CSS外联写法
|
前端开发
sass的使用方法
sass的使用方法
|
Dart
Node sass 切换成Dart Sass
参照:链接 注意:安装了sass后,sass-laoder的版本不能太高,否则会报 Syntax Error: TypeError: this.getOptions is not a function 我的版本对应关系如下: “sass”: “^1.49.9”, “sass-loader”: “^7.1.0”,
172 0