CSS require Syntax

Question

I have required CSS stylesheets many times in many of my RubyOnRails applications, and actually i need a few things demystified.

What is the difference between:

//=require mystyles

and

*=require mystyles

Both seem to work, so what is the difference?

And is this a part of the asset pipeline or a part of SASS or just plain CSS?

Answer 1

The two examples you gave are exactly the same for stylesheets, however the //= syntax is the only one that works for Javascript. You also need a standard CSS comment at the start (/*) and a close comment (*/) at the end of the require block to make it ignored to anything but the asset pipeline:

/* ...
*= require mystyles
*= require_self
*/

These require directives are only part of the asset pipeline, not CSS or SASS. To include a stylesheet for CSS or SASS, you would use a @import rule as Blieque stated in his comment.

Check out the manifest files and directives section of the Asset Pipeline guide on the Ruby on Rails guide site for a more detailed explanation of the difference. There is also a warning given there that might be of interest:

If you want to use multiple Sass files, you should generally use the Sass @import rule instead of these Sprockets directives. Using Sprockets directives all Sass files exist within their own scope, making variables or mixins only available within the document they were defined in.