When I compile my SCSS code in to CSS using Brunch.io it adds the following to the CSS.
#media -sass-debug-info{filename{font-family:file\:[*FILE PATH REMOVED*]/reset\.scss}line{font-family:\000031}}
I have tried adding a "quiet" flag to the Brunch config file (as suggested here: https://github.com/brunch/sass-brunch) but this doesn't seem to make a difference.
How can I stop the compiler from adding these lines?
Try to disable :debug_info to false. Like this in config.rb:
debug_info = false
Or in brunch config file you should edit these lines:
config =
plugins:
sass:
debug: 'comments'
You need to specify it this way in config.rb (just specifying debug_info on it's own wasn't enough).
sass_options = {:debug_info => false}
Tested with Compass 1.0.3 and Sass 3.4.25
Useful blog
Related
In my windows machine, i installed java, sencha cmd, sencha doc, ruby, compass and i generated one sencha application in that i try to compile app.scss file using the compass compile command but it gives the following error in command prompt:
when i run compass compile command it deletes app.css file and gives following error.
C:\wamp\www\sass\resources\sass>compass compile modified config.rb
clean C:/wamp/www/sass/resources/css delete C:/wamp/www/sass/resources/css/app.css DEPRECATION WARNING on line 1,
column 7 of C:/Ruby22-x64/lib/ruby/gems/2.2.0/gem
s/compass-core-1.0.3/stylesheets/compass/css3/_shared.scss: Unescaped
multiline strings are deprecated and will be removed in a future versi
on of Sass. To include a newline in a string, use "\a" or "\a " as in
CSS.
WARNING: The compass/css3/shared module has been deprecated. You can
silence this warning by importing compass/css3/deprecated-support
instea d. Please be aware that module will be removed in the next
release.
on line 1 of C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/
stylesheets/compass/css3/_shared.scss
from line 3 of C:/wamp/www/sass/touch/resources/themes/stylesheets/senc
ha-touch/_base.scss
from line 22 of C:/wamp/www/sass/touch/resources/themes/stylesheets/sen
cha-touch/_default.scss
from line 4 of C:/wamp/www/sass/resources/sass/app.scss
DEPRECATION WARNING on line 87 of
C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass
-core-1.0.3/stylesheets/compass/css3/_deprecated-support.scss: #{} interpolation near operators will be simplified in a future version
of Sass. To preserve the current behavior, use quotes:
unquote('"$moz-"#{$experimental-support-for-mozilla}
"$webkit-"#{$experimental
-support-for-webkit} "$opera-"#{$experimental-support-for-opera} "$microsoft-"#{ $experimental-support-for-microsoft}
"$khtml-"#{$experimental-support-for-khtml} ')
You can use the sass-convert command to automatically fix most cases.
DEPRECATION WARNING on line 92 of
C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass
-core-1.0.3/stylesheets/compass/css3/_deprecated-support.scss: #{} interpolation near operators will be simplified in a future version
of Sass. To preserve the current behavior, use quotes:
unquote('"$ie6-"#{$legacy-support-for-ie6}
"$ie7-"#{$legacy-support-for-ie7} " $ie8-"#{$legacy-support-for-ie8}')
You can use the sass-convert command to automatically fix most cases.
WARNING: The compass/css3/box module is DEPRECATED and will be removed
in the ne xt release. Please use compass/css3/flexbox instead.
on line 4 of C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/
stylesheets/compass/css3/_box.scss
from line 4 of C:/wamp/www/sass/touch/resources/themes/stylesheets/senc
ha-touch/_base.scss
from line 22 of C:/wamp/www/sass/touch/resources/themes/stylesheets/sen
cha-touch/_default.scss
from line 4 of C:/wamp/www/sass/resources/sass/app.scss
error app.scss (Line 6 of C:/wamp/www/sass/touch/resources/themes/stylesheet
s/sencha-touch/_base.scss: File to import not found or unreadable:
blueprint/typ ography. Load paths: Compass::SpriteImporter
C:/wamp/www/sass/resources/sass
C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets
C:/wamp/www/sass/touch/resources/themes/vendor/compass-recipes/stylesheets
C:/wamp/www/sass/touch/resources/themes/stylesheets) Sass::SyntaxError
on line ["6"] of C: File to import not found or unreadable: bl
ueprint/typography. Load paths: Compass::SpriteImporter
C:/wamp/www/sass/resources/sass
C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets
C:/wamp/www/sass/touch/resources/themes/vendor/compass-recipes/stylesheets
C:/wamp/www/sass/touch/resources/themes/stylesheets Run with --trace
to see the full backtrace
C:\wamp\www\sass\resources\sass>
Here sass is my folder name in www folder.
my app.scss file is as following
// The following two lines import the default Sencha Touch theme. If you are building
// a new theme, remove them and the add your own CSS on top of the base CSS (which
// is already included in your app.json file).
#import 'sencha-touch/default';
#import 'sencha-touch/default/all';
// Custom code goes here..
// Examples of using the icon mixin:
// #include icon('user');
.abc
{
color: #fff;
}
my config.rb file is as following
# Get the directory that this configuration file exists in
dir = File.dirname(__FILE__)
# Load the sencha-touch framework automatically.
load File.join(dir, '..', '..', 'touch', 'resources', 'themes')
# Compass configurations
sass_path = dir
css_path = File.join(dir, "..", "css")
# Require any additional compass plugins here.
images_dir = File.join(dir, "..", "images")
output_style = :compressed
environment = :production
path of sencha sdk is as following
C:\wamp\www\sencha-touch-2.4.2-gpl\touch-2.4.2
Compass is included in the Sencha CMD installation. You can compile the CSS by executing the command sencha ant sass from your application folder.
Having completely given up attempting to touch the command line for SASS compiling, I have installed Prepos which seems to have a decent interface, and at least seems to be able to do the basics like compile SASS.
This compiles nicely when I save the file:
$my_color: #BADA55;
nav {
a{
color: $my_color;
&:hover {
color: darken($my_color, 10%);
}
}
}
The problem arises when I try to import compass, eg. if I add
#import 'compass';
Then I get a 'compilation failed' error- with a big red sad face, but naturally, no elaboration as to what the problem is.
To be honest, I barely know where to start to fix this. I just about grasp the basics of what I'm dealing with, but that's about it. I have found the available online documentation surrounding getting started with SASS nothing short of atrocious, which is why I have (reluctantly) turned to using a GUI. From my understanding Prepros comes with everything out of the box- including ruby and compass. So I really have no idea why this isn't working, and would greatly appreciate any pointers. Thanks.
EDIT: I am using the free version of Prepros (will happily pay for the full version if it actually works) and have tried adding a custom config.rb file which sets some basic configuration options:
relative_assets = true
css_dir = "css"
sass_dir = "scss"
images_dir = "images"
output_style = :expanded
line_comments = true
preferred_syntax = :scss
Doesn't work.
Sorry, adding the config.rb file (with the above content) DOES solve the issue (I'd just made an error in the path).
I just can't get it work. I have a .scss file with some basic CSS.
Now, I have installed Ruby and I installed SASS like so - gem install sass.
What do I do to get it work on sublime?
I installed "SASS" so sublime acknowledge the .SCSS extension. I also installed SASS builder, and it actually works but in an strange way.
In addition to the compiled css file, it also adds .map file and a folder name .sass-cache.
Why Is that? How to I get rid of that? I don't need a .map file.
I also get an alert every single time the build is done. ("style.css has been compiled")
And not only that but I also get this comment at the end of my compiled CSS file:
/*# sourceMappingURL=style.css.map */
Please help, I'm lost.
Thanks in advance.
The .map file is for chrome (and maybe other browsers) to MAP your CSS that is rendered in the browser back to your actual SCSS. This is very very useful when debugging.
The scss-cache is just what it says it is a cache file that Sass uses. You can delete it but it will keep coming back every time you compile.
Once you go to production you can set Sass to not add any comments to your final css output file. You do this through a config.rb file if you are using compass.
Search on YouTube for LevelUp Tuts and Sass Compass install. Scott expanse how to get stared very well.
--sourcemap=none will disable the comment as well as the .map file creation. not so hard guys.
also, --no-cache will prevent creating the .sass-cache folder and its content.
Thanks anyway.
Try using SassBuilder for ST2. And you can config not to include comments, cache,etc with True/False.
{
"output_path": "../css",
"options": {
"cache": true,
"debug": false,
"line-comments": true,
"line-numbers": true,
"style": "nested"
}
}
For further info, click here.
I'm trying to disable line comments in my compass config.rb file but I still keep getting the line references to the scss file in my normal css file.
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"
# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed
# 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
I've restarted compass. Deleted my cache folder and my css file after saving my .scss. What am I doing wrong here?
My config.rb file was being ignored. Fixed it by going into the folder with commandline and typing compass watch from within the folder.
Still puzzles my because I have other projects in my WAMP folder and I just use compass watch [project] for those and the config.rb file for those does not get ignored.
Even with output style "compressed", I have not been able to remove multi-line comments, and the sass/scss documentation also suggests that they are not removed (only single-line comments with "//" are removed).
My solution was to simply apply a Perl one-liner to manually remove comments from a .css file, after sass has generated its final output:
sass -fCE utf-8 -t compressed application.sass application.css
perl -pi -e'BEGIN{$/=undef}s#/\*.*?\*/##gs' application.css
This worked for me
compass_config do |config|
config.sass_options = { :line_comments => false }
end
In a Compass config.rb file, you can set the environment to :development or :production.
Is it possible to use this setting in Sass conditionals? Here's what I want to do:
#if (environment === :development) {
#import 'debug';
}
Solved: I found the answer while drafting my question. Will post anyway since I didn't find anything definitive that actually explains this.
Thanks in part to this issue in the Compass repository, I found that you can use settings-based conditionals in Sass like this:
#if compass-env() == 'development' {
body {
color: red;
}
}
Confirmed this works with Sass 3.2.5 + Compass 0.12.2 + Ruby 1.9.3p194.
However you can't do this:
#if compass-env() == 'development' {
#import 'debug';
}
That throws a Syntax Error: "Import directives may not be used within control directives or mixins.
So the workaround is to #import the file and then wrap its entire contents in the environment conditional.
This can done (when Compass is not available) by storing environment information in an dynamically generated SCSS file, which can then be imported wherever this information is required. This should be done before the SASS compiler is started.
Here's what the build script can look like (i.e. build.sh):
#!/bin/bash
echo "\$ENV: 'production';" > ./_sass/env.scss
../node_modules/.bin/node-sass ./_sass/style.scss ../_site/css/style.css --source-map=true
This SCSS file can the be used like so:
#import 'env';
#if ($ENV == 'production') {
...
// some SCSS styling to be used in production only
...
}