Created
February 17, 2015 13:49
-
-
Save RyanRoberts/d406681c1c04c39e2c04 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// 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(); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
test { | |
direction: right; | |
opposite: left; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment