How to use these ruby based CSS stylsheet frameworks languages?


Tags: ruby-on-rails,css,xhtml,rubygems

Problem :

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.



Solution :

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/


    CSS Howto..

    How to turn off materialize css containers when on mobile?

    How to collectively center several divs within a parent div?

    How I can add td to css style for inputs and its label?

    How does 'em' css unit work for positioned elements?

    How can I write a complex fraction using HTML/CSS/jQuery?

    How to put a css tag in an element if another has this element [closed]

    How to create CSS-based (big) quotation marks?

    How can i create a div which contains two divs and stretch automatically

    How to set a menu hover delay

    How to delay the display of the background image in a div

    CSS how to change page content depending on page size (zoom) in responsive design

    Images not showing in PhoneGap Build application

    How to align image to top left of div

    How to import CSS from node_modules in webpack angular2 app

    How do I make images fit the entire screen fully, regardless of screen size?

    How can I change the css class rules using jQuery?

    How to include button text and links as part of css

    How to set backgroundImage property in css file in flex 4?

    How to have an asp.net ajax control automatically reference css files

    How to move this structure to the right without using float?

    How to search a particular text within an HTML Text and highlight the search string with a color

    Border-bottom showing on top

    How to make div width almost 100%

    How to set the universal CSS selector with JavaScript?

    How to replace @media (max-width) using Stylish or Greasemonkey?

    how to set zoom level using css

    how to add line break in HTML using jQuery

    I have a standard table with text inside. How do I vertical align this?

    how to edit input type data with CSS [duplicate]

    How can I make jQuery's draggable function expand the container?