I recently branched one of my Rails 3.0 projects with the 3.1 rc1 to try the new assets pipeline. I've been using Sass in the project before going 3.1 so I've been setting up some variables and functions in a separate configure file and let all my other sass files import that one file at the first line.
This has been working out great to not repeat some color codes and general geometry through in the stylesheets. Problem is now with the new Assets Pipeline is that as I've understood it converts the ".css.sass" files to raw css before appending it to the rest of the code.
So if i specify, in my "application.css":
/*
*= require ./configure
*= require ./what_ever_other_files_i_want_to_import
*/
I get errors like:
Sass::SyntaxError
Undefined variable: "$interactive".
When i try to access the file from: http://localhost:3000/assets/application.css
Any ideas?
Sass supports Partials. That way you can include your separate configuration in __configuration.sass_ and reference it with
#import "configuration";
from your main sass-file.
Unfortunately I found out that SASS variables are be page specific.
If you want to carry your variables across all files, remove the
*= require_tree . line from your application.css.scss file and replace it with the #import "layout.css.scss"; directive to manually import each sass file.
Yes you have to #import each file
Related
I've installed foundation-rails in my Rails app and run rails g foundation:install. The project-specific file(s) (mostly foundation_and_overrides.scss) are properly installed. The gem is there and it had no trouble installing, and the dependencies (SASS, Compass) are also there. But I'm getting:
Error compiling CSS asset
SASS::SyntaxError: File to import not found or unreadable: global.
Originating from:
/Users/local/.rvm/gems/ruby-2.0.0-p353/gems/foundation-rails-5.0.2.0/vendor/assets/stylesheets/foundation/components/_accordion.scss:1
After investigating, I've discovered that _accordion.scss was #imported in the main foundation.scss file, located two directories up in stylesheets/:
#import 'foundation/components/accordion'
The "missing" file, _global.scss, meanwhile, is in that same directory. If I then change the #import code in _accordion.scss from #import 'global' to #import 'foundation/components/accordion', it clears and moves on to the next error (there are a lot of sub-imports here).
It's clear that what's happening is SASS is looking for _global.scss relative to the top stylesheet, foundation.scss, and not relative to the imported stylesheet asking for it (_accordion.scss).
I can't imagine this is a bug in Foundation/Foundation-Rails – this gem wouldn't work for anyone – and I don't want to modify the gem's contents myself.
So my question: do I have to change some SASS settings to allow #import relative to an imported stylesheet? I don't want to modify this gem to make it work (I'd like to allow for future updates to the gem).
Edit
Clarification of directory structure within the gem's vendor/assets/stylesheets directory:
foundation.scss
foundation/components/_accordion.scss
foundation/components/_global.scss
Edit 2
You can actually see the gem's code and structure on github
Edit 3
Thought I'd solved the problem, but I didn't: changing from an #import to a =require got rid of the errors, and included Foundation's CSS. But require does not import the SCSS functionality - variables, mixins - that Foundation provides. There's no way to change global values this way, or to retrieve them or the mixins from the main stylesheet or other #imported stylesheets.
It looks like Foundation thinks this is the best possible solution:
Manually add Foundation's stylesheet subdirectories (each of them) to SASS's :load_paths in the main block of application.rb:
config.sass.load_paths += [
"#{Gem.loaded_specs['foundation-rails'].full_gem_path}/vendor/assets/stylesheets/foundation/components",
"#{Gem.loaded_specs['foundation-rails'].full_gem_path}/vendor/assets/stylesheets/foundation/"
]
I've found a lot of similar questions to this one but nothing that quite solves my problem. Basically, I'm using foundation 4.x with rails 3.x, everything is working fine with foundation_and_overrides being included in my application.css. I can modify the variables in foundation_and_overrides and it all works fine. However, I want to use the $primary-color variable (and a bunch of others) in one of my other scss files (application/global.css.scss). If i use #import "foudation_and_overrides" in my global css file, then it works, but it includes the entire Foundation CSS twice in my compiled application.css, which is obviously not ideal.
I also want to use mixins, such as #include radius() in my global file. This works if I use #import "foundation/components/global" - but then this also ends up with duplicate CSS being compiled. All I want to do is use the global vars & functions, not the CSS - surely this is a really common thing to do?
Previously (before foundation) I just put all my scss functions in a helpers file, and imported this in all other scss files that needed it.
Another quick Q while I'm here, what class do I use to add the little dropdown triangle thing next to some custom text?
Thanks!
With new foundation you do:
$include-html-global-classes: false;
#import "foundation/components/global";
Updated for even newer foundation (see commentS)
Earlier path was
#import "foundation/foundation-global";
As James said you can set the variable $include-html-classes to false and it won't copy any of the styles to the css. You can add the following lines to any scss sheet to get access to variables and mixins.
$include-html-classes: false;
#import "foundation";
There are a bunch of Sass variables named something like, include-grid-css or something like this in _settings.scss or _variables.scss. You can turn them off so it doesn't generate all of those standard presentational classes. If you are confused, just jump into the source of one these and you will see at the bottom of the file, there is an if statement that causes all of that css to be generated with the mixins at the top of the file. Hope this hepls.
Keep only settings in foundation_and_overrides.scss
Remove the following line at the end of the file foundation_and_overrides.scss:
#import "foundation";
And maybe rename foundation_and_overrides.scss to a more appropriate foundation_settings.scss.
Uncomment all settings that you will use in your SASS files. This also makes explicit which Foundation settings you will use in your application files.
Use #import in application.scss
In "application.scss" make sure to use #import instead of require for both Foundation and its settings.
/*
*= require_tree .
*= require_self
*/
#import "foundation_settings";
#import "foundation";
Use Foundation settings in your application files
You can simply add the following line in your files that need to access to Foundation variables:
#import "foundation_settings";
I haven't tested this with mixins yet, but for variables it works and prevents duplicated code.
I'm trying to deploy a Rails 3.1 app I was working on locally. But once deployed to Heroku (Cedar stack), I encounter an issue I wasn't having locally, and I can't find any solution to this.
Actually, in some of my SCSS files, I import other SCSS files located in the parent directory. Among the several syntaxes I tried :
#import "file.css.scss";
#import "file";
#import "/file.css.scss";
#import "/file";
#import "../file.css.scss";
#import "../file";
Most of these work locally, but none work on my heroku Cedar app. I also tried renaming my imported file into "_file.css.scss" with an underscore, as it seems it's the standard format for SCSS files made to be imported. But didn't change anything.
The error heroku logs are giving me is :
ActionView::Template::Error (File to import not found or unreadable: /mixins.css.scss.
I'm getting out of ideas right now, so would be thankful if you had any clues to solve this.
Thanks a lot,
Cheers !
The syntax should be
With the following folder structure
/app/
/assets/
/stylesheets/
/pages/
index.css.scss
products.css.scss
application.css.scss
If you wanted to include the scss files in /pages/ from application.css.scss you would do this:
#import "pages/index";
#import "pages/products";
You should also be able to do the following (however I'm not sure if this is limited to having Compass in the project or not).
#import "pages/*";
Being able to do glob imports is awesome. But I think it may be Compass only, or at least it used to be.
If the file your importing is within the same folder the following should work:
#import './file.css.scss';
I found it's important to have the relative path and file extension present when I ran into a similar issue. Since you were trying to use ../ that would look for the file your importing in the parent folder rather than within the same folder.
Your best bet is to use the built in Rails Asset Pipeline to handle including your style files.
In your app/assets/stylesheets folder you should have a file named application.css. This file uses Sprockets to automatically include all of your css files placed inside of the app/assets/stylesheets folder.
At the top of the file you'll see 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_tree .
*/
The *= require_self part includes any css style written in this actual application.css file, while the *= require_tree . part includes assets found in app/assets/stylesheets.
If you'd like to change the order of inclusion, or specify a specific stylesheet, for example a file named mixins.css.scss located in app/assets/stylesheets, here is how you'd do that:
/*
* 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_tree .
*= require_mixins
*/
And the magic of sprockets will include your file for you.
I found myself in front of a strange behavior of the assets:precompile task, or at least in front of something I don't fully understand.
So, I am using Rails 3.1.3, Sprockets 2.0.3, Less 2.0.11 for my web application, plus I rely on Bootstrap for the layout, so I am using also less-rails 2.1.8 and less-rails-bootstrap 2.0.8.
I have customized the style like they say here.
The configuration of my assets is:
stylesheets
|--application.css.scss
|--custom-style/
|--variables.less
|--mixins.less
|--buttons.less
|--custom-style.css.less
In application.css.scss I do
//=require custom-style
And in custom-style I do
#import "twitter/bootstrap/reset";
//#import "twitter/bootstrap/variables"; // Modify this for custom colors, font-sizes, etc
#import "custom-style/variables";
//#import "twitter/bootstrap/mixins";
#import "custom-style/mixins";
// And all the other standar twitter/bootstrap imports...
// Other custom-style files to import
#import "custom-style/buttons"
//...
// And other rules here
//...
Finally in buttons.less I use some variables and mixins defined in the variables.less and mixins.less Bootstrap files, #white and .buttonBackground to be more specifc.
If I launch bundle exec rake assets:precompile with the above configuration, the task fails and I get this error:
$ bundle exec rake assets:precompile
/usr/local/rvm/rubies/ruby-1.9.3-p0/bin/ruby /usr/local/rvm/gems/ruby-1.9.3-p0/bin/rake assets:precompile:all RAILS_ENV=production RAILS_GROUPS=assets
rake aborted!
.buttonBackground is undefined
But is that if I do this changes
buttons.less --> buttons.css.less
#import "buttons" --> #import "buttons.css.less"
Everything works fine!!
Is it something related to the scope of less variables and functions when working with nested imports? Or something that has to do with the order the less parser, or Sprockets, processes the import tree?
Am I missing something or doing something in the wrong way?
Thanks :)
Note: I get the error even with the original variables and mixins files, so it's not connected with the overrides done into them.
I can think of one of two possibilities right now:
1) You should change application.css.scss to application.css.less and use:
#import "custom-style";
instead of the sprockets //= require ...
2) The LESS compiler is very finicky about its semicolons. I noticed that you have
#import "custom-style/buttons" - it should be #import "custom-style/buttons";
Dunno if the issue is really that simple, but it's a start.
Have you tried renaming the file to buttons.css.less but keeping the extension off the #import (i.e., #import "buttons")?
That's how I do it with SCSS and it works fine.
Another thought is to replace the //=require custom-style in application.css.less with an #import "custom-style" directive. The Rails Guide here recommends using #import (which is processed with SCSS/LESS) are over //=require (which is processed with Sprockets):
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.
This doesn't really answer your question, but is the only reason you are mixing sass and less to use twitter bootstrap? If you prefer to use just sass, there are some bootstrap gems where the authors convert the less to scss, like bootstrap-sass. Before I wasted too much time trying to juggle both in a project, I'd completely buy into one or the other, but that's just my opinion.
I am using Rails 3.1RC4 with default SASS setup. I have the following files
application.css.scss
/*
* 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_tree .
*/
_variables.css.scss
$var1 : somevalue;
...
site_layout.css.scss
#import "variables";
... Some Sass Code
But I can't access the variables defined in _variables.css.scss in site_layout. What am I doing wrong? Rails is apparently finding the variables file since it doesn't throw a "file not found" error, which it does if I change the import filename. Still the vars are not carried over.
Any ideas?
Thanks!
The issue seems to be fixed with the latest release of rails & sprockets. In your gemfile:
gem 'rails', :git => "git://github.com/rails/rails.git", :branch => "3-1-stable"
The first part of your question (the application.css.scss code snippet) doesn't seem to have any relevance here, since it's just commented-out code, so I'll skip that part.
For the second code snippet, I don't believe SASS is set up to import a "partial" quite like you're doing here. You'd be better off doing something like this:
_variables.scss (Renamed from _variables.css.scss):
$var1: somevalue;
Note that the underscore in your filename is not required like it would be for a Ruby partial. You can just as easily name it variables.scss as long as you change the import statement to #import "variables";
site_layout.scss (Renamed from site_layout.css.scss)
#import "_variables";
.test_thingy {
color: $var1;
}
This will generate a site_layout.css file that contains the following code replacement:
.test_thingy {
color: somevalue; }
Note that there's no need to have files named like filename.css.scss like you would with HAML/ERB files. Simply name the file what you want it to be. For example, filename.scss will cause SASS to generate a CSS file called filename.css automatically.