Skip to content

Instantly share code, notes, and snippets.

@MoOx
Created January 24, 2012 17:19
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save MoOx/1671259 to your computer and use it in GitHub Desktop.
Save MoOx/1671259 to your computer and use it in GitHub Desktop.
Sass @error use case
/**
* Shape/Polygon/Triangle
*
* @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
*/
@mixin triangle($direction: top, $width: 1em, $height: 0, $color: #000)
{
@if ($height == 0)
{
$height: $width;
}
width: 0;
height: 0;
@if ($direction == 'top')
{
border-left: $width solid transparent;
border-right: $width solid transparent;
border-bottom: $height solid $color;
}
@elseif ($direction == 'bottom')
{
border-left: $width solid transparent;
border-right: $width solid transparent;
border-top: $height solid $color;
}
@elseif ($direction == 'left')
{
border-top: $width solid transparent;
border-right: $height solid $color;
border-bottom: $width solid transparent;
}
@elseif ($direction == 'right')
{
border-top: $width solid transparent;
border-left: $height solid $color;
border-bottom: $width solid transparent;
}
@elseif ($direction == 'top-left')
{
border-top: $width solid $color;
border-bottom: $width solid transparent;
border-left: $width solid $color;
border-right: $width solid transparent;
}
@elseif ($direction == 'top-right')
{
border-top: $width solid $color;
border-bottom: $width solid transparent;
border-left: $width solid transparent;
border-right: $width solid $color;
}
@elseif ($direction == 'bottom-left')
{
border-top: $width solid transparent;
border-bottom: $width solid $color;
border-left: $width solid $color;
border-right: $width solid transparent;
}
@elseif ($direction == 'bottom-right')
{
border-top: $width solid transparent;
border-left: $width solid transparent;
border-bottom: $width solid $color;
border-right: $width solid $color;
}
@else
{
// @error will be nice !!
@warn 'The direction used does not exist';
}
}
@MoOx
Copy link
Author

MoOx commented Jan 24, 2012

Warn is not enough.
Compass.app does not show warn (or I miss configure it)

@chriseppstein
Copy link

As a work around:

module Sass::Script::Functions
   def error(message)
     raise Sass::SyntaxError, message.value
   end
end
@warn "#{error("The direction used does not exist")}";

@MoOx
Copy link
Author

MoOx commented Jan 24, 2012

I will try this. Thanks !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment