I have a problem using compass-style remotley over ssh and my favorite text-editor textmate.
IS there somehow to put a delay on the actual compiling of the sass-files? I think the problem is that compass recognizes that the files are changed and instantly tries to create the css, but this is happening while my text-editor still is saving, which results in broken files.
So the question is, is it possible to delay the creation of the files or solve this in another way?
I have found a solution to the problem!
In the configuration of textmate it was possible to tick a box saying "use atomic save" which means that the program creates a temproary files, saves to the the temporary files, removes the old file and replaces it with the new one. This way compass can work just as excpected!
Related
I'm new to broccoli, but I have experience with Ruby on Rails' asset pipeline. I'm currently working on an Ember CLI app.
In broccoli, in development mode, I would love it if the compiler would write out the name of the file where the CSS came from as a comment preceding the code itself.
I know I can do this manually by adding comments myself to each file, but I'm hoping there is a configuration directive that I can put in my Brocfile.js.
Short of adding in comments to each file manually, is there an easy way to increase the verbosity of the compiled output in dev mode to include this?
Inspecting an element reveals the name of the file it came from
Clicking on the file name shows you the file and the line in the original scss/css file.
I am getting really confused about configuring Sass config options. Basically I want to disable the line comments in the compiled css file. So I went in and created a sass.rb in the Initializers folder with the following line:
Rails.application.config.sass.line_comments = true
I then restart my apache server and check in Safari web developer, my css file still contains the comments like /* line## /path/to/css/file */ above every css statement. I then test it in Firefox and open Firebug, and I don't see those line comments there, which suggest inconsistent browser behavior.
So I go back to my initializer sass.rb file and turn on line_comments, restart the web server and try again, this time I get the exact same result as before, nothing's changed, that basically tells me either that's specific to the browsers, there's a problem with the setting scope/syntax, or there's a caching issue (I'm working in development, so there shouldn't be any caching, right?). I'd really appreciate if someone can provide some insight on this. Thanks.
EDIT: The proposed solution to make a change to the sass file(s) didn't solve anything so I doubt it is the same problem.
Note: I am using sass with rails and I am getting separate css files for each of my sass files, which doesn't seem very right...
The problem was a combination of needing to set config.assets.debug to false for development, setting config.assets.compress to true, and probably a better understanding of sass compilation.
I have half a dozen CSS files inside the folder "client/CSS". In the local server it works fine but after deployment the website only seem to load the bootstrap.min.css file. Has anyone come across this? Thanks!
Meteor tries to compile all the css files it finds into one file. If you have css missing, meteor is probably failing on one of your files and giving up. When this has happened to me the issues were around unmatched brackets.
Try putting your css text into CSSLint or something like it, one at a time, and see if they have errors.
Some other discussion here that says #media and #imports lines might also be cause some issues depending on their use.
By default SASS looks at the filename and determines whether to make a css file out of it. I'm wondering if there is a way to prevent this from happening.
We're building a large website and lots of front-end developers are editing the css, but we only have one dev server. Sure some things you can see happen locally, but often you can only see the real rendered way on the server.
So, when I push my compiled css file to the server, my co-workers' css gets clobbered until s/he commits and I do an svn:update, etc, etc.
However, if we were working in different SASS file, and those css files were getting created, I would only have to push up, say, the forms.css file instead of the whole thing.
Then for Production, we'd put it back to the way SASS normally works.
The only other way I can figure to do this is to do a mass rename of files, which seem very messy.
Thanks in advance.
The entire point of partials is that they don't get compiled into files. If you want a sass file to be turned into a css file, remove the underscore.
Your real problem seems the be that you're putting compiled CSS in your version control. Don't do that. Only commit Sass, and compile it into CSS server-side with a post-receive hook or something.
IE 8 and lower has a limit to the number of selectors allowed in a single style sheet and once the limit is reached the style sheet needs to be split. Apparently someone addressed this in Compass by creating a way to have Compass do this automatically, and created a gist about it. I however don't have the skills to know what the next step is and there is little in the way of documentation on what to do with this code. Can anyone help with how to integrate this into my Compass install?
Ref: https://gist.github.com/1131536
Thanks much!
Create css_spliter.rb file (as described in your Ref) beside your config.rb file, at the root of your sass project.
Add the following line at the beginning of your config.rb file
require 'css_splitter'
And add the 3 following lines at the end (of config.rb)
on_stylesheet_saved do |path|
CssSplitter.split(path) unless path[/\d+$/]
end
Then run compass compile as you usually do. You won't see the files *myFile_2.css*, *myFile_3.css*, ... appear in the logs but they are well created in your css folder. Also the command compass clean won't remove them, you'll have to dele them manually from your css/ folder.
For what it's worth, there is a Node.js app called Bless that will provide you this functionality. It can run server side or on your local machine.
If you happen to be using CodeKit to compile your Sass/Compass files, it's baked in, you just have to enable it in project settings.
I think the css_splitter solution forgets to remove the code from the first file. Now I have 2 files, the first one is all of my css and the second generated file has the 2nd half of the original file. So I have 150% the amount of CSS as I used to... I did fix my problem in IE though :)