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

来源:http://www.cnblogs.com/lhb25/archive/2016/06/02/15-useful-sass-and-compass-tools.html
-Advertisement-
Play Games

Sass 是 CSS 的擴展,增加了嵌套規則,變數,混入功能等很多更多。它簡化了組織和維護 CSS 代碼的成本。Compass 是一個開源的 CSS 框架,使得使用 CSS3 和流行的設計模式比以往任何時候都更容易。在這篇文章中,我們已經收集了一組有用的 Sass 和 Compass 工具,將幫助您... ...


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

編譯來源:夢想天空 ◆ 關註前端開發技術 ◆ 分享網頁設計資源


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Google的 Chrome實驗室收集了很多讓人難以置信的基於 HTML5 Canvas 和 JavaScript 的實驗項目,裡面的例子都很獨特,讓人驚嘆。我從未想過結合 HTML 和 JavaScript 能實現這麼強大的效果。今天,本文與大家分享其中9個很棒的例子,為了有更好的效果,建議在Ch ...
  • <script type="text/javascript"> //jquery判斷瀏覽器信息 $(function(){ var bro=$.browser;//獲取瀏覽器用戶代理信息; var bro_msie=bro.msie;//判斷是否為ie瀏覽器,假如為ie瀏覽器就返回:true,否則返 ...
  • 接觸javascript很久了,每次理解閉包都似是而非,最近在找Web前端的工作,所以需要把基礎夯實一下。 本文是參照了joy_lee的博客 閉包 在她這篇博客的基礎上以批註的形式力爭把我的理解闡述出來,如果有不當之處,歡迎批評指正。 《高級程式設計》上,這樣說:當在函數內部定義了其他函數時候,就創 ...
  • 渲染應該從最開始當頁面佈局被定義時就進行優化,樣式和腳本在頁面渲染中扮演著非常重要的角色。專業人員知道一些技巧以避免一些性能問題。 這篇文章不會深入研究瀏覽器的技術細節,而是提供一些通用的原則。不同瀏覽器引擎工作原理不同,這就使特定瀏覽器的學習更加複雜。 瀏覽器是怎樣渲染一個頁面的? 我們從瀏覽器渲 ...
  • 註釋還是相當清晰的 純手打,有錯請提出。致敬默默同學! ...
  • 在實際開發中,jQuery的實踐性非常強大。上一篇本人已經整理出了一部分基礎知識點,該文即是對以上的補充和擴展。 1、表單值的操作 2、屬性操作 3、特性操作 【註意】checked、selected、disabled要使用.prop()方法。 prop方法通常用來影響DOM元素的動態狀態,而不是改 ...
  • 今天朋友共用了一道js中經典的面試題,需求是這樣的 給定你任意一個字元串,讓你寫出一個演算法,求算出該字元串中出現次數最多的一個字元,並將其結果輸出 剛拿到這道題的第一感覺便是定義一個count計時器,然後通過for迴圈 裡面嵌套if判斷,但是這樣的話貌似並不是一個很好的解決方案 因為你並不知道該字元 ...
  • 俗話說欲善其功,必先利其器。 作為目前新型的Web Server開發棧倍受開發者關註的Nodejs來說,調試技術是學習開發的基石,所以對於開始學習Nodejs童鞋來說,Nodejs的調試工具使用是必不可少的,總的來說Nodejs的調試方法主要分類三類: 1、基於Nodejs內建的調試器 2、基於V8 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...