Skip to content

Instantly share code, notes, and snippets.

@RyanRoberts
Created February 17, 2015 13:49
Show Gist options
  • Save RyanRoberts/d406681c1c04c39e2c04 to your computer and use it in GitHub Desktop.
Save RyanRoberts/d406681c1c04c39e2c04 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// ----
// I must say I am not a big fan of having global variables here and there.
// There is a number of issues and drawbacks of handling basic configuration
// with global variables without having functional wrappers:
// - `!global` has to be written yet could be forgotten;
// - there is no way to make sure the value is valid;
// - there is no way to warn/error if something goes wrong.
//
// Having functional wrappers adds a little bit of complexity but it allows
// you extra flexibility when building robust APIs. For instance, you could
// make sure the given value is always upper case to ease future check.
// Or you could throw an error if the given value is invalid, which would
// save the developer from debugging because he didn't quite understand what
// he should have defined the initial variable to.
//
// Anyway, your move.
/// Define the content direction
/// @access public
/// @param {String} $value ("LTR") - Content direction, either `RTL` or `LTR`
/// @throw Throws an error if the given value is neither `RTL` nor `LTR`.
/// @output Nothing.
@mixin content-direction($value: "LTR") {
$value: to-upper-case($value);
@if index("RTL" "LTR", $value) == null {
@error "Content direction can be either `LTR` or `RTL` (case-insensitive). "
+ "Given: `#{$value}`. Aborting.";
}
$__direction__: $value !global;
}
/// Return the content direction
/// @access private
/// @throw Throws an error if `content-direction` has not been included yet.
/// @return {String} - Either `RTL` or `LTR`
@function get-content-direction() {
@if global-variable-exists("__direction__") == false {
@error "Content direction has not been initialized yet. "
+ "Please include `content-direction($value)` before anything else.";
}
@return $__direction__;
}
/// Return the layout direction
/// @access public
/// @require {function} content-direction
/// @return {Position} - Either `left` or `right`
@function get-layout-direction() {
@return if(get-content-direction() == "LTR", left, right);
}
/// Return the layout opposite direction
/// @access public
/// @require {function} content-direction
/// @return {Position} - Either `left` or `right`
@function get-layout-opposite-direction() {
@return if(get-content-direction() == "RTL", left, right);
}
// Test
// Define content-direction
@include content-direction("RTL");
// Get directions
test {
direction: get-layout-direction();
opposite: get-layout-opposite-direction();
}
test {
direction: right;
opposite: left;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment