How to ignore multiline comments in sass? - ruby

Is there a way to make sass ignore multiline comments when generating the css file:
// these comments are ignored
These are not (only ignored in compressed mode):
/*
* multiline comments
*
*/
I found this ticket on Github where the author says:
If you really want, you can monkeypatch Sass to silence /* */ comments as well.
But I don't know what he means by monkeypatch sass, so how can I do this ?

Yay! I've learned monkey patching SASS while answering this question:
Sass mixin recursion; #include loop
And now i can help you too!
1) Install Compass
For this solution to work, you'll need Compass. Install it with:
gem install compass
2) Configure Compass
Create a compass.rb file in your project's root and define directories where you keep your SASS and CSS code, e. g.:
css_dir = "stylesheets"
sass_dir = "sass"
3) Create a monkey patch
Create a file called remove-all-comments-monkey-patch.rb in your project's root:
class Sass::Tree::Visitors::Perform < Sass::Tree::Visitors::Base
# Removes all comments completely
def visit_comment(node)
return []
end
end
4) Require the monkey patch from the config.rb
In the config.rb, add:
# Removing all comments by applying a monkey patch to SASS compiler
require "./remove-all-comments-monkey-patch"
5) Compile your project with Compass
Use compass compile to compile SASS into CSS. You can also use compass watch to make the Compass command line tool constantly monitor your code for changes and recompile parts that you modify.
Considerations
This will not remove comments with line numbers generated by SASS. To disable them comment out the line_comments = true line in config.rb or set it to false.
To re-enable multiline comments, just comment out the line that requires the monkey patch and do compass clean.
Don't use it! Use single-line comments with Ctrl+/.
Though this solution is portable and will work for everybody without hacking SASS code manually, you should really consider using an IDE that allows commenting out whole paragraphs with single-line comments using a single keystroke. For me it's Ctrl+/.
Here, i've filmed a short video for you to show that using line comments is actually quicker and more effective than using multiline comments: http://www.youtube.com/watch?feature=player_detailpage&v=DTyMAPZrwyc
Line comments also let you comment out comments without breaking the code.
Consider you have the following code:
foo
/* Bla bla */
bar
baz
And you need to comment it all out. If you wrap it all with /* */...
/*foo
/* Bla bla */
bar
baz*/
...then you broke the code! Now you have a comment that starts with /*foo and ends with bla */, and also a syntax error at baz*/.
Instead, just select the whole code and hit Ctrl+/ (provided that use some IDE or programmer's notepad), it will all be commented out immediately:
//foo
//
///* Bla bla */
//bar
//
//baz
And of course it can later be uncommented with the same hotkey.

You could wrap the comment in an unused #mixin - not an ideal fix but it works.
#mixin ignore {
/*
COMMENT
*/
}

Related

Compass & Sass Deprecation warning

I just installed and Compass & Sass as described here.
I got the following warning when I ran compass watch for the first time. What exactly does it mean? What should I do to fix it, do I need to do anything?
$ (master) compass watch
>>> Compass is watching for changes. Press Ctrl-C to Stop.
DEPRECATION WARNING on line 87 of /Library/Ruby/Gems/2.0.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 /Library/Ruby/Gems/2.0.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.
write css/styles.css
To fix the error message, just change the line 87 from your "_deprecated-support.scss" file to this:
// A debug tool for checking browser support
#mixin debug-support-matrix($experimental: true, $ie: true) {
#debug '#{"$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';
#debug '#{"$ie6-"}$legacy-support-for-ie6'
'#{"$ie7-"}$legacy-support-for-ie7'
'#{"$ie8-"}$legacy-support-for-ie8';
}
The file can be found at your /Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_deprecated-support.scss

Throwing custom errors/warnings in Sass

I'm creating a font module which contains all my webfonts and some Sass mixins to write out the #font-face declarations. The main mixin will be something like includeFont(name, weight, style).
I'll keep a record in some Sass variable(s) of which fonts at which weights and styles are actually available, and through being clever about this I think I can write the mixin so that I can detect if I try and request a font that doesn't exist.
But when I detect that situation, how can I throw an error?
As of Sass 3.4.0, there's an #error directive you can use to cause a fatal error:
$stuff: fubar;
#if ($stuff == fubar) {
#error "stuff is fubar";
}
If you try to compile this at the shell, you'll see the following:
$ sass test.scss
Error: stuff is fubar
on line 3 of test.scss
Use --trace for backtrace.
There are also related #warn and #debug directives which have been in the language for longer, in case those are more useful to you. Example:
#debug "stuff is happening";
#warn "stuff is happening that probably shouldn't be happening";
/*
Note that these directives do not terminate execution, and this block
will therefore still be output.
*/
* {
color: pink;
}
When compiled:
$ sass test2.scss
test2.scss:1 DEBUG: stuff is happening
WARNING: stuff is happening that probably shouldn't be happening
on line 2 of test2.scss
/*
Note that these directives do not terminate execution, and this block
will therefore still be output.
*/
* {
color: pink; }

Implicitly importing a dependent file

I have a method that takes a scss file f and compiles it:
def compile f
options = ...
Sass::Engine.new(File.read(f), options).render
end
where options is a hash that specifies several parameters. All the scss files that I want to compile with this command #import-s a fixed file, say "_foo.scss". So at the moment, I have the line
#import "foo";
at the top of every scss file. I want to let the method above implicitly/automatically do the equivalent to #import "foo"; so that I do not have to write that at the top of every scss file. How can I do that? Is there something I can do with options, or some hack with sass internals?

Wrong encoding for partial

I am running compass watch my_project on Windows XP.
index.scss:
#charset "UTF-8";
#import 'partial';
// ...
_partial.scss:
p:before {
content: '•';
}
config.rb:
encoding = "utf-8"
Generated index.css:
#charset "UTF-8";
/* line 1, ../sass/_partial.scss */
p:before {
content: 'ÔÇó';
}
// ...
How do I make Compass/Sass interpret the partial as UTF-8? Is there
perhaps an environment variable that I can set to change default
character encoding used by Ruby (compass is a Ruby app)?
On my Windows 7 machine, it worked to add the following line to my project's config.rb
Encoding.default_external = 'utf-8'
Also found a great GUI for compass / less / JS compression: http://koala-app.com/
Maybe it is not a direct answer, but even if you can't make Compass/Sass interpret UTF as you want, you may simply try to use unicode escape:
p:before {
content: "\2022";
}
Where 2022 is hexadecimal code for your symbol. To get this code I executed this in irb:
irb> "•"[0].ord.to_s(16)
=> "2022"
Probably not a good solution if you have a lot of unicode chars, but at least a workaround. For example, FontAwesome uses it in its stylesheets.
Apart from escaping the character (predictable, but tedious) as suggested by #NIA, there are two other ways around this:
Add #charset "utf-8"; to the top of _partial.scss
Save _partial.scss as "UTF-8 with BOM".
Judging by what I've read so far, this seems to be a generic Ruby/WIN issue with incorrect encoding detection/fallback when building strings read from files on disk.

SASS: Invalid #import: expected end of line, was ";" - sometimes

I've got a sass file that only contains import statements
#import "this";
#import "that";
if I run sass from the command line everything's good
bundle exec sass foo.scss:foo.css
If, however I run it from within a script (also via bundle exec) it gets upset about those semicolons. This...
template = File.read("foundation.scss")
sass_engine = Sass::Engine.new(template)
sass_output = sass_engine.render
...produces the following on the sass_engine.render call:
(sass):1: Invalid #import: expected end of line, was ";". (Sass::SyntaxError)
if i get rid of the semicolons then the situation is reversed. It complains on the command line and not in the script.
What's going on, and how do I get it to accept the semicolons when run from a script?
The difference is that the Sass command line program notices the "scss" extension and parses the file as SCSS instead of traditional Sass. When doing it programatically, you are starting a Sass engine and not telling it that it is SCSS instead.
So, the error is that its reading it as Sass instead of SCSS.
http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#options
This should fix your problem right up!
template = File.read("foundation.scss")
sass_engine = Sass::Engine.new(template, :syntax => :scss)
sass_output = sass_engine.render
Viola!

Resources