Configuring Compass on Windows - css

I'm on Windows, and I have SASS running successfully in my project. Now, I want to include compass so I can take advantage of the pre-written mixins, etc.
First I simply tried this statement from within my working sass file: #import "compass/css3/transform";
Naturally, this didn't work since I didn't have compass installed, so I navigated to my Ruby directory and successfully installed the compass gem within c:/ruby193/bin. I can now successfully create compass projects within c:/ruby193/bin, but that doesn't do me much good.
I need run compass commands within my site, which lives here: c:/inetpub/mysite. When I try to do so, however, I get compass is not recognized as internal or external command
How can I get compass to work where I want it?
EDIT: a large part of my problem was that Ruby was installed without adding itself to the Windows Path environment variables, so I could only run SASS and Compass commands from within the C:/Ruby193/bin directory. This caused problems for me since, as a result, I thought that was where I needed to install compass. Anyhow, after figuring that out, I still haven't been able to get compass to work, but am planning on uninstaling SASS, Compass, and Ruby and giving this thing another try from scratch. I marked Stooboo's answer as correct since it was the best and most accurate, especially given the information he had to work with. Thanks!

here's how I do it
(One time)
install ruby http://rubyinstaller.org/
install compass, in a command window enter
gem install compass
to add compass to an MVC project, navigate to project folder and in a command window enter
compass create
you will get the default config.rb ... but here is my usual one
http_path = "/"
css_dir = "content/css"
sass_dir = "content/sass"
images_dir = "images"
javascripts_dir = "scripts"
to install bootstrap (for more info see https://github.com/thomas-mcdonald/bootstrap-sass)
add
require 'bootstrap-sass'
to your config.rb
enter (in your command window)
gem install bootstrap-sass
(I had to do a (in your command window)
gem update
after this but you may not need to)
enter (in your command window)
compass install bootstrap
(then ... every time you open the solution in Visual Studio)
navigate to project folder
in a command window enter
compass watch
(this will monitor project for saves and re-compile the scss files)
Hope that helps
Cheers
Stu

To install Compass, you should open your Windows console with Win+R, cmd and run:
gem update --system
gem update
gem install compass
Don't forget to remove all the stuff that you littered you Ruby installation with.

Use this command in order to add GEM to the Windows Path environment variables:
set PATH=C:\Ruby200-x64\bin;%PATH%

In the Ruby command you should write:
gem update --system
(this block of code updates all the gems in the Ruby)
Then you install sass like it:
gem install sass
(You said that you already has sass, so you don't need to write this code again.)
Then, you write this line:
gem install compass
(Now, you will have compass in your machine)
To know the version that was installed, you can write:
compass --version
To create a new project in your desktop machine, you can write this line of code:
compass create desktop/my-project
(This will create a compass folder in the desktop of your machine called my-project. I hope this is helpful.

Related

How can I fix this compile error, when attempting to compile sass using Prepros and Gumby?

I am using windows 7 to compile .scss with an application known as Prepros. (http://alphapixels.com/prepros/ ). I also downloaded the Gumby Framework(http://gumbyframework.com/) into my document root directory of localhost web-server. My goal is to use the gumby framework along with Prepros.
When I attempt to compile the scss file, I am receiving the following error:
Syntax error: Undefined operation: "power(golden_ratio(), 1) times 16px".
on line 52 of Z:/Ampps/www/Gumby-master/sass/extensions/modular-scale/stylesheets/_modular-scale.scss
from line 23 of Z:\Ampps\www\Gumby-master\sass\gumby.scss Use --trace for backtrace.
Also, if it is helpful, this is the config.rb file contained within the folder www\Gumby-master :
# Require any additional compass plugins here.
# Tell compass where to find local extensions
# If you followed directions and ran 'gem install modular-scale' comment the next two lines out:
extensions_dir = "sass/extensions"
Compass::Frameworks.register('modular-scale', :path => File.expand_path("# {extensions_dir}/modular-scale"))
# Uncomment these to use regular Ruby gems.
# require 'modular-scale'
# require 'sassy-math'
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "img"
# You can select your preferred output style here (can be overridden via the command line) :nested or :expanded or :compact or :compressed:
output_style = :compact
# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true
# To disable debugging comments that display the original location of your selectors. Uncomment:
line_comments = false
# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
Lastly,I reviewed this thread, but I did not find it helpful.
SOLUTION: I tried several things to fix this, and I am not absolutely which of them were responsible for fixing it.
Install ruby development kit
Install rails
Install gumby-framework gem (https://github.com/jorgecoca/gumby-framework)
Verify that the modular-scale gem is installed ( https://github.com/Team-Sass/modular-scale)
Use Advanced Prepros options to use third-party compass plugins (http://alphapixels.com/prepros/docs/sass-compass.html) (NOTE: initially I made the mistake of giving this path C:\Ruby193\lib\ruby\gems\1.9.1\gems, when in fact I realized I must provide this one C:\Ruby193\bin\ruby.exe, just like in the picture in the Prepros manual.)
-as stated in this thread, I opened my compass config.rb and commented out Compass::Frameworks.register('modular-scale', :path => File.expand_path("#{extensions_dir}/modular-scale")), and un-commented #require 'modular-scale' and #require 'sassy-math'.
I also ran into this exact same issue. So I would like to share things which I did.
Gumby framework README.md file states "Note: Please use modular scale 1.0.6, 2.x has not been integrated yet". Make sure the version of modular scale installed on your machine is 1.0.6!
How to check?
Let's assume the location of your Ruby installation is "C:\Ruby200".
Go to C:\Ruby200\lib\ruby\gems\2.0.0\gems. In this directory, you will see all the gems that were installed on the machine. (You should see sass, compass, modular-scale among others)
Make sure it says "modular-scale-1.0.6". If it doesn't, then delete the version you have over there. If you see multiple sassy-math over here, don't worry. We just want one modular-scale on the machine!
How to install Modular Scale v1.0.6?
Run gem install modular-scale v 1.0.6
What else to watch out for?
Like Daniel said, open your config.rb. Make sure you have the following lines in it!
#Require any additional compass plugins here.
require 'modular-scale'
require 'sassy-math'
Whatever you do, don't have the following code in your config.rb file. For this code to truly work, you have to have a directory called extensions in your sass directory, and you have to copy all the modular-scale binaries into that directory.
extensions_dir = "sass/extensions"
Compass::Frameworks.register('modular-scale', :path => File.expand_path("#{extensions_dir}/modular-scale"))
If you run into any other problems and somehow manage to solve it, please do add your answer here! The entire installation experience is terrible at the moment.
+1 for Parth Shah -- that worked for me. But the command to install modular-scale 1.0.6 is actually:
gem install modular-scale -v 1.0.6
He missed the hyphen before the v.
BTW as per this date, there has been a Gumby update so that Gumby supposedly now works with these compass, sass and modular-scale versions -- see below for install commands.
gem install compass -v0.12.4,
gem install sass -v3.2.18
gem install modular-scale -v2.0.4
I am still running the older versions but this update has been confirmed by other Gumby users.

Sass not compiling in textmate

I'm trying to use SASS for the first time with textmate. I seem to have installed it correctly by following the instructions on the git page - https://github.com/MarioRicalde/SCSS.tmbundle
but I can't find any information on how I can now use it.
When I make a .sass file the new Sass syntax is highlighted but when I save it is not compiled. Am I missing something?
Make sure to open up Terminal and in the command line, navigate to your project folder and run this command:
sass --watch style.scss:style.css
Name your working file style.scss, and it will compile and generate and update the style.css file that you reference in your document head.
Also make sure you have installed the Sass gem within your project directory :)
gem install sass
UPDATE
The bundle is only for installing syntax highlighting in Textmate. Sass is a precompiler for CSS, so it generates CSS from what you write in Sass. This is done through the sass --watch command above in the command line.
Read more on how to use and install Sass.

Unable to compile an existing project because Compass can't find it

I just installed the foundation in my application base directory by executing the following command:
compass create myprojectname -r zurb-foundation --using foundation
Now I have open the sass/_settings.scss file and I have un-comment the 66th line that is the following:
$include-html-classes: true;
finaly, I try to compile my foundation project in order to include the html classes by executing the following command:
compass compile
but I am getting the following result in my command prompt:
Nothing to compile. If you're trying to starta new project, you have left off the directory argument.
Run "compass -h" to get help.
also, based on this page : http://foundation.zurb.com/old-docs/f3/compass.php I try to compile my scss code by using the command:
compass watch
but again I am getting the same message as with compile argument next to compass.
Note: I am executing the above commands in the same directory I run the first command for the foundation project creationg.
Note: I am very new user on compass, sass, foundation framework. Actually, today is the first time I am using them, so I am not expirienced user. Please be kind with me :)
Is there anybody to help me with that ?
When you use compass create [directory_name], Compass creates your project within ./[directory_name] relative from your current directory (running compass create without the directory name would have created the project in the current directory). In order to compile or watch a Compass project, you need to do either of the following things:
Tell Compass where your project is via compass compile [path_to_config.rb]
Change to the directory where config.rb is found and run compass compile
Alternately, you could move your config.rb to where you want to run your command. Just make sure you edit the paths to directories configured within said file.

sass --watch not updating after initial launch (sass 3.1.16)

I am working with sass to write the css for a simple static website I am working on. I have run sass --watch custom.scss:custom.css which compiles fine on launch with the message:
Sass is watching for changes. Press Ctrl-C to stop.
overwrite custom.css
However, whenever I update the .scss file, nothing happens. I haven't used SASS outside the context of a rails app before, so I'm wondering if I am missing something?
My scss file is incredibly simple as well, so I doubt it is choking on anything, especially since it works on the first run.
sass -v reports Sass 3.1.16 (Brainy Betty), on Lion 10.7.2
This has now been fixed in the latest commit.
The updated stable gem (3.1.17) hasn't been released yet but there are a few choices while you wait:
Stick with 3.1.16 and use absolute paths when loading up watch, e.g:
sass --watch /User/name/project/scss:/User/name/project/css
The bug should only occur with relative paths so this works around it.
Use the updated (alpha) version
gem install sass --pre
Temporarily roll back to 3.1.15 as suggested by #Marco Lazzeri
Same problem here.
I don't know exactly what the problem is, but rolling back to the previous version is a temporary workaround:
gem uninstall sass -v=3.1.16
gem install sass -v=3.1.15
As it is mentioned by pjumble, it is a known bug in process. You can use absolute path to address this problem, before a new version is release.
This is what I usually do to avoid typing a full path:
cd work-directory
sass --watch `pwd`/sass:`pwd`/css
Hope this work for you:)
I too had the same problem.
Just by updating my gem, it worked.
gem update sass
I had this problem too with the latest SASS version at this time. Downgrading to version 3.2.9 did the trick to me on 2 different Windows 8 computers.
gem uninstall sass
gem install sass -v 3.2.9
I Had a similar problem: "Change detected", but then no writing despite it compiling and overwriting the .css file days before.
Notes:
Reinstalling sass in Ruby didn't work.
I pointed sass --watch at some other projects and they worked.
What seemed to create this problem was that I had made a copy of one project while it was being watched, then started watching the second project.
I can't say for sure but this seem to "trip up" Ruby, maybe it was the cache or some stored info about the file locations.
Solution:
I just created a newly named project folder, dragged into it all the scss files from the second project, renamed the main scss file (e.g. "uikit-main.scss" to "uikit.scss"), --watch it, and it began overwriting correctly again.
I`ve also stuck with sass (v3.4.23) not recompiling after the first run, but it was realted with scss`s folder structure - Sass can`t watch changes in files that are located by the path directing upwards the watching file. Link for details
In my case, the problem was because I'm using sass in a vagrant machine with ubuntu. I install and run sass directly from my host OS (Mac) and the watch mode starts to work.

Require specific gem version in SASS & Compass

I know this is probably more a Ruby question but I work on several projects where I've used compass plugins. Later on I upgrade these plugins and start new projects. The issue arises when I need to go back and make amends to an older project.
How can I amend my config.rb file to use a specific version of a gem?
For example I often use the Compass plugin: http://rubygems.org/gems/html5-boilerplate/versions
The line in my config.rb file looks like this:
require 'html5-boilerplate'
But I would need 1.0.0 for one project and 2.1.0 in another.
Suggest using rvm (the Ruby enVironment Manager), bundler and gemsets. rvm for managing ruby versions and for allowing you to use gemsets - bundler to specify the versions of the gems you want to use in the project. After you install the bundler gem and have a Gemfile that uses the syntax you have already discovered
gem "html5-boilerplate", "~> 2.1.0"
bundle install will then bring down the gems you need for your project. Read more at http://gembundler.com
gemsets can also be project specific and different gemsets can have the same gems at different versions. you can specify the gemset associated with a project via a .rvmrc file in the project's root.
There are several nice posts out there on how to set up rvm and gemsets. Here's a good example of one to get you going:
http://adamstacoviak.com/posts/super-easy-ruby-gem-management-with-rvm-gemsets/
And here's one that also covers bundler:
http://lindsaar.net/2010/3/31/bundle_me_some_sanity

Resources