{"id":17046506,"url":"https://github.com/peduarte/rtl-with-sass","last_synced_at":"2026-04-28T13:34:49.108Z","repository":{"id":69240299,"uuid":"9623308","full_name":"peduarte/rtl-with-sass","owner":"peduarte","description":"Right to Left Stylesheet with SASS - Abracadabra!","archived":false,"fork":false,"pushed_at":"2013-04-24T06:33:03.000Z","size":396,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-06-28T13:49:56.458Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/peduarte.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-04-23T13:09:40.000Z","updated_at":"2019-09-17T09:29:23.000Z","dependencies_parsed_at":"2023-02-21T17:30:29.413Z","dependency_job_id":null,"html_url":"https://github.com/peduarte/rtl-with-sass","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/peduarte/rtl-with-sass","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peduarte%2Frtl-with-sass","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peduarte%2Frtl-with-sass/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peduarte%2Frtl-with-sass/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peduarte%2Frtl-with-sass/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/peduarte","download_url":"https://codeload.github.com/peduarte/rtl-with-sass/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peduarte%2Frtl-with-sass/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32383424,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-28T11:25:28.583Z","status":"ssl_error","status_checked_at":"2026-04-28T11:25:05.435Z","response_time":56,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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-10-14T09:46:30.921Z","updated_at":"2026-04-28T13:34:49.080Z","avatar_url":"https://github.com/peduarte.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"#Simple RTL Stylesheet with SASS\n###A simple and powerful way to generate RTL Stysheet with SASS.\n\nOnce I had to convert a already built e-Commerce (Magento) site to Arabic. It took me 3 months modifying just the stylesheet, and it was probably the most annoying thing I've ever had to do.\u003cbr\u003e\u003cbr\u003e\nRecently I worked on a different website, but I got to do it from scratch, so I decided to use SASS, which I now do for pretty much every project, and this site also needed an Arabic version. That's when I decided to use the power of SASS to make my life easier, and this is the solution I used:\n\n###all.scss\n\t@import '_utils';\n\t@import '_global';\n\n###rtl.scss\n\t// This overrides our default value of $dir\n\t$dir: right;\n\n\t// This overrides our default value of $opDir\n\t$opDir: left;\n\n\t@import 'all';\n\n\tbody {\n\t\tdirection: rtl;\n\t}\n\n###_utils.scss\n\t// This sets our default direction\n\t$dir: left !default;\n\n\t// This sets our opposite default direction\n\t$opDir: right !default;\n\n\t@function invertValues($top, $right, $bottom, $left: $right) {\n\t    @if $left != null {\n\t        @if $dir == right {\n\t            @return $top $left $bottom $right;\n\t        }\n\t        @else {\n\t            @return $top $right $bottom $left;\n\t        }\n\t    }\n\t    @else {\n\t        @return $top $right $bottom $left;\n\t    }\n\t}\n\n###_global.scss\n\t// Sample usage example\n\tbody {\n\t\ttext-align: $dir;\n\t}\n\n\t// If you need to use the variable in the property...\n\theader {\n\t\tposition: absolute;\n\t\t#{$dir}: 100px; // equivalent of 'left: 100px;' or 'right: 100px;'\n\t}\n\n\t// Another example\n\t.offset {\n\t\tmargin-#{$opDir}: -100px;\n\t}\n\n####I also built a [demo](http://pedroduarte.me/rtl-with-sass) page where you can see it in action.\n\nFeel free to change this as it suits you best, there might well be a better solution out there.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeduarte%2Frtl-with-sass","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpeduarte%2Frtl-with-sass","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeduarte%2Frtl-with-sass/lists"}