I am using
#include keyframes(small) {
0% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.small {
#include animation(small 1s infinite);
}
And rails gives me the following error:
Sass::SyntaxError at /
Undefined mixin 'keyframes'. (or 'animation')
I am using latest SASS and compass --pre (alpha) which is supposed to support animations.
Try using the following combination of gems in your GemFile:
gem "sass", "~> 3.2.19"
gem 'sass-rails', '~> 4.0.4'
gem "compass", "~> 0.12.7"
gem 'compass-rails', '~> 2.0.0'
And then make sure you have the following lines at the top of your scss file:
#import "compass";
#import "compass/css3";
The following gemfile updates should do it...
# compass 1.0 needed to use keyframe mixin
# but compass 1.0 needs Sass 3.3 (further below)
gem "compass", "~> 1.0"
gem 'compass-rails'
# use sass-rails ~>5.0 to get Sass ~>3.3
# needed for compass ~>1.0
# which is needed for keyframes mixin
gem 'sass-rails', "~>5.0"
Related
Just upgraded to bootstrap 4.
In the old version I was using #import bootstrap on my app/assets/stylesheets/custom.scss file and thus customizations worked fine.
Now, following the getbootstrap.com Get Started guide, I have included #import bootstrap in my application.scss and customizations have stopped working.
Here's my gemfile;
gem 'rails', '5.1.4'
gem 'bcrypt', '~> 3.1.7'
gem 'faker', '1.7.3'
gem 'will_paginate', '3.1.6'
gem 'bootstrap-will_paginate', '1.0.0'
gem 'puma', '3.9.1'
gem 'uglifier', '3.2.0'
gem 'coffee-rails', '4.2.2'
gem 'jquery-rails', '4.3.1'
gem 'turbolinks', '5.0.1'
gem 'jbuilder', '2.7.0'
gem 'coffee-script-source', '1.8.0'
gem 'letsencrypt_plugin', '~> 0.0.10'
gem 'etsy', '~> 0.3.2'
gem 'bootstrap', '~> 4.0'
gem 'sprockets-rails', '~> 3.2', '>= 3.2.1'
gem 'popper_js', '~> 1.12', '>= 1.12.9'
My application.scss file:
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*/
#import "bootstrap"
Here's what I'm trying to get to work in custom.scss:
body {
padding-top: 60px;
background-color: $light-gray!important;
}
Thanks in advance :)
Аfter #import, a semicolon is missing. Make sure that the variable $light-gray is also defined. I think #import with bootstrap 4 version works pretty the same as for bootstrap 3.
I'm trying to install the Sass Rails Source Maps on my ruby project but it's failing.
Im getting the next error when writing bundle update sass:
Bundler could not find compatible versions for gem "sass":
In Gemfile:
sass-rails (~> 4.0.3) ruby depends on
sass (~> 3.2.0) ruby
In my Gemfile I have the next related gems:
gem 'sass-rails', '~> 4.0.3'
gem 'sass', '~> 3.3.7'
group :development do
gem 'sass-rails-source-maps'
end
What am I missing?
Looks like it doesn't fit, even master branch uses 'sass', '~> 3.2'.
As a solution you can fork sass-rails and update sass-rails.gemspec with s.add_dependency 'sass', '>= 3.2' instead of '~> 3.2' and use it in your Gemfile:
gem 'sass-rails', github: 'your_nick/sass-rails' # your_nick - your username on Github
I couldn't work, but you can try.
I downloaded the SpaceLab theme from sass-bootswatch.theblacksmithhq.com and in part of the file it has
// FORMS
// -----------------------------------------------------
.control-group.warning {
#include formFieldState(#E29235, #E29235, $warningBackground);
}
.control-group.error {
#include formFieldState(#C00, #C00, $errorBackground);
}
.control-group.success {
#include formFieldState(#2BA949, #2BA949, $successBackground);
}
// DROPDOWNS
// -----------------------------------------------------
When I run rake assets:precompile or just put up a rails server I get this error Undefined mixin 'formFieldState'.
This began after I added active admin. My application.css file looks like this by the way.
*= require_self
*= require variables
*= require base
*= require devise
*= require nav
*/
I can remove the section from the variables file and it will run but my styles look really bad almost like bootstrap is not running.
My Gemfile looks like this:
gem 'rails', '3.2.13'
gem 'devise'
gem 'omniauth-google-oauth2'
gem 'decent_exposure'
gem 'turbolinks'
gem 'simple_form'
gem 'activeadmin'
gem "meta_search", '>= 1.1.0.pre'
gem 'jquery-rails'
#TODO needed for the server
gem 'mysql'
group :production do
# needed for heroku
#gem 'pg'
end
# Gems used only for assets and not required
# in production environments by default.
group :assets do
gem 'coffee-rails', '~> 3.2.1'
gem 'uglifier', '>= 1.0.3'
gem 'sass-rails'
gem 'bootstrap-sass'
#TODO needed for the server
#gem 'execjs'
#gem 'therubyracer'
end
group :development, :test do
gem 'certified'
gem 'better_errors'
gem 'factory_girl_rails'
gem 'pry-rails'
gem 'pry-stack_explorer'
gem 'pry-debugger'
gem 'awesome_print'
gem 'quiet_assets'
gem 'rspec-rails'
gem 'heroku'
end
group :test do
gem 'sqlite3'
end
If there is anything else that would help you understand please let me know.
I have two explanations - I think both of them apply to you:
You have not specified a version for the 'bootstrap-sass' gem in your Gemfile. Your SpaceLab theme seems to be based on Bootstrap 2 while the current version of the 'bootstrap-sass' gem is 3.0.2.1, which ships Bootstrap 3.0.2, which is not compatible with SpaceLab (and the mixin doesn't exist anymore). Maybe you "accidentally" upgraded bootstrap-sass when installing Active Admin.
Another problem is accessing SASS variables and mixins when using the Asset Pipeline (Sprockets), as described here. If you use //=require for importing stylesheets (e.g. for importing Bootstrap and your theme from separate files in your application.css) you cannot access SASS variables and mixins between files because Sprockets compiles each file separately. The only option you have is to import Bootstrap and your theme via the Sass #import one after another in one SASS file to make sure they're able to access each others' variables and mixins, like (just exemplarily):
#import "spacelab-variables";
#import "bootstrap";
#import "spacelab-theme";
This question already has answers here:
Does compass-rails support Ruby on Rails 4.0?
(6 answers)
Closed 9 years ago.
I read that compass for rails 4 is not ready, but its work with "2.0 alpha"... I don't understand.
Has anyone solved this problem it?
my Gemfile
gem 'sass-rails'
gem "compass-rails" #or gem "compass-rails", "~> 2.0.alpha.0"
my application.css.scss //no error, rails recognize the directory
#import "compass";
my error for my first mixin test
Sass::SyntaxError at /partners/dashboard
Undefined mixin 'border-radius'.
Not ready for Rails 4.0:
http://ready4rails4.net/gems/compass-rails
And the contributors were clear on that 9 months before Rails 4 dropped:
https://github.com/Compass/compass-rails/pull/59
I have updated from Rails 3.2 to Rails 4.0 including the gem compass-rails. I have pasted in my gem file below.
I updated as many gems as possible but a couple could not get very latest versions.
The command "bundle outdated" gives you an idea about outdated gem
Pierre
source 'https://rubygems.org'
ruby '2.0.0'
gem 'rails_12factor', group: :production
gem 'rails', '4.0.0'
gem 'pg'
gem 'thin'
# do I need this gem for form backing objects
gem 'virtus'
gem 'jbuilder', '~> 1.2'
gem 'sass-rails', '~> 4.0.0'
gem 'coffee-rails', '~> 4.0.0'
gem "compass-rails", '~> 2.0.alpha.0'
gem 'uglifier', '~> 2.2.1' # java script compression
gem 'rspec-rails'
gem 'debugger'
gem 'better_errors' # railscast 402
gem 'binding_of_caller'
# Use jquery as the JavaScript library
gem 'jquery-rails'
gem 'bcrypt-ruby', '~> 3.0.0'
# tried this update but got errors so backed out
# gem 'bcrypt-ruby' '~>3.1.2'
# paging, searching
gem 'will_paginate', '~> 3.0'
gem 'ransack'
gem "redcarpet", '~> 3.0.0'
gem 'cancan'
gem 'simple_form'
# For drill evaluation- railscast 326
gem 'active_attr'
# For db population
gem 'seed_dump'
# longitude and latitude
gem 'geo_position'
It's not good to use #import in a .css file. You need to rename it to application.css.scss. But I prefer to import compass directly in the files where I need it. And Also I prefer to import only the parts I really need like compass/css3 so that I don't include anything I don't really use.
If that does not help with your problem, you might need to paste in the /partners/dashboard styles to see what's in there.
I am using Font Awesome in a rails 3.2.13 app. I have successfull added the following icons to the app: icon-search icon-shopping-cart and others. But for some reason when I try to use icon-thumbs-up and icon-thumbs-down they look like icon-thumbs-up-alt or icon-thumbs-up-alt. If I try and use icon-thumbs-up-alt, no icon shows on the page.
I access both bootstrap and font awesome via gems:
group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
gem 'therubyracer'
gem 'font-awesome-rails'
gem 'jquery-ui-rails'
gem 'less-rails'
gem 'twitter-bootstrap-rails'
gem 'uglifier', '>= 1.0.3'
end
Here is the application.css.scss file:
*= require bootstrap_and_overrides
*= require_self
*= require_tree .
#import "font-awesome";
.icon-thumbs-up {
color: green;
}
.icon-thumbs-down {
color: red;
}
Here is the bootstrap_and_overrides.css.less
#import "twitter/bootstrap/bootstrap";
body { padding-top: 50px; }
#import "twitter/bootstrap/responsive";
// Set the correct sprite paths
#iconSpritePath: asset-path("twitter/bootstrap/glyphicons-halflings");
#iconWhiteSpritePath: asset-path("twitter/bootstrap/glyphicons-halflings-white");
// Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines)
// Note: If you use asset_path() here, your compiled boostrap_and_overrides.css will not
// have the proper paths. So for now we use the absolute path.
#fontAwesomeEotPath: asset-path("fontawesome-webfont.eot");
#fontAwesomeWoffPath: asset-path("fontawesome-webfont.woff");
#fontAwesomeTtfPath: asset-path("fontawesome-webfont.ttf");
#fontAwesomeSvgPath: asset-path("fontawesome-webfont.svg");
// Font Awesome
#import "fontawesome";
Here is the button using the icons:
<%= link_to (content_tag(:i, "", :class=>"icon-thumbs-up")) + (content_tag(:i, "", :class=>"icon-thumbs-down")) + " Review", root_path , :class => "btn" %>
Could the issue be a conflict because I added both the twitter-bootstrap-rails and font-awesome-rails gems?
Thanks
Steve
It seems like the twitter-bootstrap-rails gem isn't importing the most recent version of font awesome, version 3.2.1 so I had to keep the font-awesome-rails gem. But I did update the gem to the most recent version, 3.2.1.1
The gemfile now looks like:
group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
gem 'therubyracer'
gem 'jquery-ui-rails'
gem 'less-rails'
gem "twitter-bootstrap-rails"
gem "font-awesome-rails"
gem 'uglifier', '>= 1.0.3'
end
The application.css.scss:
*= require bootstrap_and_overrides
*= require_self
*= require_tree .
*/
#import "font-awesome";
To avoid the chance of conflict between the twitter-bootstrap-rails and font-awesome gems I disabled the defaults that come with twitter-bootstrap-rails:
// Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines)
// Note: If you use asset_path() here, your compiled boostrap_and_overrides.css will not
// have the proper paths. So for now we use the absolute path.
//#fontAwesomeEotPath: asset-path("fontawesome-webfont.eot");
//#fontAwesomeWoffPath: asset-path("fontawesome-webfont.woff");
//#fontAwesomeTtfPath: asset-path("fontawesome-webfont.ttf");
//#fontAwesomeSvgPath: asset-path("fontawesome-webfont.svg");
// Font Awesome
//#import "fontawesome";
I think you problem is because you're mixin gems!
The gem "twitter-bootstrap-rails" already include font-awesome you dont need to include any extra gem's for getting the icons. First of all you need to remove the gem "font-awesome-rails",
Your files should look like this:
Gemfile
group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
gem 'therubyracer'
gem 'jquery-ui-rails'
gem 'less-rails'
gem 'twitter-bootstrap-rails'
gem 'uglifier', '>= 1.0.3'
end
application.css.scss
*= require bootstrap_and_overrides
*= require_self
*= require_tree .
.color-green {
color: green;
}
.color-red {
color: red;
}
bootstrap_and_overrides.css.less
#import "twitter/bootstrap/bootstrap";
body { padding-top: 50px; }
#import "twitter/bootstrap/responsive";
// Set the correct sprite paths
#iconSpritePath: asset-path("twitter/bootstrap/glyphicons-halflings");
#iconWhiteSpritePath: asset-path("twitter/bootstrap/glyphicons-halflings-white");
// Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines)
// Note: If you use asset_path() here, your compiled boostrap_and_overrides.css will not
// have the proper paths. So for now we use the absolute path.
#fontAwesomeEotPath: asset-path("fontawesome-webfont.eot");
#fontAwesomeWoffPath: asset-path("fontawesome-webfont.woff");
#fontAwesomeTtfPath: asset-path("fontawesome-webfont.ttf");
#fontAwesomeSvgPath: asset-path("fontawesome-webfont.svg");
// Font Awesome
#import "fontawesome";
Your.html
<i class='icon-thumbs-up color-green'></i>
Note: Your should check what version of "twitter-bootstrap-rails" do you have, because the thumb up icon its on the last update of the gem (It was 4 days ago when they add support for font-awesome 3.2.1). Make sure to update your gem. Hope it helps!