Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// ----
// @if
// @function
// @mixin
// Direction Controller
$right: right;
$dir: rtl;
@if ( $dir == ltr ) {
$right: left;
} @else {
$right: right;
}
@function test($number) {
@return $number * 2;
}
@function dir-check($a, $b) {
@if $dir == ltr {
@return $a;
} @else {
@return $b;
}
}
// These Mixins check your direction and display @content
@mixin if-ltr {
@if $dir == ltr {
@content;
}
}
@mixin if-rtl {
@if $dir != ltr {
@content;
}
}
@mixin text-hidden($w: 250px, $h:50px) {
text-indent: -9999px;
line-height: 0px;
font-size: 1px;
overflow: hidden;
display: block;
width: $w;
height: $h;
}
@mixin text-hidden-2() {
text-indent: -9999px;
line-height: 0px;
font-size: 1px;
overflow: hidden;
display: block;
@content;
}
.logo-2 {
@include text-hidden-2 {
width: 100px;
height: 50px;
}
}
body {
text-align: $right;
direction: $dir;
width: test(100);
@include if-ltr {
line-height: 18px;
}
@include if-rtl {
line-height: 22px;
h1 {
line-height: 25px;
}
}
}
.logo {
@include text-hidden();
}
.footer {
@include text-hidden(150px, 30px);
}
.next {
content: dir-check('>', '<');
}
.sidebar {
float: $right;
}
.logo-2 {
text-indent: -9999px;
line-height: 0px;
font-size: 1px;
overflow: hidden;
display: block;
width: 100px;
height: 50px;
}
body {
text-align: right;
direction: rtl;
width: 200;
line-height: 22px;
}
body h1 {
line-height: 25px;
}
.logo {
text-indent: -9999px;
line-height: 0px;
font-size: 1px;
overflow: hidden;
display: block;
width: 250px;
height: 50px;
}
.footer {
text-indent: -9999px;
line-height: 0px;
font-size: 1px;
overflow: hidden;
display: block;
width: 150px;
height: 30px;
}
.next {
content: "<";
}
.sidebar {
float: right;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.