Question

I read about many CSS related languages and tools which need ruby.

• What is the purpose of these
  languages and tool how these can save
  time and improve our CSS coding.
• What is the role in ruby language in
  these languages and tool.
• Will i have to install and learn
  ruby language to use these languages and tool.
• will i need ruby installed on
  webserver where website will be
  hosted.

I’m talking abut these languages

http://lesscss.org/

http://sass-lang.com/

http://compass-style.org/

some mentioned here:

http://www.ruby-toolbox.com/categories/css_frameworks.html

I’m on Windows XP PC , How can i use these Ruby based languages and which is preferred? I don’t know ruby language.

Answer 1

the point

the point of these languages (i prefer, however frameworks or extensions) of css is to incorporate your workflow to your css saving you time. How?

Let’s imagine, that you have div with class some-long-class-to-be-sure-what-it-does and that div has h3 child, p child, .some-other-class child and something else (span child).

Now, if you want to style all of them, you have to do something like this:

.some-long-class-to-be-sure-what-it-does { width: 120px; } 
  .some-long-class-to-be-sure-what-it-does h3 { font-size: 20px; }
  .some-long-class-to-be-sure-what-it-does p { margin-bottom: 30px; }
  .some-long-class-to-be-sure-what-it-does .some-other-class { width: 120px; }

to inform browser about (i.e.) only h3 of .some-long-class-to-be-sure-what-it-does has font-size: 20px;.

with most of these parsers/frameworks, you have (still just an example) nesting at hand:

.some-long-class-to-be-sure-what-it-does {
  width: 120px; 
    @ h3 { font-size: 20px; }
    @ p { 
        margin-bottom: 30px;
        @ .subclass { color: red; }
      }
    @ .some-other-class { width: 120px; }
 }

which gives you smaller css, easier to edit in a long run (this is subjective, you may find it’s harder for you to work with).

Also, they extend css in other ways besides nesting: constants (assign something to @col1 and use it on three places, then you decide, that you need something lighter… bam! you edit it once), flags, output formatting and many more, so I guess you will find your way of using it.

how to us it

mostly, you don’t install it on your PC, but rather on your server. Instead of classic CSS, you link your site with installed CSS parser/framework/language, which on every call calculates (or will use cached version if avalaible) normal css – but when you edit it, you edit simplified/extended version of your css.

Edit: you don’t install it onto your PC as a USER, but you need to install it into your developing enviroment. If it’s localhost on your PC, then yes, you install it in your PC – but not as a user, but on your locally running server.

Ruby?

I think, that for ruby, these extensions to css were first. But now you can find it for other languages aswell – I, as PHP programmer, have found Anthony Short’s CSScaffold:

github with little description
http://github.com/anthonyshort/csscaffold

scaffold’s website, currently offline
http://scaffoldframework.com/

edit: what’s it’s use?

In that try example you see counting with multiple constant. that way, if you change !sidebar from 200px to 300px, every part of your css recalculates with it. every place this constant is mentioned, wheter by itself or in calculation.

another:

SASS in .NET – Better CSS in .NET?
less css in .NET – http://www.dotlesscss.com/