I have a project whose front-end is written in Sproutcore (1.6) and whose back-end is written in Ruby on Rails.
I've been using SCSS in the Sproutcore project and I now need to allow the client to change their colors on the fly. It doesn't have to be instantaneous, but they should be able to select their color, hit save and re-render the page with the new colors. The problem is, Sproutcore compiles the SCSS at build-time meaning I have no control over it once it's built and released.
As far as I've seen, only LESS can be compiled via Javascript at runtime. Does SCSS have this ability as well? If not, could I hack something together using my Ruby on Rails back-end?
There is a Javascript version of SCSS.
https://github.com/bmavity/scss-js
However some things like Parameterized Mixins and Functions are not implemented yet.
Related
I've got a simple rails gem (created using bundler) and I'd like to extend it by adding some CSS and javascript functionality. However, I'm unsure how to go about this and where to add the files. In particular, I need need more information on how it all fits together with the asset pipeline once it gets included in another project.
Can anyone give me the lowdown on how this works and either provide some simple examples or link to a tutorial? Literally 1 css and 1 js file is all I'm looking to include. Thanks.
You could write the gem as an engine. This allows you to have an app folder in the gem just as any Rails application would have. You can add models, views, controllers, assets etc.
Once you have it set up it's quite intuitive and it's a familiar way to create a gem if you're used to creating Rails apps.
This should get you started:
http://coding.smashingmagazine.com/2011/06/23/a-guide-to-starting-your-own-rails-engine-gem/
I'm working on an email newsletter using ActionMailer that's associated to our Rails 3.0.7 application. So against all my instincts, I'm using inline styles like mad since that seems to be the only way to do things in html email. I'd also like to keep the color scheme consistent with the website in a DRY fashion.
Is there any way to share SASS color variables between a Rails application and its SCSS files for use in inline styling?
The only way I'm aware you can do this is to add .erb onto your sass files so that they're processed by Rails, then you can use application level constants:
<%= APP_CONFIG[:yourkey] %>
Similar question / more reading
Coding emails is such a heinous task that I try to turn off all the higher thinking regions of my brain that worry about good programming principles every time I have to do it. Unless email is the central part of this project I'd resist letting the constraints there affect the rest of your application design.
Best solution I've found so far is the premailer gem: https://github.com/alexdunae/premailer/
Post-processing your HTML with premailer inlines all the CSS defined in a separate stylesheet, letting you specify whatever you want in a SASS or CSS file.
Twitter Bootstrap is a cool stylesheet toolkit by Twitter based on LESS. I don't use LESS however I am using the twitter-bootstrap-rails gem and it seems to be all working fine. However I am unable to figure out how to change the colors in the CSS, particularly the link color.
My further research seems to point that the gem only provides a pre-rendered CSS file with fixed colors declarations and not variables that could be changed in one place. I would love to be able to just change the colors by changing a variable like $linkColor = #00ff00
Does anyone have any idea as to how to do the color changes efficiently throughout the UI without using LESS?
I want to avoid using LESS since Rails 3.1 already uses SASS, but if anyone here thinks its not a big deal using both, I'm open to suggestions however.
Any help or suggestion will be much appreciated
I wrote a reasonably popular conversion of Bootstrap to SASS 1, 2, which allows you to define your own variables if you use a custom helper manifest, rather than the one included in the gem.
As an example, in the head of application.css.scss:
#import "bootstrap/reset";
#import "bootstrap/variables";
// overwrite variables here
#import "bootstrap/mixins";
#import "bootstrap/scaffolding";
#import "bootstrap/type";
#import "bootstrap/forms";
#import "bootstrap/tables";
#import "bootstrap/patterns";
// rest of your manifest
You can overwrite the supported variables before importing the rest of the bootstrap files, and these will also be accessible through the rest of your SCSS.
I found a good compromise: I keep the .less source under a folder, and I have a guard command to compile this to css directly to vendor/assets.
This allows me to use the less mixins inside an additional .less where it makes sense (ie: to add a new color), and keep the rest of the app in scss.
I did that because I really wanted to rely directly on the twitter boostrap source, not on a scss adaptation which may lag behind later on at some point.
Contact me if you need more details, I plan a blog post on that.
I found two separate SCSS versions of the bootstrap files. Both (in the preboot.scss file) allow you to just change a variable for things like linkColor.
bootstrap.scss
twitter-bootstrap-scss
Now, how to integrate those into your own app, I'm not sure. But it appears it can be done with SCSS if you want to avoid LESS.
I need to take a database text field and parse it for
duplication and garbage
malice
whitelisted selectors
compress and output as a css file
Since there might be a rails way I'm unaware or something ready made I'm asking before I waste time trying to reinvent a wheel. My searching revealed nothing, mostly in rails seems aimed at view level, and css seems to be an unattended niche in this area (plenty of html though).
I'm aware of the sanitize gem (doesn't do css immediately, yet another thing I'd need to map out and code) and the built in rails stuff (not a lot of tutorial, aimed mostly at the view level). I need a gem, lib, module or something similar that I can work with in a controller or queue.
EDIT:
Without getting too deep into the specifics of the project: administrative users can add css for their portions of the site. As part of the flow I'm going to save the raw css and then process and save the processed css. The db stuff is archival mostly, the css file is output immediately. Because there is few places to add modified css and only admins have access to the css, it sort of works but I'm looking to make it more robust in the future where admins who may not be as conversant with the security needs or not as css aware can operate.
The most basic example is that it just a text field on an admin page. The admin cuts and pastes css there, submits, and the application turns it into a css file that gets included with the designated pages, which works because the current admins know the application, the css of the application, and what they can and cannot change. The goal is to make this more robust for future admins who might not be as savvy.
To simply sanitize CSS, you can use the SanitizeHelper built into Rails: http://api.rubyonrails.org/classes/ActionView/Helpers/SanitizeHelper.html#method-i-sanitize_css
Have you looked at Sass? It has all of the parsing logic built in, for a superset of CSS. You could add a feature (Sass support) and save yourself the need to parse/validate the CSS all in one go.
You can generate output CSS from Sass (or just plain CSS, since Sass [with the SCSS syntax] is a fully-backward-compatible superset of CSS) like this:
output_css = Sass::Engine.new(sass_content, :syntax => :scss).render
There are a bunch of options that you'll probably want to look into at http://sass-lang.com/
Another option is Less. The new Twitter Bootstrap framework uses Less, and Rails 3.1 uses Sass. The biggest difference is that the official Less parser/compiler is built in JavaScript, so you could actually validate and compile in the user's browser while they work and show them any errors before they save. Of course then you need to run a JavaScript engine (e.g. V8) in your Rails application if you want to use Less to validate the incoming CSS still.
I'm currently experimenting with symfony, SASS, and Compass.
I use sfSassyCssPlugin to automatically compile my .scss files.
If I want to use Compass with this plugin, do I need to modify it to use another compiler (Compass instead of SASS)?
What's the best way to use Compass with symfony projects?
I've never used the sfSassyCSSPlugin, but, after looking it up, Compass seems like a much simpler use case to me; I'd probably use it in lieu of the plugin. That said, I've never been a fan of Symfony so my judgment may be clouded. Compass doesn't worry about your app's runtime. You edit, you compile, you run. No Symfony config files to mess with, no operational changes between different environments, etc.
Compass will also "watch" for changes and just compile each time one of your .scss or, my preference, .sass files changes. You don't have to give it a second thought.
sfSassyCSSPlugin looks like an extra layer of complexity wrapped around Compass. That plug-in is for symfony 1.x, with which you're better off using Compass directly.
Navigate to the project directory and issue the following command to set things up:
compass create web --css-dir=css
And then run next command, which will watch the project and compile the CSS whenever there's a change to the Sass:
compass watch web
But if you've moved up to Symfony2 and have CSS spread out across multiple bundles, then this: https://stackoverflow.com/a/11324725/1090474 answer, using Assetic, is a better solution.