分享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 工具

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

相关文章
|
资源调度 JavaScript
yarn错误The engine “node“ is incompatible with this module
yarn错误The engine “node“ is incompatible with this module
600 0
|
Python
Pycharm为Python项目配置环境不生效,解决办法
在PyCharm中,项目依赖配置更改后未生效。解决步骤包括:1) 查找`C:\Users\username\AppData\Roaming\JetBrains\PyCharm2022.2\options\jdk.table.xml`,2) 删除`<jdk></jdk>`标签内的旧配置内容,然后重启PyCharm以应用新目录。
1396 0
Pycharm为Python项目配置环境不生效,解决办法
|
机器学习/深度学习 人工智能 算法
AI在医疗影像诊断中的应用与未来展望####
本文深入探讨了人工智能(AI)在医疗影像诊断领域的最新进展、当前应用实例及面临的挑战,并展望了其未来的发展趋势。随着深度学习技术的不断成熟,AI正逐步成为辅助医生进行疾病早期筛查、诊断和治疗规划的重要工具。本文旨在为读者提供一个全面的视角,了解AI如何在提高医疗效率、降低成本和改善患者预后方面发挥关键作用。 ####
|
机器学习/深度学习 数据采集 TensorFlow
使用Python实现深度学习模型:智能健康监测与预警
使用Python实现深度学习模型:智能健康监测与预警
1093 10
|
图形学 开发工具 git
Unity与版本控制:游戏开发团队如何利用Git打造高效协作流程,实现代码管理的最佳实践指南
【8月更文挑战第31天】版本控制在软件开发中至关重要,尤其在Unity游戏开发中,能提升团队协作效率并避免错误。本文介绍如何在Unity项目中应用版本控制的最佳实践,包括选择Git、配置项目以排除不必要的文件、组织项目结构、避免冲突、规范提交信息以及使用分支管理开发流程,从而提高代码质量和团队协作效率。
1285 2
|
JavaScript
js【详解】arr.reduce() 数组缩减
【7月更文挑战第12天】
175 1
|
移动开发 前端开发
ruoyi-nbcio-plus的Vue3前端升级组件后出现的问题(二)
ruoyi-nbcio-plus的Vue3前端升级组件后出现的问题(二)
361 1
|
机器学习/深度学习 自然语言处理 TensorFlow
使用Python实现深度学习模型:BERT模型教程
使用Python实现深度学习模型:BERT模型教程
1335 0
|
缓存 安全 easyexcel
阿里开源的这个库,让Excel导出不再复杂(填充模板的使用指南)
前文 说了写操作,可以实现简单的列表导出,还能 定义样式。有时候,我们还需要导出的一个大表单,或者是表单+列表的形式,这个时候,我们就需要填充功能。
1908 0
阿里开源的这个库,让Excel导出不再复杂(填充模板的使用指南)
|
移动开发 JavaScript 小程序
uniapp为什么能支持多端开发?uniapp底层是怎么做的?
uniapp为什么能支持多端开发?uniapp底层是怎么做的?
559 0