What is the difference between sass and compass

Sign up to add or upvote pros Make informed product decisions. Cons of Compass. Cons of Less. Cons of Sass. Cons of Compass Be the first to leave a con. Cons of Less Be the first to leave a con.

Cons of Sass 1. Sign up to add or upvote cons Make informed product decisions. What is Compass? The compass core framework is a design-agnostic framework that provides common code that would otherwise be duplicated across other frameworks and extensions. What is Less? Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable.

What is Sass? The resultant selector is many levels deep, making it very specific. From a maintainability point of view it would be far easier to simply have this to achieve the same effect:. So, keep in mind that just because you can nest rules doesn't mean you always should. In CSS terms, this typically involves writing lots of media queries for the different breakpoints in a design. That code sets a different font size on the h1 element depending upon the screen width in pixels. Personally, I think this is quite verbose and a lot to remember.

A variable is defined for XS , S and M elsewhere each is just a width value. The value of the variable is then used inside a mixin called MQ. Using that MQ mixin, media queries can be placed easily wherever they are needed, arguably making it simpler to understand where they are being applied in the code.

I've talked about some of the compelling features of Sass and Compass and not even mentioned extend , placeholder styles, partial files, or image sprites; I hope you'll stick around for later chapters when we get into using them.

In the meantime, as Columbo and Steve Jobs would say, 'Just one more thing…'. How do you compress CSS before using it on a live site? Compressing the CSS makes it a fraction of its original size, resulting in faster code for every device that requests it. Compressing CSS can easily reduce the file size by half its original uncompressed size. Sure it's possible to copy and paste the CSS into an online compression tool, or perhaps your text editor has a built-in feature for the task, but Sass is better still.

It just does it. Sass can be configured to compile the CSS in a number of formats, one of which is compressed. So as soon as the Sass file is saved, it gets automatically compiled into compressed CSS; production ready and in the smallest possible file size. A time saver and something every user of the sites you build will benefit from, even if they don't know it. So that's it; I've given you a few brief nuggets of what Sass and Compass can do.

Next, let's get a handle on what Sass and Compass actually are and then we'll get up and running. Sass is a meta-language on top of CSS that's used to describe the style of a document cleanly and structurally, with more power than flat CSS allows.

Sass both provides a simpler, more elegant syntax for CSS and implements various features that are useful for creating manageable style sheets. The Sass website also provides some insight in to how Sass came about and developed. Since then, it has been fostered, loved, and cared for by a number of others. However, most notable in the development of Sass is Nathan Weizembaum the primary designer and developer who developed Sass with Hampton Catlin until Version 2 and Christopher Eppstein who joined Weizembaum on the Sass core team in and developed the project with him from Version 2.

Eppstein is also the creator of the Compass framework. There are also a number of other contributors to the Sass project. As Sass started life in the Ruby community Ruby is itself a programming language , much of the documentation associated with Sass has always been programmer friendly. Historically, this has made Sass difficult for non-programmers to get their heads around. This is a great shame, as designers who also write their own frontend code arguably stand to benefit as much as anyone else from its power and features.

Sass also supports two syntaxes. The original syntax known as Sass, with files ending in a. It removes the curly braces we're used to seeing in CSS. The syntax we will be using throughout this book is the SCSS based syntax, with Sass files ending in the. This syntax is more verbose than the original indent-based syntax but similar to existing CSS. As Nathan Weizembaum and Christopher Eppstein are the current maintainers of Sass, while the title isn't specifically targeted at designers, it may be worth your attention.

It describes itself as follows:. In fact, Compass was the first Sass-based framework. What this boils down to is that by installing Compass alongside Sass we get access to lots and lots of reusable patterns and tools for easily creating CSS.

Have you seen the TV show Pimp my ride? Put another way, Compass lets you write CSS3 goodies like box-shadow, gradients, columns, and transforms with a single syntax, and it magically creates cross-browser compatible CSS of everything that just works without headaches. It also paves the way for additional plugins to enable incredible, lightweight grid systems that we will be looking at in due course.

Note: Compass is charityware. This means that while you can use it as much as you like, you are encouraged to make a donation to help the UMDF find a cure for mitochondrial disease. In days gone by, to use Sass and Compass, it was necessary to use the command line to install them. Don't worry, those days are over. If you're not a fan of the command line, you don't have to use it.

However, while we'll look at these tools, we can totally install Sass and Compass from the command line. Are you ready?

Let's do this. If you'd rather not, I understand, just skip ahead to the section on graphical tools. You can always come back here later. I won't judge! Compass creator Chris Eppstein has created a graphical installer package. However, understanding just a little about the command line will be beneficial, so you may opt to flex your command line muscles just a little and install from there. There are only a few commands that are essential to work with Sass and Compass on the command line.

Following are the ones you'll probably need to know:. Before we can install Sass and Compass, we need Ruby installed. If you are on OS X, you already have it. Just use the defaults you don't need to put any tick boxes in the options.

Linux users should be able to install Ruby direct from their package manager. I'm assuming if you are running Linux you are savvy enough to understand what to do, if not, I'd suggest getting a Mac! We're going to use the Ruby gem command. Basically, we are just saying, "Ruby, install me the 'gem' called 'compass'". Compass actually requires Sass, so by installing Compass, Ruby will automatically install Sass too. Think of a gem as a tiny application or plugin; it simply extends the functionality of something that uses Ruby.

Because Sass and Compass use Ruby, once you get into Sass, you'll often find yourself downloading new gems. For example, there are gems for grid systems like Susy, gems for button styles like Sassy Buttons, and lots, lots more. Those on OS X should open the Terminal application. It's typically located in the Applications Utilities folder. Here's the Terminal application in my Finder:.

Double-click on that and you'll see a window like the following screenshot:. In case you've never been here before, this is the command line! Advice on Compass and Sass. CEO at ME! Needs advice. Decisions about Compass and Sass. Get Advice from developers at your company using Private StackShare. Sign up for Private StackShare.

Pros of Compass. Pros of Sass. Pros of Compass 9. Pros of Sass Sign up to add or upvote pros Make informed product decisions. Cons of Compass. Cons of Sass. Recommended Articles.

Article Contributed By :. Easy Normal Medium Hard Expert. Writing code in comment? Please use ide. Load Comments. What's New.