Comments for Front Cube http://frontcube.com FrontCube is a web consulting firm that provides web design and web application development services. Mon, 16 Jan 2012 05:54:00 +0000 hourly 1 http://wordpress.org/?v=3.2.1 Comment on How to get SASS to work with Rails 3 on Heroku (without using any plugins) by Aslam http://frontcube.com/blog/2011/how-to-get-sass-to-work-with-rails-3-on-heroku-without-using-any-plugins#comment-23 Aslam Mon, 16 Jan 2012 05:54:00 +0000 http://frontcube.com/?p=168#comment-23 You are welcome! :) You are welcome! :)

]]> Comment on How to get SASS to work with Rails 3 on Heroku (without using any plugins) by Nuwan Chaturanga http://frontcube.com/blog/2011/how-to-get-sass-to-work-with-rails-3-on-heroku-without-using-any-plugins#comment-22 Nuwan Chaturanga Mon, 16 Jan 2012 03:22:00 +0000 http://frontcube.com/?p=168#comment-22 Thanks Aslam for the explanation it makes sense now. Thanks Aslam for the explanation it makes sense now.

]]> Comment on How to get SASS to work with Rails 3 on Heroku (without using any plugins) by Aslam http://frontcube.com/blog/2011/how-to-get-sass-to-work-with-rails-3-on-heroku-without-using-any-plugins#comment-21 Aslam Sun, 15 Jan 2012 18:33:00 +0000 http://frontcube.com/?p=168#comment-21 Hey Nuwan, glad to see you here.  If you noticed closely, I've written this blog post when I used version 3.0 which didn't support asset pipeline. Also I think you've misunderstood the difference between Compass and SASS. SASS is an extension of CSS and Compass is a CSS Authoring Framework which uses SASS. Compass comes with many useful stuffs out of the box. It has CSS grid framework Blueprint built in. So, when you need to use Blueprint, you just need to include a single line of code. "@import blueprint"  Another main advantage of using Compass is, we can use "Blueprint" grid system with semantic markup. If you directly use "Blueprint", you have to use 'span-*' classes to specify the grid with. If you use Compass, it provides grid widths as mixins. So, we can give a semantic class for the particular HTML element (eg. div) and use the Compass mixin to specify the width. <code> .sidebar   +column(12) </code> Last but not least, if you do front-end design, you know the pain of writing vender prefix for CSS3 styles. For an instance, to get border-radius working in non-CSS3 supported browsers we should write following vender prefixes. <code> .sidebar {   -moz-border-radius: 4px;  -webkit-border-radius: 4px;  -o-border-radius: 4px;  -ms-border-radius: 4px;  -khtml-border-radius: 4px;  border-radius: 4px;  } </code> But, if you use Compass you can accomplish this by writing a single line mixin. <code> .sidebar +border-radius(4px) </code> Therefore, even Rails 3.1 supports asset pipeline, SASS is not capable of doing those awesome stuffs. :) Hey Nuwan, glad to see you here. 

If you noticed closely, I’ve written this blog post when I used version 3.0 which didn’t support asset pipeline.

Also I think you’ve misunderstood the difference between Compass and SASS. SASS is an extension of CSS and Compass is a CSS Authoring Framework which uses SASS.

Compass comes with many useful stuffs out of the box. It has CSS grid framework Blueprint built in. So, when you need to use Blueprint, you just need to include a single line of code. “@import blueprint” 

Another main advantage of using Compass is, we can use “Blueprint” grid system with semantic markup. If you directly use “Blueprint”, you have to use ‘span-*’ classes to specify the grid with. If you use Compass, it provides grid widths as mixins. So, we can give a semantic class for the particular HTML element (eg. div) and use the Compass mixin to specify the width.

1
2
.sidebar
  +column(12)

Last but not least, if you do front-end design, you know the pain of writing vender prefix for CSS3 styles. For an instance, to get border-radius working in non-CSS3 supported browsers we should write following vender prefixes.

1
2
3
.sidebar {
  -moz-border-radius: 4px;  -webkit-border-radius: 4px;  -o-border-radius: 4px;  -ms-border-radius: 4px;  -khtml-border-radius: 4px;  border-radius: 4px; 
}

But, if you use Compass you can accomplish this by writing a single line mixin.

1
2
.sidebar
   +border-radius(4px)

Therefore, even Rails 3.1 supports asset pipeline, SASS is not capable of doing those awesome stuffs. :)

]]> Comment on How to get SASS to work with Rails 3 on Heroku (without using any plugins) by Nuwan Chaturanga http://frontcube.com/blog/2011/how-to-get-sass-to-work-with-rails-3-on-heroku-without-using-any-plugins#comment-20 Nuwan Chaturanga Sun, 15 Jan 2012 04:06:00 +0000 http://frontcube.com/?p=168#comment-20 In Rails version > 3 projects with asset pipeline enabled before pushing to heroku I normally run rake assets:precompile which compiles all the css/scss/sass and js/coffee  files to public/app.(minificated and compressed) Aslam, I am wondering if there any reason to use compass when asset pipeline provides what compass does.  In Rails version > 3 projects with asset pipeline enabled before pushing to heroku I normally run rake assets:precompile which compiles all the css/scss/sass and js/coffee  files to public/app.(minificated and compressed)

Aslam,

I am wondering if there any reason to use compass when asset pipeline provides what compass does. 

]]> Comment on How to get SASS to work with Rails 3 on Heroku (without using any plugins) by Tom http://frontcube.com/blog/2011/how-to-get-sass-to-work-with-rails-3-on-heroku-without-using-any-plugins#comment-19 Tom Wed, 13 Apr 2011 06:15:00 +0000 http://frontcube.com/?p=168#comment-19 What about the Heroku documentation on this subject : http://devcenter.heroku.com/articles/using-compass ? What about the Heroku documentation on this subject : http://devcenter.heroku.com/articles/using-compass ?

]]> Comment on How to get SASS to work with Rails 3 on Heroku (without using any plugins) by Stephen Touset http://frontcube.com/blog/2011/how-to-get-sass-to-work-with-rails-3-on-heroku-without-using-any-plugins#comment-18 Stephen Touset Wed, 13 Apr 2011 01:21:00 +0000 http://frontcube.com/?p=168#comment-18 This will produce failures if you have more than one dyno. Web browser makes a request to the page, stylesheets are compiled on that dyno. Web browser makes a request for the stylesheets, hits a separate dyno. Stylesheets don't exist. Instant FOUC. This will produce failures if you have more than one dyno.

Web browser makes a request to the page, stylesheets are compiled on that dyno. Web browser makes a request for the stylesheets, hits a separate dyno. Stylesheets don’t exist. Instant FOUC.

]]> Comment on How to get SASS to work with Rails 3 on Heroku (without using any plugins) by Travis Choma http://frontcube.com/blog/2011/how-to-get-sass-to-work-with-rails-3-on-heroku-without-using-any-plugins#comment-17 Travis Choma Thu, 31 Mar 2011 16:58:00 +0000 http://frontcube.com/?p=168#comment-17 Thanks for this! Thanks for this!

]]> Comment on How to get SASS to work with Rails 3 on Heroku (without using any plugins) by Aslam http://frontcube.com/blog/2011/how-to-get-sass-to-work-with-rails-3-on-heroku-without-using-any-plugins#comment-16 Aslam Thu, 31 Mar 2011 14:45:00 +0000 http://frontcube.com/?p=168#comment-16 Yes, I guessed that. Anyway, glad you realized the pitfalls. :) Yes, I guessed that. Anyway, glad you realized the pitfalls. :)

]]> Comment on How to get SASS to work with Rails 3 on Heroku (without using any plugins) by Akash Manohar http://frontcube.com/blog/2011/how-to-get-sass-to-work-with-rails-3-on-heroku-without-using-any-plugins#comment-15 Akash Manohar Thu, 31 Mar 2011 12:57:00 +0000 http://frontcube.com/?p=168#comment-15 Agree :) and that was me SingAlong on HN Agree :) and that was me SingAlong on HN

]]> Comment on How to get SASS to work with Rails 3 on Heroku (without using any plugins) by Aslam http://frontcube.com/blog/2011/how-to-get-sass-to-work-with-rails-3-on-heroku-without-using-any-plugins#comment-14 Aslam Thu, 31 Mar 2011 12:25:00 +0000 http://frontcube.com/?p=168#comment-14 You have given a good answer in HN. http://news.ycombinator.com/item?id=2391125 HN full thread: http://news.ycombinator.com/item?id=2390673 You have given a good answer in HN. http://news.ycombinator.com/item?id=2391125

HN full thread: http://news.ycombinator.com/item?id=2390673

]]>