Undefined mixin with Bourbon and Neat gems - ruby-on-rails

I am using bourbon and neat gems for create the design of a rails application. My application.css.scss contains this:
#import "bourbon";
#import "neat";
#import "main";
But if I run 'rake assets:precompile' then happens this error:
rake aborted!
Undefined mixin 'outer-container'.
(in /Users/anonymous/example/app/assets/stylesheets/admin/main.css.scss)
/Users/anonymous/example/app/assets/stylesheets/admin/main.css.scss:5:in `outer-container'
/Users/anonymous/example/app/assets/stylesheets/admin/main.css.scss:5
The file main.css.scss contains this:
footer#page_footer {
#include outer-container;
nav{
#include span-columns(6);
#include shift(3);
section#about_me_footer, section#contact_footer, section#miscellaneous_footer {
#include span-columns(2 of 6);
}
}
p {
#include span-columns(6);
#include shift(3);
}
}
Someone can give me some suggestions?

I was having the same problem. I was able to get it working in two different ways.
The first way is probably less desirable but you can add your code right in the application.css.scss file:
div.container {
#include outer-container;
}
Alternatively, you can add:
#import "bourbon";
#import "neat";
To the top of your main.css.scss file.
This allows you to keep your styles organized.
The bourbon site links to a page in their wiki regarding this problem, but the solution mentioned didn't work for me:
https://github.com/thoughtbot/bourbon/wiki/Rails-Help-%5C-Undefined-mixin

I had this same problem. The solution for me was to rename a partial file from layout.css.scss to _layout.css.scss. Any files making use of SASS mixins need to be included after those mixins are loaded in. In this case it was trying to precompile the layout.css file alone, though it did not require the source of the mixins it was referencing. Adding the underscore makes the precompiler ignore that file until another file requires it.

According to the Change Log the outer-container mixin has been removed as of version 2.0.0. The highest version you can use with outer-container is 1.8.0. When adding Neat via Bundler, you will get 2.0 or higher unless you specify a version in your Gemfile.
The new way to do this looks much simpler, but that's little comfort if you have a bunch of unsupported scss.

FWIW this is the issue reported https://github.com/thoughtbot/bourbon/issues/120, Using jacklin's comment about adding the import statements directly to my main css file resolved it. However, I'd like to have this problem fixed since I dont really want to keep adding those import statements to each file I wish to use the mixins for

I have had the same problem.
I had a div using #include outer-container, and a second div containing #include span-columns(8). The second div incorrectly sat outside the first, producing the misleading error "Undefined mixin 'outer-container'". Moving the second div inside the first (within the outer-container - in the CSS and HTML) corrected the problem.
For the problem above, you must do the same thing by making sure the p tag is a child of the footer.

Related

Include Foundation Variables in Multiple SCSS Files

I am trying to use Foundation 5 in a Rails 4 app. The problem I am having is I would like to have some custom CSS in addition to Foundation. In my CSS I would like to use some of the variables from Foundation. To use them I did added the following to the top of my scss file
$include-html-classes: false;
#import "foundation/components/global";
This works great except there is some junk still included on each page. According to https://github.com/zurb/foundation/issues/1629 this shouldn't happen.
If you look at the source here https://github.com/zurb/foundation/blob/master/scss/foundation/components/_global.scss then you can see that the meta stuff starting at line 284 will be included.
This is a problem since it will be included on every page that I want to use the variables/mixins on. Rails 4 combines all the css files into one which will have this same code over and over again...
Is there any way to include this file without it including any text?
I just discovered that using
#import "foundation/functions";
#include exports("global") {}
#import "foundation/components/global";
will include all the variables and mixins but won't add anything to your scss file!
I believe this is because the exports function is there to prevent css from being duplicated every time the global file is included. By having the fake exports function call it thinks it's already added the css.

SCSS import relative to an imported stylesheet?

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/"
]

Using variables and mixins in 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.

Rails assets:precompile strange behavior

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.

In Rails 3.1, is it really impossible to avoid including duplicate copies of stylesheets?

I'm running into an upsetting issue when trying to share variables and mixins across Sass stylesheets.
If I use #import to include a global stylesheet – one which includes global colors, mixins, etc. – it gets included again when Rails combines all stylesheets referenced in the manifest file.
Alternatively, if my manifest file does not include the global stylesheet, but multiple files in the manifest import it, the global stylesheet will still be included more than once. GAH.
How can you get around this? Does Sass have secret inclusion guards? Am I doing something terribly wrong?
I do not understand why this is an issue for your specific question. Variables and mixin declarations should not lead to any selectors or declaration blocks in your generated css file. However, when you use mixins for multiple selectors, the corresponding declarations are included for every such selector. This is how SASS handles it.
So as long as it's only variables and mixins, it should not matter if they are included multiple times in the manifest file since this does not have an effect on the compiled file. On a site-node, I believe it to be good style that SASS forces you to explicitly declare each file's dependencies.
If, however, you also have selectors and declarations in the base file that you want to inherit from in separate files, then indeed these will be included multiple times even in the compiled file. It would still be interesting to know how to prevent this by configuration. However, if you treat each of your sass files to be one encapsulated set of rules without cross-file inheritance, then you should be able to prevent your issue by convention.
For example, when using bootstrap-sass, just the mixins and variable definitions can be brought in scope with;
#import "bootstrap/variables";
#import "bootstrap/mixins";
You can get around this by doing this:
/*
* application.css.scss
*= require_self
* ----> Note the missing = require_tree
*/
#import "global.css.scss"; // Defines global mixins etc
#import "users.css.scss"; // Uses mixins defined in _global.css.scss
Then don't import global.css.scssinside users.css.scss or any other dependent files.
If you haven't already, check out Ryan Bates screencast on SASS and sprockets in rails 3.1, this is what he does to solve this issue.
For now, until SASS 4 is released, I prefer modifiying the import lines to something like:
#if not-imported("font") { #import "font"; }
You will need a function named not-imported then, of course, looking like this:
$imported-once-files: () !default;
#function not-imported($name) {
$module_index: index($imported-once-files, $name);
#if (($module_index == null) or ($module_index == false)) {
$imported-once-files: append($imported-once-files, $name);
#return true;
}
#return false;
}
This works fine and maintains the interoperability with other tools (like StyleDocco). I wrote about it, here
It is currently not possible to use SASS to include files dynamically. #import cannot be used within control directives (e.g. #if) or mixins, using a variable in an import directive is erroneous syntax, and there is no directive for ending file execution early (which effectively would allow conditional imports). However, you can solve your issue by changing how you structure your style rules.
NOTE
There is a SASS plugin that will modify #import to only
include files once. However,
Your code will have added dependence on the environment
We would all do better to understand how style rules are intended to be structured, which would avoid any duplicate rules.
#import may soon be deprecated. The SASS team is planning "large-scale redesign of importing", so re-import protection
might be part of future versions of SASS, as it is popular
requested feature.
Solution
If you have styles that are conditionally included from multiple files, they are not 'global' styles. These styles should be encapsulated in mixins, in 'module' or 'library' files. The main idea is that importing one such file will not output any css. This way, you can import these files redundantly so you can use the mixins wherever you need them.
If you need to do this with variables, then:
Make sure you define variables before including mixins, otherwise they are only available in the mixin scope. A good way to do this is to define all default variables in a vars.sass file, and import it along with imported modules/libraries so the variables are available globally.
Define variables using !default in the mixin, so it can be overridden even before the mixin is called (like in a vars.sass file).
If you have top-level styles that you want to ensure are defined without having rigid inclusion rules, you can use this mixin:
$was-defined: () !default;
#mixin define-once($name) {
#if not index($was-defined, $name) {
$was-defined: append($was-defined, $name);
#content;
}
}
// Example:
#include define-once('body-typography') {
body {
font-size: 100%;
line-height: 2em;
color: #444;
font-family: monospace;
}
}
For more good practices on structuring your code like this, check out this article.

Resources