Given the new module system in SASS (https://sass-lang.com/blog/the-module-system-is-launched) and their plans on phasing out #import, I'm changing my #imports to #uses. I've been successful in most cases, but I've run into one hiccup: I currently use #import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap') to import the Montserrat typeface into my code, and I don't know how to accomplish this with #use. I've tried the following:
#use url('https://fonts.googleapis.com/css?family=Montserrat&display=swap')
#use "url('https://fonts.googleapis.com/css?family=Montserrat&display=swap')"
#use 'https://fonts.googleapis.com/css?family=Montserrat&display=swap'
All of those give me a SASS compilation error. How do I use #use in this case?
The replacement of #import for #use/#forward is specifically so that the Sass version of the import function no longer shares custody with the vanilla CSS version of it.
In this instance, you're trying to use the vanilla functionality, so #import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap') is the correct syntax to use.
Related
I'm new to LESS and Bootstrap and I'm confused at the outcome of my css file.
My basic goal is to use the mixins and variables in bootstrap in my own css files.
From my understanding the process would be, get the less files, import them into the project, and import the bootstrap reference. So at this point I can now use the mixins in my own css file.
Example:
#import "less/bootstrap.less";
.myRow{
.make-row();
}
However now I have a 7400+ lines of styling in myCustomStyles.css. Is this "correct"? I don't understand why it actually imports all the styles. My understanding is... that I have a reference to bootstrap.min.css CDN or local. Then myCustomStyles.css will be included AFTER that and override the default values.
I guess I'm confused at how do I take advantage of a CDN and still use the mixins and variables in bootstrap?
I've used the following two articles as a reference:
http://www.helloerik.com/bootstrap-3-less-workflow-tutorial
http://www.codeproject.com/Articles/594098/How-to-customize-Twitter-Bootstrap-to-fit-your-web
Bootstrap.less is the full bootstrap implementation. It is going to have all the variables and mixins to build the entire CSS for bootstrap. If you don't want this, then you should probably pick and choose which LESS files to include instead. You probably want variables and mixins, so you could maybe get by with only importing variables.less and mixins.less?
If you look at bootstrap.less it looks like this:
// Core variables and mixins
#import "variables.less";
#import "mixins.less";
// Reset
#import "normalize.less";
#import "print.less";
// Core CSS
#import "scaffolding.less";
#import "type.less";
#import "code.less";
#import "grid.less";
#import "tables.less";
#import "forms.less";
#import "buttons.less";
// snip...
It is nothing but a bunch of imports to other .less files. Each file is sort of specific to what it is doing. At a minimum I think you would need variables and possibly mixins. Normalize does a CSS reset. Grid defines the grid classes, etc.
Possible Since LESS 1.5
You can specify that you want the code only as a reference like so:
#import (reference) "less/bootstrap.less";
.myRow{
.make-row();
}
The addition of the (reference) tells LESS to import it by not compile the code to CSS. This allows you to use the entirety of bootstrap for mixin reference purposes, but avoids adding all the code in. Of course, one needs to know how this may affect the implementation, as there are parts of bootstrap that expect certain code to be in place to work properly. But that this a whole other thing.
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 really don't know how to debug this, maybe somebody has an idea.
I have many LESS files which I import in application.css.less. We use Bootstrap, and we want to use the variables that are defined in it within our own styles, so we can't require the LESS files in the manifest (as required files don't seem to make their variables public to other required files).
Everything works nicely, except a few of the LESS files - when edited - don't trigger a recompile of the CSS! It seems to be quite random which do and which don't, and it's only 6 of them which don't (compared to about 25 in sum). When I require one of them in the manifest, it successfully leads to a recompile - if I #import it, it doesn't.
Any idea on how to debug this? If I rename one of them (e.g. from time_records.less to time_records2.less), it successfully trigger recompile after changes... So it has do do something with the names of these 6 specific files:
calendars.less
contacts.less
folders.less
handout.css.less
print.css.less
time_records.css.less
Any help is greatly appreciated. Thank you.
The latest edition of less-rails implements Import Hooks that should solve your problem. I realize this is a late answer and it may have not existed at the time.
Import Hooks
Any #import to a .less file will automatically declare that file as a sprockets dependency to the file importing it. This means that you can edit imported framework files and see changes reflected in the parent during development. So this:
#import "frameworks/bootstrap/mixins";
#leftnav { .border-radius(5px); }
Will end up acting as if you had done this below:
/*
*= depend_on "frameworks/bootstrap/mixins.less"
*/
#import "frameworks/bootstrap/mixins";
#leftnav { .border-radius(5px); }
The depend_on Directive
depend_on path declares a dependency on the given path without including it in the bundle. This is useful when you need to expire an asset's cache in response to a change in another file.
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.
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.