How to view the compiled css from sass files in ruby on rails?


Tags: css,ruby-on-rails,sass

Problem :

I've been learning sass on teamtreehouse and it shows how to view the css files that is compiled after writing sass. However, it's in a node environment.

How would I be able to view the compiled css from the sass code in rails? I can't seem to find a proper answer through google, or maybe there is no significance of viewing it, really? I think it would be beneficial to see what css is printed from sass code.



Solution :

maybe there is no significance of viewing it

If you know what you're doing, why would you need to view it?

SASS is a pre-processor, meaning that it does nothing by way of enhancing CSS -- it simply takes your pseudocode and turns it into actual CSS:

enter image description here

I tell you now that if you have incorrect CSS in your SASS file, or other potential issues, SASS will tell you about it. From that perspective, there's no real reason to see your compiled SASS unless you want to see the structure of your code or something.

-

In regards to seeing the "compiled" SASS, you'll probably be best precompiling your assets:

$ rake assets:precompile RAILS_ENV=production

This will put production-level versions of the asset files into public/..., allowing you to see what the "compiled" version of them would be.

A pain, I know, but what can you do


    CSS Howto..

    How can I add specific css id to parent menu with php or javascript

    Google Share button not showing properly if originaly hidden

    How can I scale the space taken by a scaled element

    How can I specify a *.css file in an ASP.NET UserControl?

    if i clone an element, when i customize (css) that element how can customize also the element cloned?

    How to center modal window in css+html?

    How to apply :hover on :after to certain div in CSS

    How can I use a CSS selector to match two classes being present?

    How do I overwrite a CSS rule?

    How can I apply a link over this entire div?

    How large can CSS values be?

    How to make the css affect the new content loaded by jquery?

    How do I simultaneously open child and sub-child of a parent, in jQuery accordion menu, when parent is clicked?

    How to make angular material dialog box work in IE10

    How can I show hidden element when it has focus?

    Showing responsive menu link that is not shown in regular navigation menu

    How to pass an array from controller to PHP file that contains CSS before the view is loaded?

    How can you fix the height of an element in IE 6, and allow hidden content to be scrolled into view?

    How to make sure one css file does not override another one?

    How to use CSS to position a div in the middle of the page while support a dynamic width?

    how can i create true loop?

    CSS - How to remove unwanted margin between elements?

    How to correctly use text overflow in bootstrap

    How can I make a CSS selector for a button with two classes existing in .less?

    How to make the hover attributes stays when it is clicked/active?

    How to apply CSS to first child div element only?

    Modernizr: IE10 & Flexbox: How to get IE10 flexbox detected

    how do I properly position & scale these elements in CSS?

    How to have this horizontal CSS based navigation menu work properly?

    WebGL: How to make an interactive div (like text input) be drawn on some web gl 3d object and still be interactive?