A way to prevent compilation of SCSS/SASS files without appending _ to their name? - sass

I'm using Foundation 4 standalone as a read-only git submodule in a project, and need combine all of its scss files into an umbrella project.scss file, which then gets compiled to project.css.
I'm using Compass to compile, however it compiles any scss file not appended with underscore, so both foundation/scss/normalize.scss and foundation/scss/foundation.scss get compiled twice each - once each standalone, and also into my project.scss file that imports both.
Is there any way to prevent compilation besides appending an underscore to normalize.scss and foundation.scss? I'd rather not append the underscore b/c I want to use the Foundation standalone project exactly as is from the official repo, and simply import it into the project-specific project.scss where all the customizations reside.
Edit: More explanation - I'm using a Scala framework managed by SBT, which makes a system call to Compass compile via an SBT plugin. Compass compile still reads config.rb in my project root for source and target dirs, but I'm not sure what/if other Compass tricks are available in this setup.
I was rather hoping for some kind of syntax trick in config.rb or a Compass command line flag that could tell it to, say, compile all .scss files in [project root]/sass, but not recursively, eg, don't compile anything in [project root]/sass/foundation or other subdirectories. Anyone know anything like that?

The solution is simple: do not include Foundation files into your project.
Instead, install it as a Compass extension and require it from your Compass config.
Note that installing via Gemfile (bundler) is preferred over installing manually with gem install.

Related

Compiling sass with SassyStudio and Compass and multiple areas

Iam trying SassyStudio für Visual Studio to compile the SASS in our project - but there area some issues.
The project is structured like this:
Solution
- Project 1
-- Areas
--- Area 1
---- Styles
----- style.scss
------ style.css
--- Area 2
---- Styles
----- style.scss
------ style.css
-- Styles
--- globalstyle.scss
---- glogalstyle.css
As you can see the scss files are scattered all around the project. The css Files should be compiled beside the scss files. Since there are compass references within the scss files there are dependencies to compass.
Mindscape Web Workbench is not designed to work like this.
I installed Ruby + gem sass + gem compass and
sass --watch C:/compasstest:C:/compasstest --compass
works well. But I dont like to start a batch everytime I start developing.
So I found SassyStudio an it pretty looks like what I need. But there are some issues with the compass references. In the options I entered "C:\Program Files (x86)\Ruby193\bin" to Ruby Install Path and "C:\compass" to the Include Paths property. The Compass Folder contains for example the "compass/css3" structure from github.
12:00:52.447 : Failed to compile css.
[SassCompileException]c:\compass/compass/css3/shared:1: error: file to import not found or unreadable: "compass/support"
at NSass.SassCompiler.CompileFile(String inputPath, OutputStyle outputStyle, Boolean sourceComments, IEnumerable`1 additionalIncludePaths)
at SassyStudio.Integration.LibSass.NSassDocumentCompiler.Compile(FileInfo source, FileInfo output)
at SassyStudio.Editor.GenerateCssOnSave.GenerateCss(DateTime time, String path)
12:00:52.447 : Compile complete.
What exactly is Ruby Install Path for?
Do I need the config.rb even if I dont want so specifiy specifiy sass and css folder?
How can I tell SassyStudio to find the file compass/support (It already found compass/shared as we can see)?
OK, so the sass --compass is new to me, so I don't know if I can comment on that.
Here is what you want to do.
First, change your ruby path to this C:\Program Files (x86)\Ruby193 as you don't need the bin directory in there (and not sure if it would cause issue or not).
Next, for me to detect that you are using compass (vs sass gem), I look for the config.rb file, and I believe that compass requires this to work as well, but not exactly sure on that. For me though, I definitely need it.
Now, what happens when you save a file is that I go looking for that config.rb from the current directory upward, so I believe that you can achieve what you are wanting to do through the use of multiple compass.rb files. So, that means if you put one in Area 1, one in Area 2, and one in Styles, I think it will work (but I've never tried).
I'm a bit unfamiliar with the syntax of compass.rb but I'm sure you will be able to figure out something that works there. That file may need to go into the Styles folder instead of root folders, I don't remember for sure (I think styles is perhaps configured in config.rb).
Let me know if you need anymore help.

compass: You must compile individual stylesheets from the project directory

A while ago I was using compass to generate stylesheets from sass for a project.
Recently I returned to that project. I went to my sass directory and did "compass watch --debug .:."
This generated the error "You must compile individual stylesheets from the project directory".
I discovered that there was no config.rb in the directory. So I recreated one. It looks like this:
http_path = "/"
css_dir = "/css"
sass_dir = "/css"
images_dir = "/img"
javascripts_dir = "/js"
preferred_syntax = :sass
However, all of my attempts to use compass result in the same error, no matter what values I put in the config.
How do I get compass to actually process my sass?
just came across this problem too, and it has already been answered in the comment by Arnaud Valle.
But just for clarity, and people later searching.
Just creating a config.rb will not work, as compass does not recognise it.
The answer is just switch to your project directory(root) and then run
compass init
This will then create you a "working" config.rb, and two directories called sass, and stylesheets, in the sass directory will be a couple of start scss files.
If you do not want them, or want to use different directories, you can of course now edit your freshly created and working config.rb, and change your directories (and then delete the old automatically created ones)
Oh and i suspect your js will not be in a folder javascripts, so edit that to in the config.rb
Anyway having done that(or not) you should then be able to run
compass watch
and all should be good , i.e. your scss files get compiled to css files
As an alternative that I have not tried, but theoretically
compass compile [path/to/scss]
should work too, if you don't want to init compass
More information to be found in the compass documentation here
and to go completely over the top, if this is something you find yourself doing often, and hate the defaults then edit/add the following to your ~/.bash_profile
alias compass_init="compass init --syntax=sass --css-dir=css --javascripts-dir=js"
I usually have my config.rb in my project directory (or root) rather than the sass directory.
Folder structure would be like this:
config.rb
--- css
--- sass
Also your css_dir and sass_dir have the same value, which could lead to your issue as well.
Remove the "/" in front of your directory names.
This error occurs when your source path is incorrect. In your case, your directories have an extra "/". Removing them should fix your problem.
As others have said, creating a config.rb with compass init will fix it too.
Note that Config.rb is not necessary when using Grunt or similar runners that run compass. That might be how your project was running before without the config.rb file. The runner starts compass with all the paths and options in Gruntfile.js. Having paths/options in both Gruntfile and config.rb might cause problems.
Had this problem on windows 7 using Symfony with Gulp, i solved it using absolute paths like this:
gulp.task('compass', function() {
gulp.src('c:/wamp/www/mnv/src/Mnv/Bundle/MnvBundle/Resources/public/sass/*.scss')
.pipe(compass({
config_file: 'c:/wamp/www/mnv/src/Mnv/Bundle/MnvBundle/Resources/public/config.rb',
css: 'c:/wamp/www/mnv/src/Mnv/Bundle/MnvBundle/Resources/public/stylesheets',
sass: 'c:/wamp/www/mnv/src/Mnv/Bundle/MnvBundle/Resources/public/sass'
}))
.pipe(gulp.dest('c:/wamp/www/mnv/web/css'));
});
For anyone looking to compile SCSS without making a whole project (e.g., for a one-off page), you can just create a config.rb, but it needs at least two parameters: css_dir and sass_dir. (touch-ing it is not enough).
A minimal config.rb:
css_dir='.';sass_dir='.'
This effectively creates a compass project for the purpose of compiling simple files. You'll have to include the rest of the params if you want to use sprites, etc. Assuming compass can write to the directory, it'll create the .sass-cache directory once you run compass compile or compass watch for the first time.
It's also important to note that compass commands must be run from the directory with config.rb, or you'll get this error.
Finally, if you just want to take advantage of simple SASS features (and not Compass framework components), straight SASS is often simpler:
sass --watch foo.scss:foo.css
I experienced the same problem using gulp-compass-compile. Fixed that by changing srcDir option (that converts to --sass-dir option in compass compile call) for compass function from ./src/scss to src/scss. Hope that helps someone.

Rubygem Executable $LOAD_PATH Issues

I'm writing an IDE in Ruby, and I'm stumped on how to get all my files to get "required" when I run the program on the command line, AND when its installed as a Rubygem.
My Rubygem has an executable file named "vr" in it. I need to make this "vr" executable file "require" all the other files from my project.
When I'm developing, its easy to require all my project's files. I simply "require" a relative path to them like this:
require_all Dir.glob(File.expand_path(File.dirname(__FILE__)) + "/../bin/**/*.rb")
The require_all gem will work perfectly. However, I get a big problem when I install this program as a rubygem. When my "vr" executable is installed by rubygems, it copies the "vr" executable to a special directory:
/home/eric/.rvm/gems/ruby-1.9.3-p125/bin
This directory is totally separated from my project's root folder. And so all my project's files are no longer found by the "require" statement.
Rubygems makes this directory for my gem's root:
/home/eric/.rvm/gems/ruby-1.9.3-p125/visualruby-0.0.55
I need to be able to "require" all the files from that directory into my project.
My solution so far, is to make a second file called "visualruby.rb" that resides in my project's lib folder. It has the require_all statement in it to require all the project files. Then I just have to link the executable to it by adding this code to my "vr" executable file:
base_file = File.dirname(__FILE__) + '/lib/visualruby.rb'
if File.file?(base_file)
require base_file #load from project
else
require 'visualruby.rb' #load from gem
end
It is necessary to check if there's a file named "visualruby.rb" relative to the current file because when I'm developing, it will always find the installed gem's version of "visualruby.rb" So when I make a change to a file, it has no effect. I have to force it to load the version from my development project for changes to work.
Also, my IDE creates projects from scratch, so it would be nice to know the general solution to this. I'd like to have a consistent project file system for all projects, but I'm not sure that's possible. I had the general solution of making a file called "requires.rb" for all projects, but I don't think it will work because every project will have the same filename added to the $LOAD_PATH.
Please help me understand how I can make a consistent file structure where I can develop, and make rubygems.
I found the answer to my own question:
The problem was that I was installing my rubygems using the rubygems API:
Gem::Installer.new(file_name)
This created syslinks that messed up my paths. There is an option to make wrappers instead of syslinks and that seems to be the standard way to install:
Gem::Installer.new(file_name, :wrappers => true)
Now the a wrapper is copied to my gem's bin directory and it uses the correct path. Now I can have a universal file that can be made into a gem. And everything runs the same in development and in the gem.
A happy ending...

How can I run SASS without installing?

I wanted to use SASS on our company's web app but I can't install any programs on production machines. Everything I searched about SASS required you to run an installation program like gem and also required HAML.
I was hoping to find just a script that processes scss files without needing to install anything else.
Well... if you have Ruby available, you could checkout the Git repository of Sass (https://github.com/nex3/sass). Do so by either typing git clone https://github.com/nex3/sass.git or just downloading it.
Then you could use the interactive Ruby console by typing irb. Try to require 'sass/lib/sass' (this one here) and run Sass.compile_file 'my_styles.css'.
Otherwise... why are you trying to do that? You can also install sass locally, run sass --watch on your sass folder and it compiles your scss files automatically into css files - which you can deploy on your production environment.
If you can run java program in your build system, you could use JRuby for compiling sass. See this answer for more details
Here's a solution for using Sass without using the command line or installing dependencies. It works with Windows, OS X, and Linux. It has a graphical interface, and no installer, just unzip and double-click.
http://scout-app.io
You can also use the java library https://github.com/scireum/server-sass which can be embedded into any java based web-app. It will compile sass on the fly and return the resulting css. This is especially useful if the Sass sources change (i.e. for customizing reasons) and an ahead of time compilation is not possible. (Note: I'm the author of the project - and it is also not yet a complete implementation of the Sass standard).
Alternatively, what you could do is:
Install Ruby
Download the Sass Gem
Navigate to download location
Run: gem install sass-3.3.4.gem
Voila! Sass is installed.
Use the online Sass compiler SassMeister. You just have to paste your sass code on the left panel and get the css code on the right.

Does --css-dir always have to be relative to the project directory?

I'm using compass 0.10.4
I'm running a compass command and I want it to put it's output to the
server when I run a watch instead of to the project directory.
Is there any way of specifying an absolute path instead of a path
relative to the directory you want the css output to?
I'm trying to have my compiled css output to the directory:
/home/leeand00/leeand00.com/wp-content/themes/coffeeSunrise
but instead it is being output to
<compass-project-dir>/home/leeand00/leeand00.com/wp-content/themes/
coffeeSunrise
I've tried specifying the compiled css output directory using --css-
dir on the command line.
I've also tried changing the value of css_dir to
/home/leeand00/leeand00.com/wp-content/wp-content/themes/coffeeSunrise
in config.rb and
not specifying the --css-dir argument and I get the same result.
I realize that this can be specified using ../../../ (as many times as
needed) but since I don't always know where my deployment point would
be this is sub optimal.
Chris added this functionality to the latest build, but until the new version is released, you have to compile it yourself.
Just a tip:
For windows os you can add below
css_path="C:/ui/myproject/css"

Resources