background preloader

Scout - Compass and Sass without all the hassle

Scout - Compass and Sass without all the hassle
Related:  SASS

The Sass Way Sass Documentation Sass makes CSS fun again. Sass is an extension of CSS, adding nested rules, variables, mixins, selector inheritance, and more. It's translated to well-formatted, standard CSS using the command line tool or a web-framework plugin. Sass has two syntaxes. The new main syntax (as of Sass 3) is known as "SCSS" (for "Sassy CSS"), and is a superset of CSS's syntax. This means that every valid CSS stylesheet is valid SCSS as well. The second, older syntax is known as the indented syntax (or just "Sass"). Using Sass can be used from the command line or as part of a web framework. gem install sass After you convert some CSS to Sass, you can run sass style.scss to compile it back to CSS. sass --help To install Sass in Rails 2, just add config.gem "sass" to config/environment.rb. Sass can also be used with any Rack-enabled web framework. require 'sass/plugin/rack'use Sass::Plugin::Rack to config.ru. To use Sass programmatically, check out the YARD documentation. Formatting Sass has two syntaxes. Nesting

Fire.app: Dead Easy HTML Prototyping CodeKit — THE Mac App For Web Developers Top 18 Online Meeting and Web Conferencing Tools In a world where we now communicate and collaborate mainly via the Internet, it’s important to have the right tool available. Not only do you need something that is dependable and works properly, but you also want a tool that is easy for all of your collaborators to use. Having a lot of features is nice, but if the people you’re trying to communicate with can’t figure out how to join you, more than likely you’ll end up alone! This list will got over some of the best online tools for meetings, group collaborations, and screen sharing. All of these tools are easy-to-use and, for the most part, are even easier for your collaborators to join in as well. MeetingBurner MeetingBurner is not just a great place to hold online meetings (right in the browser – no downloads required), it’s also good for hosting webinars, and sharing your screen. Meetin.gs Pricing: Meetin.gs has both a free and PRO account ($19/month or $190/year). Jabbster GoToMeeting Yugma WebEx Sync.in Twiddla Vyew Huddle 321Meet

Using Source Maps to Debug Sass in Chrome If you use Sass in your front-end projects, chances are your partials are split in a clean and logical fashion based on a reliable Sass architecture. In such cases, debugging the compiled CSS could be both troublesome and time consuming. Sass provides a flag to enable line numbers (--line-numbers), which includes comments (like below) in your CSS. Although this is helpful, you would still have to trace the bug in your CSS back to the source file manually. So how can we make this process easier? I’m going to show you how to use source maps in conjunction with Chrome’s Workspaces to allow you to debug and edit Sass from within the browser. Browser and Sass Requirements The source maps feature gained a lot of attention when it was first introduced and a lot has changed since. You do not require Chrome Canary, nor do you need to edit to use this. Source maps require Sass 3.3 or above (Sass 3.4 was released recently). What is a Source Map? How Do Source Maps Help? sass style.scss:..

Getting started | Less.js Sass vs. LESS "Which CSS preprocessor language should I choose?" is a hot topic lately. I've been asked in person several times and an online debate has been popping up every few days it seems. It's nice that the conversation has largely turned from whether or not preprocessing is a good idea to which one language is best. Let's do this thing. Really short answer: Sass Slightly longer answer: Sass is better on a whole bunch of different fronts, but if you are already happy in LESS, that's cool, at least you are doing yourself a favor by preprocessing. Much longer answer: Read on. The Much Longer Answer The Learning Curve with Ruby and Command Line and Whatever The only learning curve is the syntax. Winner: Nobody Helping with CSS3 With either language, you can write your own mixins to help with vendor prefixes. In Sass, you can use Compass, and Compass will keep itself updated, and thus the prefix situation is handled for you. In LESS, there are also some mixin libraries battling to be the best. See that?

Related: