Throwing custom errors/warnings in Sass - 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; }

Related

Setting expanded output style in sass doesn´t work

I want to change output style in my sass file to expanded but setting :
sass --watch style.scss:style.css --style expanded
doesn´t work for me. Instead it return me this
Encoding::CompatibilityError: incompatible character encodings: CP852 and UTF-8
Use --trace for backtrace.
Is there any possible to fix it? I´m not quite sure about it too because I´m new in Sass.But when I tried first , things went well in my single line selector in compresed style .I did some changes in sass file, I have here now more selectors formated in expanded output style , but it seems that problem is that compiler still want to see my sass file in compresed output style because it gives me back this:
Compilation Error
Error: Invalid CSS after "body {": expected "}", was "{"
on line 1 of sass/c:\Users\Doma\Desktop\Nové webovky\Javascript
& webovky\alfabeta\pionyr.sass
body { {
Can someone please help? Maybe is some basic thing but I really didn´t find solution to this and I searched in many sources
Thank you very much
that happening because you use native language not english for your operation system to change that and make sure sass compiler working without errors write this in terminal/command line before you use sass compiling command chcp 1252 after code activated use sass compile as expected sass --watch style.scss:style.css --style expanded
update
sometimes this error happening because silly mistake try this may help some causes this solution with helpfully change the path name from c:\Users\Doma\Desktop\Nové webovky\Javascript & webovky\alfabeta\pionyr.sass to c:\Users\Doma\Desktop\Nov webovky\Javascript & webovky\alfabeta\pionyr.sass
just take out é form the folder path and try again.

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

SASS: preserve comment position

I recently decided to use RTLCSS to make RTL versions of my stylesheetes.
Now i'm trying to use Declaration-level directives to tell RTLCSS what to do, but SASS compiles my comments to next line.
For example, font-size: 14px/*rtl:15px*/; Compiles to
font-size: 14px;
/*rtl:15px*/
And that stops RTLCSS from procssing it properly. Is there a way around this? can i configure sass to just compile the value as-is, preserving comment position?
P.S. I use grunt-sass(node-sass) to process my scss files.
Use SASS interpolation syntax, passing your comment as string
body{ font-size: 14px #{"/*rtl:15px*/"}; }
will produce
body { font-size: 14px /*rtl:15px*/; }
Both standard /rtl:.../ and special/important /!rtl:.../ notations are supported.
You can use /!rtl: to escape from sass compiler
Documentation

How to ignore multiline comments in sass?

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
*/
}

how to set same css property using compass sass

many websites join the same propery of css rule in their css file, I want to use compass sass to complete this job, I found that extend method can do it, but it must extend base an selector, any way not to output the base css selector?,for example.
.a{color:red;font-size:10px;}
.b{color:red:font-weight:bold;}
they has same "color:red".if I want to ouput
.a,.b{color:red;}
I must extend .c
.c{color:red;}
but actually I don't want .c display at my css file. how to do it?
In Sass 3.2, they added a feature that does just that: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#placeholders
Basically, use a % instead of a . to make a silent class that's only for extending.
%c {
color: green;
}
.a, .b {
#extend %c;
}

Resources