2

I'm digging into the world of CSS and I'm having some difficulties understanding the use of everything that exists.

There is LESS, SASS, Compass, Blueprint, HAML, etc. Which ones should I use together? Can someone explain what goes with each other?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
donald
  • 23,587
  • 42
  • 142
  • 223
  • 8
    If you're learning CSS, you don't need to know about any of those. Just learn CSS. Later on, you may discover why people have built all those other things. – Greg Hewgill Mar 23 '11 at 21:37
  • They are like cereal brands. Really depends on what works best for you. – Fareesh Vijayarangam Mar 23 '11 at 21:39
  • 2
    No one has mentioned [Stylus](learnboost.github.com/stylus/); it's a more recent one that LESS and SASS but is in my opinion distinctly superior to all the others out there. – Chris Morgan Jul 10 '11 at 05:37
  • dont, they suck in my opinion. – chesscov77 Nov 24 '13 at 16:19
  • @ChrisMorgan: Why is that? – Robert Siemer Jul 25 '14 at 12:30
  • You should start by learning CSS in depth. All the framework I've come across are kinda dumb. The most popular ones (LESS, SASS) will still happily duplicate your CSS code and generate useless code. So learn about CSS and know what these tools do before using them. – Rolf Nov 11 '16 at 17:00

4 Answers4

13

LESS and SASS are server-side CSS generation frameworks -- they allow you to create stylesheets using syntax that is close to CSS, but allows you to use items like variables and functions. Compiling these files will then generate a CSS file that you use. An important thing to note here is that SASS is only available for Ruby.

HAML is another item that is only available for Ruby, but doesn't do CSS. It's actually an alternate to creating ERBs (a Ruby partial view).

Compass is a library that is added on top of the SASS framework, allowing a bit more functionality and several default classes / styles.

Blueprint is another library that is basically a CSS file with preset classes, allowing for common use-cases like creating multi-column layouts.

However, none of these are needed to write CSS, and for the most part, aren't even good enough to really look into yet. While I love the functionality of SASS, it's really not for everyone, and ends up creating more bloated CSS than necessary.

If you're just starting to experiment with CSS, I would recommend resources like Transcending CSS and Hardboiled Web Design by Andy Clarke. HTML5 for Web Designers and CSS3 for Web Designers are also both pretty good resources. A good understanding of HTML markup and semantics are also important for taking advantage of CSS and using it correctly.

RussellUresti
  • 6,211
  • 4
  • 28
  • 26
  • Not True! CleverCSS is a pure Python implementation of SASS that can be used as a drop in replacement for the ruby SASS gem – Thomas May 06 '11 at 18:03
  • Then that would be CleverCSS and not SASS. To use SASS you need Ruby, or some version of it such as JRuby. – RussellUresti May 06 '11 at 18:10
  • I was refering to "An important thing to note here is that SASS is only available for Ruby." I use SASS markup in my django apps using CleverCSS, and it supports all the important SASS features. – Thomas May 08 '11 at 17:37
  • A port of SASS is not SASS. With the actual project, you get the updates, like to SCSS, immediately. With a port, like CleverCSS, you have to wait until that project implements the updates. A port of the project is not the same as the original project. But, yes, there are several ports available that bring SASS functionality to other languages. – RussellUresti May 16 '11 at 20:50
  • Less now has client-side support as well. – mrBorna Aug 22 '11 at 14:06
3

HAML and SASS go together, HAML is a shortcut language for writing HTML, SASS (or SCSS) is a shortcut language for writing CSS you have to know how to write both HTML/CSS "longhand" in order to get the best out of the HAML/SASS shortcut versions.

The shortcuts should only be used in DEV, unless you have a RUBY server - I get really annoyed when I see that both of the above languages are a "replacement" for "dumb" languages.. In particular all you have to search for is that "CSS is Dumb" to find references to SASS/SCSS - it's a vicious linkbait ploy ;) you cannot use one without knowing the other

COMPASS is a Ruby Gem that aids in the compilation of HAML and SASS/SCSS (to HTML and CSS) in a local environment - in a development environment it means that changes made via those languages will be compiled to "proper" HTML and CSS serverside on an appropriate server

LESS is a javascript equivalent of SASS. You can use it on the server-side (via node.js) or clientside(by just importing a js file) it takes the short cuts you write and compiles it into valid CSS (with multi browser or vendor extensions)

BLUEPRINT is a Framework that can be used with plain CSS or shortcut (disclaimer: I don't like frameworks as they add unnecessary classes) If you want to use the Blueprint or Yahoo Grids Framework within Compass/SaSS/LESS then you'd better understand what they're doing first before blaming the tools which try to make their implementation easier - These tools do not make these Frameworks work, they will however make the amount of typing you have to do decrease if you really want to use them.

I recently tried LESS/SaSS and SCSS.. I like them but then I know how to write the CSS in the first place I don't want them to do more than become a tool to make my life easier.. they don't "do" CSS better than CSS can do already, they can however do nesting and organization of your CSS, which I really like!

mrBorna
  • 1,757
  • 16
  • 16
clairesuzy
  • 27,296
  • 8
  • 54
  • 52
  • Frameworks are something you can "plug and go" HAML/SASS/LESS are not frameworks they're tools, Blueprint/YUI Grids are Frameworks you "plug-in" the code in its entirety and use whatever classes you require – clairesuzy Mar 23 '11 at 22:25
2

You really shouldn't use any of these 'languages' or 'tools' for any reason. They present themselves as shortcuts for multi-browser or parameterized css generators, which is a nice idea, but in the end these things can be achieved many other ways very elegantly using plain old CSS.

They should not be a replacement for using plain old CSS, and the bloat that they can generate prevents that possibility in many cases.

A very compelling reason to NOT use these things is that it raises the install requirements significantly for any developer joining a project, or a developer wanting to move from one machine to another, or a team of developers needing their machines to homogenize in order to contribute. For instance, requiring the installation of ruby, or various python versions, or php stubs to dynamically compile css based on timestamps, etc., all change a tool like SASS, which wants to make things simpler, into a potentially very complicated thing.

With the promise of CSS3, a lot of the things these tools hope to facilitate will become obsolete.

Eyelash
  • 1,760
  • 2
  • 12
  • 18
  • Upvoted! I think half of that also applies to jQuery and (most of) its plugins nowadays, but many people tend to start using stuff because "it's hipp", or because it was a great asset back when it came up, and aren't able to move forward with time. IMHO SASS and the like may all share a great intention and really help in some cases, but most of the time they just lead to overblown, unmanageable, unsupportable stuff. – griffin Aug 26 '15 at 10:36
-1

Using SASS + Compass + Suzy has been the biggest breath of fresh air for my web development workflow in a long time. Styling a beautiful fluid / elastic / fixed custom grid layout with these tools is incredibly fast. I only wish I knew about them sooner.

CleverCSS is a Python program that is nearly identical to SASS from what I can tell, although you can't do @import with CleverCSS. Also SASS doesn't have a semicolon after each CSS selector, just CSS properties, while CleverCSS has semicolons before both (which makes it a little more syntactically inferior IMO).

This article is good to check out if you're a Django / Python person. You won't feel dirty if you decide to use SASS rather than CleverCSS or others. Just suck it up and install Ruby and setup SASS / Compass to watch a folder and autogenerate your CSS on saving .sass files. Just don't mess with the generated CSS files if you want to save your changes. No further "integration" with your otherwise all-Python setup is needed.

Andrew Swihart
  • 619
  • 5
  • 13