Skip to content

Instantly share code, notes, and snippets.

@hitautodestruct
Last active March 2, 2016 10:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hitautodestruct/a5853768bf14ca9c043c to your computer and use it in GitHub Desktop.
Save hitautodestruct/a5853768bf14ca9c043c to your computer and use it in GitHub Desktop.
mixins for supporting direction independent scss
@mixin ltr (){
@content;
}
@mixin rtl (){
.rtl & { @content; }
}
@mixin direction-start ($param, $value) {
@include ltr { #{$param}-left: $value; }
@include rtl { #{$param}-right: $value; }
}
@mixin direction-end ($param, $value) {
@include ltr { #{$param}-right: $value; }
@include rtl { #{$param}-left: $value; }
}
@mixin padding-start ($value) {
@include direction-start ('padding', $value);
}
@mixin padding-end ($value) {
@include direction-end ('padding', $value);
}
@mixin border-start ($value) {
@include direction-start ('border', $value);
}
@mixin border-end ($value) {
@include direction-end ('border', $value);
}
@mixin margin-start ($value) {
@include direction-start ('margin', $value);
}
@mixin margin-end ($value) {
@include direction-end ('margin', $value);
}
@mixin text-align ($value) {
@if ( $value = 'start' ){
@include ltr { text-align: left; }
@include rtl { text-align: right; }
} @else if ( $value = 'end' ) {
@include ltr { text-align: right; }
@include rtl { text-align: left; }
} @else {
text-align: $value
}
}
@mixin position-start ($value) {
@include ltr { left: $value; }
@include rtl { right: $value; }
}
@mixin position-end ($value) {
@include ltr { right: $value; }
@include rtl { left: $value; }
}
// @mixin translateX ($value) {
// @include ltr { translateX($value); }
// @include rtl { translateX(-1 * $value) }
// }
/*.component {
@include padding-start(10px);
}*/
// padding-left = padding-start
// padding-right = padding-end
// border-left = border-start
// border-right = border-end
// margin-right = margin-end
// margin-left = margin-start
// text-align = start/end
// left (position) = position-start
// right (position) = position-end
// translateX = Still need to think how to do this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment