Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Throwing custom errors/warnings in Sass

Tags:

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?

like image 930
wheresrhys Avatar asked Nov 21 '13 10:11

wheresrhys


People also ask

Which directive displays an error message in Sass?

The @error directive displays the SassScript expression value as fatal error.

What is Sasserror?

Sass @error directive is used when you want to display errors. It displays the SassScript expression values as fatal error including a nice stack trace.

What is @mixin in sass?

Sass MixinsThe @mixin directive lets you create CSS code that is to be reused throughout the website. The @include directive is created to let you use (include) the mixin.


1 Answers

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; }
like image 88
Mark Amery Avatar answered Oct 21 '22 08:10

Mark Amery