I am afraid that this question is simply stupid, but... is there any option to use SASS variables in rails .erb files?
I defined a few colors in my variables.css.scss and I wish to use their values in my views or helpers in Rails. Maybe Rails can see some compiled sass resources or something?
Thank you for answers!
You can do it the other way around, ie using ruby code in your css/sccs code. It's a bit tricky, but it may help you :
First declare the color as a ruby constant :
# Put this into config/initializers/constants.rb for example
module Constants
FOO_COLOR = '#123456'
end
Next, rename the variables.css.scss into variables.css.scss.erb and use the constant created at the previous step
$fooColor: <%= Constants::FOO_COLOR %>
Finally use the color in your other scss files
#import "_variables";
#foo {
background-color: $fooColor;
}
And you can also use the Constants::FOO_COLOR in your Rails code too.
Be careful, you may be using precompiled assets in production. It will work with a constant as shown below, but it won't work if you want to change the value, or get it from a DB.
Related
i'm using devise for authenticate the users in my rails app, i've exported the views by using the comand
rails generate devise:views
i see that the files have a 'blank style' so how i can do for apply to them a mine custom file css?
Add gem in your Gemfile
gem "twitter-bootstrap-rails"
visit link for reference
https://github.com/seyhunak/twitter-bootstrap-rails
http://getbootstrap.com
You can find the generated devise view files in app/views/devise.
Just add needed html elements/css classes the same way you would to other view files.
Keep in mind that this will use your default(application.html.erb) layout.
Probably not the best way, but it works and it's not too messy:
devise uses the global application.scss styles by default.
So I just create a login.scss, signup.scss, etc. in my route assets/stylesheets directory and the add #import "login.scss" at the end of application.scss.
Just make sure these page are imported after whatever global styles you want to make sure they inherit.
Note:
As my application expands I usually end up abstracting everything into distinct stylesheets so my application.scss ends up being a list of imports anyway.
I'm sure there are better ways to do this, but this was the "I'm just a designer and need this to work without overcomplicating things" way,
Installation
Add this line to your application's Gemfile:
gem 'devise-bootstrap-views'
And then execute:
$ bundle
Add some minor css fix to your rails asset pipeline manifest
SASS
*= require devise_bootstrap_views
LESS
*= require devise_bootstrap_views_less
rails g devise:views:bootstrap_templates
If you want to go through in detail , you can refer this link : https://github.com/hisea/devise-bootstrap-views
I have a problems with javascripts assets in Ruby on Rails.
Descripttion:
I have two files in app/assets/javascript folder.
"constans.js" include a constant array "var FEATURES = new Array["A","B","C"]"
"route.js.erb" <%= FEATURES[1] %>
Now , I'm implementing my function in "route.js.erb" but I can't access the "FEATURES" array ?
I searched on Google but can't not find the solution.
So, anybody can help me? Thanks!
( my first question in stack overflow , sorry for my bad english)
use
window.FEATURES = new Array["A","B","C"]"
in constants.js
and make sure that the constants.js is being loaded.
There are several important factors:
Scoping of the variable
Calling the variable in ERB
Scope
First, you need to ensure your variable is scoped globally. To do this, you've declared the variable in constants.js, so you need to ensure this is called before the routes.js.erb file. You should also take #user3243476's advice & append it to the window object:
#js/constants.js
window.FEATURES = new Array["A","B","C"]
ERB
Secondly, you're calling routes.js.erb (which is fine), but inside you're calling <%= FEATURES["1"] %>. Problem. This is calling a Rails constant, not the JS one. This means even if your variable's scope is global, you're trying to call one which doesn't exist.
You'll need to do this:
#js/routes.js.erb
alert(FEATURES["1"]);
In my Rails 4 application I have a number of SASS variables like this one:
$primary_color: #ec4158;
Is it possible to access that variable from a Rails class somehow?
Thanks for any help.
I think you have to make it the other way around.
define constants in an initializer or somewhere else (like this)
generate your sass using erb (yourstyle.sass.erb)
use the same constants in your prawn generation
I'm using Rails 3.1 and SCSS in the Asset Pipeline. Is there anyway to access Rails helpers or controller data in the SCSS file? Something like...
#main {
background-color: #{current_user.preferences.background_color}
}
I know I can set my own $variables but I'm not sure how I would populate them from the controller's data.
As far as I know this is not what Asset Pipeline was designed for.
Think about it, you have a rake assets:precompile command to convert all your .scss.erb files to a static .css file.
So how could you ever possibly access variables like current_user from that .scss.erb file?
In my opinion, it's not possible to get controller variables in .scss.erb or .coffee.erb.
You can chain template processors with Rails 3.1, so you can do my.css.scss.erb, and then embed your variables like so:
$user-background-color: <%= current_user.preferences.background_color %>
Then you can use the Sass variables throughout your SCSS.
I took a different approach to solving this problem for Rails 3.0: Using SASS with user-specified colors
Someone know how can I use this option in Rails 3.1?
Now CoffeScript puts a function with .call(this) on each file, but I want to remove this.
EDIT:
"Can't find variable” error with Rails 3.1 and Coffeescript" and "Pattern for CoffeeScript modules" have what I want. I'll change my global vars to use #global scope.
I'd recommend against doing this. See my answer at Pattern for CoffeeScript modules for some of the reasons why. ("Making your CoffeeScript code incompatible with out-of-the-box Rails 3.1" is yet another reason.) Better to just use
window.a = b
or even
#a = b
instead of a = b when you're trying to export something to global scope.
In previous versions of Rails 3.1, bare compilation was enabled. This was classified as a bug, and fixed in RC1.
So while I strongly encourage you not to do this, here's how to turn bare compilation back on: Add
Tilt::CoffeeScriptTemplate.default_bare = true
to your environment.rb.
I do recommend taking advantage of CoffeeScript's closures and following a CommonJS module patter. But sometimes, just sometimes, it is OK to want to use the --bare option. In my case, when rendering a Jasmine spec helper so I could keep things at the top level and also take advantage of the include Sprockets directive in said Jasmine specs.
To that end, I created the "sprockets-blackcoffee" gem, which you can learn about here. https://github.com/metaskills/sprockets-blackcoffee