application.css.sass? about jquery-ui-sass-rails

[jhilden]

The main difference between Sprocket's require and Sass's @import is that the requires only concatinate the already compiled Sass, so there is no chance to reuse Sass variables, mixins, etc. from on file in the other. More information here: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#import What exactly is missing in the examples in the README to make them better understandable? I would really appreciate feedback on how to improve them.

Does application.css.sass replace application.css entirely?

Yes. Not sure what would happen if you have both, but you definitely shouldn't. You need to give your application.css a .sass (or .scss) file extension in order us Sass functionality in there.

Does that help you?

[jondkinney]

So my question is how to covert the standard manifest requires into @imports? Do you just replace every require with @import and call it good? Do you have to be more specific with the pathing? Does it have the ability to require_tree like the manifest does? Or do you have to @import every single file you want to include?

Here's my current application.js. Perhaps if you show me how it would look with this gem that'll help me get on the right page. Thanks.

// This is a manifest file that'll be compiled into including all the files listed below.
// Add new JavaScript/Coffee code in separate files in this directory and they'll automatically
// be included in the compiled file accessible from http://example.com/assets/application.js
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
// NOTE (2012-07-23) jonk => the files in this manifest list are organized by
// vendor/assets, lib/assets, app/assets
//
//= require jquery
//= require jquery_ujs
//= require jquery.ui.all
//= require jquery/jquery.cookie
//= require jquery/jquery.simplyCountable
//= require dataTables/jquery.dataTables
//= require redactor-rails
//= require data_tables
//= require utility
//= require bubbletip
//= require highcharts
//= require highcharts_fix
//= require html5
//= require modals
//= require_directory ./admin
//= require_directory ./campaigns
//= require_directory ./investor
//= require_directory ./charts
//= require turbolinks
//= require_tree .

[jhilden]

Oh, I think we have a little misunderstanding here. One should use Sass's @import over require only for stylesheets, not for JavaScript. Sass actually doesn't have anything to do with JavaScript. I already fixed the README a tiny bit, but maybe you can give me some more recommendations on how to make it even clearer?

Does that resolve your question?

[jondkinney]

Sorry, I didn't mean to talk about and paste my application.js file. I meant to do it with my application.css file. I was/am/will be tired today :)

So do all the requires in the application.css get replaced with @imports of those files then? Do you have to specify every single file manually, etc, etc. I still have all the same questions.

And here is my application.css. Can you suggest how this would be converted to use your gem?

/*
* This is a manifest file that'll automatically include all the stylesheets available in this directory
* and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
* the top of the compiled file, but it's generally better to create a new file per style scope.
*= require_self
*= require jquery.ui.all
*= require reset
*= require redactor-rails
*= require main
*= require pagination
*= require bubbletip
*/

[jondkinney]

Because see, based on your Readme, it would have me doing this...

/*
* This is a manifest file that'll automatically include all the stylesheets available in this directory
* and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
* the top of the compiled file, but it's generally better to create a new file per style scope.
*= require_self
*= require reset
*= require redactor-rails
*= require main
*= require pagination
*= require bubbletip
*/

$bgColorContent: purple // set custom value for jQueryUI variable

@import jquery.ui.core
@import jquery.ui.theme // your custom variables will be used here
@import jquery.ui.datepicker

But I don't think those files in the requires above will be picked up by the asset pipeline if we're putting those in an application.css.sass file... will they? Do you see my confusion now? How do I get from normal asset pipeline with the requires to also including your @imports?

Thanks,
Jon

[jhilden]

Actually the code above should work.

There is nothing stopping you from mixing require and @import, I just think it's a good idea to be consistent and to only use @import in your stylesheets. The major difference is that require will give you compiled CSS, while @import lets you use all the Sass functionality inside a stylesheet.

Let's say you have defined some variable inside bubbletip.sass, you wouldn't be able to access that variable anywhere else.

[jhilden]

Closing this issue. Feel free to reopen, if there are still things that need to be resolved.

[Tuman829]

@jhilden Lets say that one wanted to fully convert the format to scss( @import rather then require) how would that look for the ```css
*= require self
*= require_tree .

?

[jhilden]

I don't fully understand your concrete question, could you rephrase it for me please?

[Tuman829]

Should require self be converted to the @import format, if so how would that look?

[jhilden]

require_self is not necessary when using @import

application.css.sass:

@import 'something'

.my-class-here
  // this will be compiled in the application.css output without any additional code
  color: black

Does that help?

[sushil10018]

Here is a nice explanation of how it can be used better: http://www.mattboldt.com/organizing-css-and-sass-rails/

#application.css
/*
 *= require_self
 *= require main
*/

then in the file stylesheets/main.scss

#main.scss
@import "jquery-ui";
@import "font-awesome";
@import "bootstrap-sprockets";
@import "base/bootstrap_variables";
@import "bootstrap";
@import "bootstrap-switch.min";
@import "jquery.datetimepicker";