I am embedding Ruby in a few Sass files—I have files named, for example, file.css.scss.erb. When I add the .erb extension to these files, I lose the Sass syntax highlighting. Does anyone know how to retain the Sass formatting?
Open your .sass.erb file, and go to :
View > Syntax > Open all with current extension as... > Sass
Related
I am trying to use the :markdown filter with haml-rails on Rails 5.0.2.
When I first tried to use Markdown in a HAML file, it said it needed pandoc-ruby as a dependency, so I added that to my Gemfile. However, now when I try to use :markdown inside my file, I am getting the following error:
You don’t need Pandoc here, that’s just the first markdown processor Tilt tries to use and reports if it can’t find any others. You do need some markdown processor though.
Your simplest fix would probably be to remove pandoc-ruby from your Gemfile and add a Ruby markdown processor (e.g. kramdown).
If you need more control over which processor Haml uses (e.g. if you want to use kramdown for Haml filters but have RedCarpet in your app for something else), try something like this in an initializer:
require 'tilt/kramdown'
module Haml::Filters
remove_filter("Markdown")
register_tilt_filter "Markdown", :template_class => Tilt::KramdownTemplate
end
If you do want to use Pandoc for rendering markdown then you need to make sure it’s installed, see Chris’ answer.
From its README:
PandocRuby is a wrapper for Pandoc, a Haskell library with command line tools for converting one markup format to another.
It requires Pandoc to be installed separately (emphasis added):
First, make sure to install Pandoc.
Next, add PandocRuby to your Gemfile
gem 'pandoc-ruby'
I have a multi-tenancy Rails app, where each tenant has an base_color attribute which contains a hex color code. I have a variables.css.scss file which contains Sass variables which are used in several other stylesheet files.
Now I want to use the tenant.base_color variable to set the Sass variable $base_color in variables.css.scss, so the base color of the app changes according to the logged in tenant. Is this at all possible?
I tried to rename the file to variables.css.scss.erb and then use this:
$base-color: <%= current_tenant.base_color %>;
But this doesn't work, I get an File to import not found or unreadable: variables.css.scss. error.
It's not possible. css.scss files are compiled to css once (when you run bundle exec rake assets:precompile), so you can't make them dependant on some dynamic values. I guess you'd have to use inline css instead.
I implemented twitter-bootstrap 3 in my application with bootstrap-sass (https://github.com/thomas-mcdonald/bootstrap-sass) but I was not able to use a theme from http://bootswatch.com/ with this method (because it doesn't provide the css files).
Then, I finally managed to install the theme from bootswatch by removing the gem, and using only the CSS files downloaded directly from twitter-bootstrap website. (I followed this tutorial : http://www.erikminkel.com/2013/09/01/twitter-bootstrap-3-in-a-rails-4-application/ ). It worked great so far, but I came across this article http://ruby.bvision.com/blog/please-stop-embedding-bootstrap-classes-in-your-html and decided to improve my code by using the bootstrap mixins.
I found this approach very interesting and I would like to use it in my project :
article {
.makeRow();
section.main {
.makeColumn(10);
}
aside {
.makeColumn(2);
}
}
Considering what I said about using a theme without a gem, how could I use LESS or SASS mixins ?
EDIT
Is there no other way than manually compile LESS code ? (as Bass Jobsen suggested) because it's really not convenient..
You will have to compile your less code. Use the less files of your Twitter's Bootstrap 3 download.
Add your less code shown above to bootstraps.less, use a less compiler (some examples http://lesscss.org/#usage or https://github.com/twitter/recess) to compile this to bootstrap.css and copy this file to your vendor/assets/ directory.
Also see: How can I create multiple rows using semantic markup in Bootstrap 3? and notice makeRow and makeColumn in your example code are not valid mixins of the current Bootstrap release.
update
Your question was SASS or LESS, so i answerd LESS. I expect you could do the same with SASS. From reading this: https://github.com/thomas-mcdonald/bootstrap-sass#sass it think you should import bootstrap-and-overrides.css.scss into app/assets/stylesheets/bootstrap-custom.scss
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
Sass or Scss (.sass) is common in Ruby on Rails projects, but I just found that it converts the color such as:
background: #ffe
into
background: #ffffee;
why the extra bytes? Also, why the extra ; at the end? Sass should automatically compile into a .css file, so the "extra semi-colon" at the end can be a good form if the users are editing the CSS file directly, but Sass is about automatic compiling, so why add a ; to increase page load time?
Second, why the universal accepted #ffe expanded as #ffffee? There isn't a modern browser that doesn't understand it... (maybe except the browser on a low-end cell phone, but those pages are very unreadable anyways.)
Output Sass using the compressed output mode and it will drop the last semicolon and use the more compact version of the color.
E.g.
echo "div { color: #ffe; }" | sass -t compressed --scss
Returns
div{color:#ffe}
Two-fold reasoning. Readability + Consistency. The size difference is negligible, and if you are worried about speed time is better spent optimizing the code / removing repetitive properties rather than worrying about the semicolon. This allows for consistent writing