{"id":23014852,"url":"https://github.com/pierreburel/sass-direction","last_synced_at":"2025-08-14T07:31:42.312Z","repository":{"id":57356158,"uuid":"75919718","full_name":"pierreburel/sass-direction","owner":"pierreburel","description":"Sass mixins and functions to help creating bi-directional stylesheets.","archived":false,"fork":false,"pushed_at":"2018-01-17T12:12:12.000Z","size":5,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-12-08T21:12:41.913Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pierreburel.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-12-08T08:46:05.000Z","updated_at":"2019-02-21T17:13:05.000Z","dependencies_parsed_at":"2022-09-11T10:11:57.114Z","dependency_job_id":null,"html_url":"https://github.com/pierreburel/sass-direction","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pierreburel%2Fsass-direction","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pierreburel%2Fsass-direction/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pierreburel%2Fsass-direction/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pierreburel%2Fsass-direction/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pierreburel","download_url":"https://codeload.github.com/pierreburel/sass-direction/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":229810467,"owners_count":18127621,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-15T11:10:05.488Z","updated_at":"2024-12-15T11:10:06.013Z","avatar_url":"https://github.com/pierreburel.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Direction\n\nSass mixins and functions to help creating bi-directional stylesheets.  \n\nCompatibility: [Sass](https://github.com/sass/sass) and [LibSass](https://github.com/sass/libsass)\n\n---\n\n## Install\n\nDownload [`_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/) :\n\n### npm\n\n```\nnpm install sass-direction\n```\n\n### Bower\n\n```\nbower install sass-direction\n```\n\n---\n\n## Usage\n\n### `app.scss`\n\n```scss\n@import \"direction\";\n\nh1 {\n  text-align: direction(left);\n  margin-#{direction(right)}: 1em;\n  padding: direction-sides(1em 2em 3em 4em);\n  border: direction-corners(1em 2em 3em 4em);\n  font-size: direction-if(ltr, 1em, 2em);\n  line-height: direction-if(rtl, 2);\n\n  @include direction-if(ltr) {\n    \u0026::before {\n      content: \"left to right\";\n    }\n  }\n\n  @include direction-if(rtl) {\n    \u0026::after {\n      content: \"right to left\";\n    }\n  }\n\n  direction: direction(rtl);\n\n  \u0026 \u003e span {\n    direction: direction(ltr);\n  }\n}\n```\n\n### `app-rtl.scss`\n\n```scss\n$direction: rtl;\n@import \"app\";\n```\n\n---\n\n## Result\n\n### `app.css`\n\n```css\nh1 {\n  text-align: left;\n  margin-right: 1em;\n  padding: 1em 2em 3em 4em;\n  border: 1em 2em 3em 4em;\n  font-size: 1em;\n  direction: rtl;\n}\nh1::before {\n  content: \"left to right\";\n}\nh1 \u003e span {\n  direction: ltr;\n}\n\n```\n\n### `app-rtl.css`\n\n```css\nh1 {\n  text-align: right;\n  margin-left: 1em;\n  padding: 1em 4em 3em 2em;\n  border: 2em 1em 4em 3em;\n  font-size: 2em;\n  line-height: 2;\n  direction: ltr;\n}\nh1::after {\n  content: \"right to left\";\n}\nh1 \u003e span {\n  direction: rtl;\n}\n```\n\n---\n\n## Aliases\n\n- Function `direction-ltr($if, $else)`: `direction-if(ltr, $if, $else)`\n- Function `direction-rtl($if, $else)`: `direction-if(rtl, $if, $else)`\n- Mixin `direction-ltr`: `direction-if(ltr)`\n- Mixin `direction-rtl`: `direction-if(rtl)`\n\n---\n\n## Credits\n\nHugely based on [Tyson Matanich](http://matanich.com)’s [idea](https://github.com/tysonmatanich/directional-scss).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpierreburel%2Fsass-direction","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpierreburel%2Fsass-direction","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpierreburel%2Fsass-direction/lists"}