https://github.com/pierreburel/sass-direction
Sass mixins and functions to help creating bi-directional stylesheets.
https://github.com/pierreburel/sass-direction
Last synced: 12 months ago
JSON representation
Sass mixins and functions to help creating bi-directional stylesheets.
- Host: GitHub
- URL: https://github.com/pierreburel/sass-direction
- Owner: pierreburel
- License: mit
- Created: 2016-12-08T08:46:05.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2018-01-17T12:12:12.000Z (over 8 years ago)
- Last Synced: 2024-12-08T21:12:41.913Z (over 1 year ago)
- Language: CSS
- Size: 4.88 KB
- Stars: 4
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Direction
Sass mixins and functions to help creating bi-directional stylesheets.
Compatibility: [Sass](https://github.com/sass/sass) and [LibSass](https://github.com/sass/libsass)
---
## Install
Download [`_direction.scss`](https://raw.githubusercontent.com/pierreburel/sass-direction/master/_direction.scss) or install with [npm](https://www.npmjs.com/) or [Bower](http://bower.io/) :
### npm
```
npm install sass-direction
```
### Bower
```
bower install sass-direction
```
---
## Usage
### `app.scss`
```scss
@import "direction";
h1 {
text-align: direction(left);
margin-#{direction(right)}: 1em;
padding: direction-sides(1em 2em 3em 4em);
border: direction-corners(1em 2em 3em 4em);
font-size: direction-if(ltr, 1em, 2em);
line-height: direction-if(rtl, 2);
@include direction-if(ltr) {
&::before {
content: "left to right";
}
}
@include direction-if(rtl) {
&::after {
content: "right to left";
}
}
direction: direction(rtl);
& > span {
direction: direction(ltr);
}
}
```
### `app-rtl.scss`
```scss
$direction: rtl;
@import "app";
```
---
## Result
### `app.css`
```css
h1 {
text-align: left;
margin-right: 1em;
padding: 1em 2em 3em 4em;
border: 1em 2em 3em 4em;
font-size: 1em;
direction: rtl;
}
h1::before {
content: "left to right";
}
h1 > span {
direction: ltr;
}
```
### `app-rtl.css`
```css
h1 {
text-align: right;
margin-left: 1em;
padding: 1em 4em 3em 2em;
border: 2em 1em 4em 3em;
font-size: 2em;
line-height: 2;
direction: ltr;
}
h1::after {
content: "right to left";
}
h1 > span {
direction: rtl;
}
```
---
## Aliases
- Function `direction-ltr($if, $else)`: `direction-if(ltr, $if, $else)`
- Function `direction-rtl($if, $else)`: `direction-if(rtl, $if, $else)`
- Mixin `direction-ltr`: `direction-if(ltr)`
- Mixin `direction-rtl`: `direction-if(rtl)`
---
## Credits
Hugely based on [Tyson Matanich](http://matanich.com)’s [idea](https://github.com/tysonmatanich/directional-scss).