Run Compass with --sourcemap flag - css

Does Compass support the --sourcemap option in Sass yet? I would like to run Sass through Compass. I have
sass_options = {:sourcemap => true}
in my config.rb, but when I run compass watch in my project folder no sourcemap files are generated. On the other hand, when I run
sass --compass --sourcemap --watch scss:css
The source file is generated, but the config.rb is ignored.
(For anybody wondering what a sourcemap is, it's a file that allows Developer Tools inspector to point to the origin of a style in a Sass scss file when you inspect an element.)

The solution provided by #cimmanon didn't work for me. What worked for me was the following (credits to Serge-Z in https://github.com/Compass/compass/issues/1108):
sudo gem install compass-sourcemaps --pre
Then you just do compass watch as usual with sass_options = {:sourcemap => true} in your config.rb.
In case you are on OS X El Capitan and have problems installing due to rootless mode (credits to Thomzzzzz in https://github.com/Compass/compass/issues/2018):
sudo gem install -n /usr/local/bin compass-sourcemaps --pre

Source maps are included starting with Sass 3.3 or later, which is only compatible with Compass 1.0.
https://github.com/chriseppstein/compass/issues/1108
Adding the following to your config.rb will only add the sourcemap information directly to your compiled CSS:
sass_options = { :debug_info => true }
Output:
#media -sass-debug-info{filename{font-family:file\:\/\/\/home\/chris\/compass\/sass\/test\.scss}line{font-family:\0000314}}
.foo {
color: red;
}
To get your sourcemap file(s), you need to add this option to your config.rb:
sourcemap = true
Console output:
$ compass watch
modified config.rb
clean css
delete css/test.css
>>> Compass is watching for changes. Press Ctrl-C to Stop.
write css/test.css
write css/test.css.map

For me it works with
sourcemap = true
in config.rb (solution taken from https://chillco.com/blog/setting-sass-and-compass-source-maps)
I'm using compass via Koala (http://koala-app.com/)

Related

Disable map files on SASS

I would like to know how I can prevent Sass from writing .map files. I'm using Sass in a very basic setup:
sass --watch style.scss:style.css
what parameters do I have to add to avoid Sass to generate map files?
That depends on the implementation.
For node-sass and ruby-sass try this:
sass --sourcemap=none --watch style.scss:style.css
If you're using dart-sass the usage is --no-source-map:
sass --no-source-map --watch style.scss:style.css
it's works:
sass --watch --no-source-map input.scss output.css
with
1.8.0 compiled with dart2js 2.0.0-dev.66.0
I'm using sass version 1.13.2 compiled with dart2js 2.0.0 on Ubuntu and it's sass --no-source-map --watch [source].scss:[target].css
as --source-map enables source map and --no-source-map disables it.
Works:
sass --sourcemap=none style.scss style.css
Doesn't work, still generate .map file:
sass --update --sourcemap=none style.scss:style.css
So make sure you have no --update flag
As default, the sourcemap is enabled for Dart Sass and if you add --no-source-map it will disable it.

Using compass - css styling not applying foundation.css

Installed Foundation 5 with Sass a couple of days ago. But, after:
foundation new test_grid
cd test_grid
compass watch
files, directories created by watch...
open index.html and there's no styling. (I also tried 'compass compile' and 'compass watch', but no changes.
The config.rb that compass uses shows:
add_import_path "bower_components/foundation/scss"
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "scss"
images_dir = "images"
javascripts_dir = "js"
And the app.scss shows:
#import "settings";
#import "foundation";
Looking at stylesheets/app.css it seems that the foundation.css file hasn't been imported.
Any ideas of what's going on? Could be a totally newbie problem...knocked my head against the wall and googled ad nauseam.
Based on a suggestion, I reinstalled compass, but still get the same.
Compass seems to be okay when watching:
emily#emily:~/sites/test_grids(master*)$ compass watch
>>> Compass is watching for changes. Press Ctrl-C to Stop.
directory stylesheets
write stylesheets/app.css
and when I modify bower_components/foundation/scss/foundation.scss (insert p {font-size: 10rem;} it shows:
modified bower_components/foundation/scss/foundation.scss
write stylesheets/app.css
The refreshed index.html font size changes, but again, no foundation.css styling.
I was having this problem too and found the answer here:
https://stackoverflow.com/a/25560150/3990944
The latests Sass and Compass are not compatible. Try uninstalling and installing older versions. Worked for me. Details are in the post above.
You want to make changes in the _settings.scss or app.scss, not the files located in Bower components. See file descriptions here:
http://foundation.zurb.com/docs/sass-files.html
How to use
http://foundation.zurb.com/docs/using-sass.html
Try this out:
sudo gem uninstall compass 1.0.0
sudo gem uninstall sass 3.4.0
sudo gem install sass --version 3.2.9
sudo gem install compass --version 0.12.7
This method worked for me

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 --watch with automatic minify?

Is there a way to run:
sass --watch a.scss:a.css
but have a.css end up being minified?
How would I avoid having to run a separate minification step as I compile my stylesheet?
sass --watch a.scss:a.css --style compressed
Consult the documentation for updates:
https://sass-lang.com/guide
https://sass-lang.com/documentation/cli/dart-sass#style
If you are using JetBrains editors like IntelliJ IDEA, PhpStorm, WebStorm etc. Use the following settings in Settings > File Watchers.
Convert style.scss to style.css set the arguments
--no-cache --update $FileName$:$FileNameWithoutExtension$.css
and output paths to refresh
$FileNameWithoutExtension$.css
Convert style.scss to compressed style.min.css set the arguments
--no-cache --update $FileName$:$FileNameWithoutExtension$.min.css --style compressed
and output paths to refresh
$FileNameWithoutExtension$.min.css
If you're using compass:
compass watch --output-style compressed
There are some different way to do that
sass --watch --style=compressed main.scss main.css
or
sass --watch a.scss:a.css --style compressed
or
By Using visual studio code extension live sass compiler
see more
This worked for me :
sass --watch --style=compressed a.scss:a.css
Reference

Resources