{"id":21121607,"url":"https://github.com/nativesass/nativesass","last_synced_at":"2026-02-24T20:39:05.458Z","repository":{"id":263188261,"uuid":"885875376","full_name":"nativesass/nativesass","owner":"nativesass","description":"A React Native library that lets you create StyleSheets with Sass- and CSS-like functionality, but the React Native way.","archived":false,"fork":false,"pushed_at":"2025-03-30T17:17:22.000Z","size":938,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-01-13T22:33:10.980Z","etag":null,"topics":["android","css","frontend","ios","javascript","javascript-library","mobile","native","react","react-native","sass","scss","stylesheets","typescript","universal"],"latest_commit_sha":null,"homepage":"https://nativesass.github.io","language":"TypeScript","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/nativesass.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":["filipe-2"]}},"created_at":"2024-11-09T16:14:44.000Z","updated_at":"2024-11-26T16:47:39.000Z","dependencies_parsed_at":"2025-01-21T05:24:14.744Z","dependency_job_id":"b06fedb8-8d74-43f7-b8ff-385b6c70b246","html_url":"https://github.com/nativesass/nativesass","commit_stats":null,"previous_names":["filipe-2/native-sass","nativesass/native-sass"],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/nativesass/nativesass","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativesass%2Fnativesass","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativesass%2Fnativesass/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativesass%2Fnativesass/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativesass%2Fnativesass/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nativesass","download_url":"https://codeload.github.com/nativesass/nativesass/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativesass%2Fnativesass/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29799211,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-24T19:56:48.334Z","status":"ssl_error","status_checked_at":"2026-02-24T19:55:43.372Z","response_time":75,"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":["android","css","frontend","ios","javascript","javascript-library","mobile","native","react","react-native","sass","scss","stylesheets","typescript","universal"],"created_at":"2024-11-20T03:52:55.690Z","updated_at":"2026-02-24T20:39:05.431Z","avatar_url":"https://github.com/nativesass.png","language":"TypeScript","funding_links":["https://github.com/sponsors/filipe-2"],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"./assets/nativesass-banner.png\" alt=\"NativeSass\"\u003e\n    \u003ch1\u003e\u003ca href=\"https://nativesass.github.io\"\u003eNativeSass\u003c/a\u003e\u003c/h1\u003e\n    \u003cp\u003e\u003cstrong\u003eSyntactically Awesome StyleSheets the Native Way\u003c/strong\u003e\u003cbr\u003e\n    Use Sass styling features with React Native\u003c/p\u003e\n\n[![NPM Version](https://img.shields.io/npm/v/native-sass?logo=npm\u0026logoColor=cb3837\u0026label=Version\u0026color=cc6699)](https://npmjs.com/package/native-sass)\n[![NPM Downloads](https://img.shields.io/npm/dw/native-sass?logo=npm\u0026logoColor=cb3837\u0026label=Downloads\u0026color=cc6699)](https://npmjs.com/package/native-sass)\n[![Github](https://img.shields.io/badge/License-MIT-cc6699)](https://github.com/filipe-2/native-sass/blob/main/LICENSE)\n[![runs-with-expo](https://img.shields.io/badge/Runs%20with%20Expo-cc6699.svg?logo=EXPO\u0026labelColor=fff\u0026logoColor=000)](https://expo.dev/client)\n[![runs-with-CLI](https://img.shields.io/badge/Runs%20with%20CLI-cc6699.svg?logo=React\u0026labelColor=555\u0026logoColor=61dbfb)](https://reactnative.dev/docs/getting-started-without-a-framework)\n\u003c/div\u003e\n\n\u003cbr\u003e\n\n## About\n\nA React Native library that lets you create StyleSheets with Sass- and CSS-like functionality, like nesting and shared styles. With this library, you can nest styles, use shared styles to apply properties to multiple style objects at once, and much more, without losing the default experience of creating StyleSheets the React Native way.\n\n## Installation\n\nTo use `native-sass` in your project, just run this command from your terminal if you're using `npm`:\n\n```bash\nnpm install native-sass\n```\n\nOr use the following if you're using `yarn`:\n\n```bash\nyarn add native-sass\n```\n\nNativeSass works with **both** the [React Native CLI](https://reactnative.dev/docs/getting-started-without-a-framework) and [Expo CLI](https://docs.expo.dev/more/expo-cli/), and the installation steps are the same.\n\n## Features\n\nThis section covers features included in this library, together with code snippets to exemplify. A separate documentation website will be available in the future.\n\n### Nesting\n\nConsider the following StyleSheet:\n\n```js\nimport { StyleSheet } from 'react-native';\n\nconst styles = StyleSheet.create({\n  // ...\n  dialogWrapper: {\n    padding: 20,\n    backgroundColor: 'white',\n    borderRadius: 8,\n    shadowColor: 'black',\n    shadowOpacity: 0.1,\n    shadowOffset: {\n      width: 0,\n      height: 2,\n    },\n    shadowRadius: 4,\n  },\n\n  dialogTitle: {\n    fontSize: 18,\n    fontWeight: 'bold',\n    color: '#333',\n    marginBottom: 10,\n  },\n\n  dialogMsg: {\n    fontSize: 16,\n    color: '#666',\n    marginBottom: 20,\n  },\n\n  dialogActionsBtn: {\n    paddingVertical: 10,\n    paddingHorizontal: 15,\n    backgroundColor: '#007BFF',\n    borderRadius: 4,\n  },\n\n  dialogActionsBtnText: {\n    fontSize: 14,\n    color: 'white',\n    fontWeight: 'bold',\n    textAlign: 'center',\n  },\n  // ...\n});\n```\n\nThis `StyleSheet` defines styles for a dialog component, with separate styles for its wrapper, title, message, and action buttons. However, we might want to nest those style rules for organization, maintainability, and to avoid redundancy (notice that we're repeating the name of the component in each object).\n\nTo use nesting, we can just pass our custom `StyleSheet` with nested objects to the `sassy` function from `native-sass` as follows:\n\n```js\nimport { StyleSheet } from 'react-native';\nimport { sassy } from 'native-sass';\n\nconst styles = StyleSheet.create(sassy({\n  // ...\n  dialog: {\n    wrapper: {\n      padding: 20,\n      backgroundColor: 'white',\n      borderRadius: 8,\n      shadowColor: 'black',\n      shadowOpacity: 0.1,\n      shadowOffset: {\n        width: 0,\n        height: 2,\n      },\n      shadowRadius: 4,\n    },\n\n    title: {\n      fontSize: 18,\n      fontWeight: 'bold',\n      color: '#333',\n      marginBottom: 10,\n    },\n\n    msg: {\n      fontSize: 16,\n      color: '#666',\n      marginBottom: 20,\n    },\n\n    actions: {\n      btn: {\n        paddingVertical: 10,\n        paddingHorizontal: 15,\n        backgroundColor: '#007BFF',\n        borderRadius: 4,\n\n        text: {\n          fontSize: 14,\n          color: 'white',\n          fontWeight: 'bold',\n          textAlign: 'center',\n        },\n      },\n    },\n  },\n  // ...\n}));\n```\n\nThis object passed to `sassy` will be flattened into the `StyleSheet` of the previous snippet. The nested keys are capitalized and concatenated with the parent keys, so `dialog.actions.btn.text` becomes `dialogActionsBtnText`. The nested styles are then merged in order to return the object that the `StyleSheet.create()` method expects.\n\nNotice that the amount of nesting is up to you to decide, while some degree of nesting helps organizing styles, too much nesting may cause confusion.\n\n### Shared values\n\nSuppose we have the following stylesheet:\n\n```javascript\nimport { StyleSheet } from 'react-native';\n\nconst styles = StyleSheet.create({\n  // ...\n  cards: {\n    width: 200,\n    minHeight: 200,\n    borderRadius: 25,\n    borderWidth: 2,\n    borderColor: 'red',\n    justifyContent: 'center',\n    alignItems: 'center',\n    gap: 8,\n    backgroundColor: 'black'\n  },\n\n  card: {\n    width: 50,\n    minHeight: 50,\n    borderWidth: 2,\n    borderColor: 'red',\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: 'pink'\n  },\n  // ...\n});\n```\n\nWe can recycle these shared styles as follows with the `sassy` function:\n\n```javascript\nimport { StyleSheet } from 'react-native';\nimport { sassy } from 'native-sass';\n\nconst styles = StyleSheet.create(sassy({\n  // ...\n  'cards, card': {\n    borderWidth: 2,\n    borderColor: 'red',\n    justifyContent: 'center',\n    alignItems: 'center'\n  },\n\n  cards: {\n    width: 200,\n    minHeight: 200,\n    borderRadius: 25,\n    gap: 8,\n    backgroundColor: 'black'\n  },\n\n  card: {\n    width: 50,\n    minHeight: 50,\n    backgroundColor: 'pink'\n  }\n  // ...\n}));\n```\n\nWe wrap the keys we want to apply the shared styles to with quotes and separate them with commas.\n\n### Shorthand properties\n\nIn NativeSass, shorthand properties help you define multiple related style values with a more concise syntax. These shorthand properties are designed to make your stylesheets more efficient and readable by consolidating related properties into a single declaration. If you're familiar with CSS, you’ll find these shorthand properties quite similar to how you would define them in a traditional stylesheet.\n\nThe following shorthand properties are available:\n\n1. **Margin \u0026 Padding**: These properties allow you to define all four directions (top, right, bottom, left) in a single declaration.  \n   - **Syntax**:  \n     - Single value: `margin: 10;` applies 10px to all sides.\n     - Two values: `margin: [10, 20];` applies 10px to top and bottom, and 20px to left and right.\n     - Three values: `margin: [10, 20, 30];` applies 10px to top, 20px to left and right, and 30px to bottom.\n     - Four values: `margin: [10, 20, 30, 40];` applies 10px to top, 20px to right, 30px to bottom, and 40px to left.\n    \n     These values can be any of the following types:\n     - **number**: A plain number (e.g., `10`).\n     - **'auto'**: The `auto` keyword, which can be used for flexible positioning.\n     - **Percentage**: A quoted percentage string (e.g., `'10%'`).\n     - **AnimatedNode**: If you're using React Native's animation API, this can be an animated value (e.g., `Animated.Value`).\n   \n2. **Inset**: This shorthand property combines the `top`, `right`, `bottom`, and `left` properties into a single value, making it easier to position elements in a box.\n   - **Syntax**:  \n     - Single value: `inset: 10;` applies 10px to all sides.\n     - Two values: `inset: [10, 20];` applies 10px to top and bottom, and 20px to left and right.\n     - Three values: `inset: [10, 20, 30];` applies 10px to top, 20px to left and right, and 30px to bottom.\n     - Four values: `inset: [10, 20, 30, 40];` applies 10px to top, 20px to right, 30px to bottom, and 40px to left.\n    \n     The values in `inset` are the same as the ones for `margin` and `padding`.\n\n3. **Gap**: This shorthand property defines the space between items in a flex container. It is similar to how you would define the `row-gap` and `column-gap` in CSS.\n   - **Syntax**:\n     - Single value: `gap: 10;` applies 10px for both row and column gaps.\n     - Two values: `gap: [10, 20];` applies 10px for row gap and 20px for column gap.\n\n     `gap` expects a number or an array of at least one and at most two numbers.\n\nHere's a concrete example of how you can use the shorthand properties in your project:\n\n```ts\nconst styles = StyleSheet.create(sassy({\n  container: {\n    flexDirection: 'row',\n    gap: 10,\n    margin: [10, 20],\n    padding: ['auto', '20%', 'auto', 10],  // Applies 'auto' to top padding, 20% right, 'auto' bottom, and 10px left\n  },\n  box: {\n    inset: ['auto', '20%'],  // 'auto' for top and bottom, 20% for left and right\n  }\n}));\n```\n\n## Built-in JS functionalities\n\nSome Sass functionalities, like mixins and maps, can be mimicked using built-in JS capabilities.\n\n### Mixins\n\nMixins can be applied to a style object using the built-in JavaScript spread operator `...`, so no need to use `sassy` (unless you're using other features of this library). Example:\n\n```javascript\nimport { StyleSheet } from 'react-native';\n\nconst calculateSpacing = (value) =\u003e ({\n  padding: value,\n  margin: value / 2\n});\n\nconst styles = StyleSheet.create({\n  card: {\n    color: 'white',\n    width: 50,\n    height: 50,\n    ...calculateSpacing(20),\n  }\n});\n```\n\n## 🌟 Did you like? Star the repo!\n\nIf you find this project helpful, inspiring, or just plain awesome, please give it a ⭐!  Your support encourages us and helps us keep the project growing more and more.\nTo star the repo, just click the \u003cstrong\u003eStar\u003c/strong\u003e button at the top of this page.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnativesass%2Fnativesass","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnativesass%2Fnativesass","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnativesass%2Fnativesass/lists"}