SASS with normalize and Codekit - css

When I'm trying to compile my project that include only
#import "normalize" from compass-normalize gem it tells me
thie error
Compass was unable to compile one or more files in the project:
LoadError on line 161 of /Applications/CodeKit.app/Contents/Resources/engines/compass/bin/../lib/compass/configuration/data.rb: no such file to load -- compass-normalize
Run with --trace to see the full backtrace
okey. So I have reinstalled all gems but it still doesn't work. What is more when I'm doing compass watch in command-line it works! And actually it compiles... what's wrong with codekit than?

Are you sure you have that specific gem? If not, you could try:
sudo gem install compass-normalize

Related

batch compiling SCSS files into CSS via windows command line

I am wondering, how to batch compile SCSS files via windows command line...in the older version the command 'sass --watch scssFolder:CSSFolder' will do the job but it seems obsolete in the newest version of the SASS.
The methods you used for the sass node module are deprecated in the latest version, so you have two (and more) options:
Option 1: using node-sass
This is the option with less effort. You already have Node.js installed (and npm), so you can install the node-sass compiler running npm install -g node-sass. After all the install is complete, you will be able to watch or compile an entire folder (or a single file).
node-sass input.scss output.css will compile a single file.
node-sass input/folder -o output/folder will compile a entire folder.
With the -w option you can watch a folder:
node-sass -w input/folder -o output/folder will watch a folder and compile the files to theoutput folder.
Just run node-sass --help for a complete list of options.
Option 2: using Ruby SASS
You need to install Ruby and the install the Sass Gem by running the following command line gem install sass. After all the install is complete, you will be able to watch or update (compile) an entire folder (or a single file).
update will compile a single file or multiple files in a folder (depending on the parameters). watch will do the same and after the initial compilation is completed it will watch the file or all the files in the specified folder, so everytime a change is detected on any of the target files, sass will compile the changed ones.
Both options have the same command line sintax:
sass --watch input/folder:output/folder
sass --watch input.scss:output.css
So, to compile all the files in a folder:
sass --update path/to/input/folder:path/to/output/folder
And to compile and then watch a folder:
sass --watch path/to/input/folder:path/to/output/folder
Just run sass --help for a complete list of options.
Hope it helps!
sass watch is not implemented for the moment in the darts version, to compile your .scss files you can use
sass filename.scss filename.css
If you want you can still use the ruby version but it will be obsolete soon.

sass error: No such file or directory

Sass is throwing an error on multiple projects on both of my computers when I try to compile the scss files to css. I'm using dart-sass. I'm typing the command in the terminal from the root of the projects and the file path is correct. I've tried both
sass --watch src/styles/scss:src/styles/css
and also just
sass src/styles/scss:src/styles/css
but the results are the same:
Error reading src/styles/scss:src/styles/css: no such file or directory.
As such I can't compile any of my style files.
filename is required to select directory
Try this sass --watch src/styles/scss/fileName.scss:src/styles/css
Okay, I figured out a solution if anyone else runs into this problem. You should uninstall dart sass from your computer(prefix this command with sudo if using mac):
npm uninstall sass -g
Then, install a stable version of ruby sass:
gem install sass
Now you should be able to run sass --watch src/styles/scss:src/styles/css and it will compile.
Note: If you were to do npm install sass that would install the latest version written in dart, which is what seems to have caused my problems.
In the terminal, I had to make my way to the file location and then run the command. Example:
Project Structure:
src
abc
prq
main.html
main.scss
When I launch the terminal, it defaults to src folder
PS C:\Users\src> sass --watch main.scss:main.css
Running command here will throw error:
Error reading main.scss: no such file or directory.
Now, browsing to prq directory & running command, will be successful.
PS C:\Users\src\abc\pqr> sass --watch main.scss:main.css
Compiled main.scss to main.css.
Sass is watching for changes. Press Ctrl-C to stop.

Sass --watch not updating css

I've installed Sass and set up a folder with an index.html file and style.scss in my local server (In Ubuntu 13.04).
I type this command into the terminal:
sass --watch style.scss:style.css
And get this output:
Sass is watching for changes. Press Ctrl-C to stop.
LoadError: cannot load such file -- rb-inotify
Use --trace for backtrace.
Sass will update the css the first time I save my .scss file but after that nothing. Anyone know why?
You need to install rb-inotify gem:
gem install rb-inotify
Its more of code editor issue. I faced this issue with brackets and once I switched to Atom (just to test) sass started writing on css file real time.
Tried with both sass --watch sass:css (Directory based watch) and sass --watch sass/app.sass:css/app.css (file based), and both worked fine.

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.

Resources