![\"Guide](\"https:\/\/blog.logrocket.com\/wp-content\/uploads\/2021\/09\/using-sass-react-native-guide.png\")
\nSass, which stands for \u201cSyntactically Awesome Style Sheets,\u201d is a pre-processor that helps you write, structure, and organize CSS code. It\u2019s widely used today as an alternative to raw CSS for styling large web applications.<\/p>\n
In fact, many modern CSS frameworks and libraries like Bootstrap are also written in Sass. It allows developers to use variables, mixins, modules, partials, and operators in their CSS styles.<\/p>\n
While Sass is popularly coupled with frontend frameworks like React, you can also use it in your React Native projects. In this guide, I\u2019ll walk you through how you can configure and use Sass in your React Native app, but first, let\u2019s understand how Sass works.<\/p>\n
Sass is only a development time tool and not an extension to the CSS standard. This means that when you use webpack or a module bundler to build your code, it compiles your Sass files too. In the web ecosystem, your Sass files are saved with the You can also write raw CSS inside your Sass files because every valid CSS is also a valid SCSS. However, vice versa is not true.<\/p>\n Since React Native does not use CSS but style objects, your Sass files are also converted to React Native style objects under the hood.<\/p>\n This gives you an important advantage of writing raw CSS to style your React Native components. Your React Native project compiles your Sass files at runtime and converts them to regular JavaScript objects.<\/p>\n Now that you understand how Sass works, let\u2019s set it up inside our React Native project. For this purpose, we\u2019ll use the package react-native-sass-transformer.<\/p>\n The react-native-sass-transformer package allows us to easily configure, set up, and use Sass in any kind of React Native project. It also uses the package Let\u2019s start by creating a new React Native project:<\/p>\n You can install both the dependencies in your project by running the following command:<\/p>\n Once you have created the project along with the above dependencies, you need to make some additional configurational changes. In the root directory, add the following configurations to your If you\u2019re using Expo CLI, you\u2019ll need to explicitly create a Once the above changes are complete, you\u2019ll be able to use Sass in your Expo CLI or React Native CLI projects.<\/p>\n Inside the project, let\u2019s create a new file called The above styles are written in pure CSS, but since we\u2019re using the In order to use the above styles inside our Let\u2019s simply log the You\u2019ll notice that our CSS styles have been compiled to a plain JavaScript object:<\/p>\n We can now use these styles like any regular React Native styles object inside the The above should make our Thus, with Sass you can even write your styles in pure CSS. Let\u2019s refactor our above styles in SCSS now.<\/p>\n Sass allows us to create variables to store information that we can use in various style blocks. We can create a Sass variable using the Instead of hardcoding font sizes and colors, we can use variables to set different font sizes to texts, background colors to our containers, etc. Let\u2019s use the above variables to style the Let\u2019s use the above styles inside our We should now see our Great! Let\u2019s now look at how we can reuse our styles for different selectors in Sass using inheritance.<\/p>\n One of the most fruitful features of Sass is that it lets you reuse a set of styles amongst a number of selectors.<\/p>\n Much like how we can define variables for a style rule, we can define a placeholder class that contains a set of style rules using the To demonstrate, let\u2019s create some more variables inside our Now, let\u2019s define a placeholder class called We can now use the styles defined inside our For instance, let\u2019s say we want to render a white box on the screen. Instead of rewriting the above styles, we can inherit the above styles using the The above We should now see a white box on the screen as shown:<\/p>\n We can use And then use these classes inside our component:<\/p>\n The above should render three boxes of different colors as shown:<\/p>\n Awesome! Before we wrap this up, let\u2019s see how Sass allows us to do simple mathematical calculations while writing our styles using operators.<\/p>\n We can use operators to dynamically calculate height, width, padding, margin, and other such properties for our elements. Head back to the Let\u2019s also create an Let\u2019s alter the styles of our Also, let\u2019s update the styles of our If you noticed, we inherited the styles of two classes inside our I now want to create another box that is always going to have half the height and width of its parent box. Since we\u2019ll render this box inside the white box with the Let\u2019s also render this box inside our We should now see a box of half the dimensions of its parent box that lies inside it:<\/p>\n You can use all the operators like Sass can really simplify your CSS styles and rules with the help of variables and inheritance. It helps you to write more clean and concise styles for your React Native application. You can also reuse your Sass styles easily between your web and React Native projects.<\/p>\n There are other useful features that Sass provides<\/a> such as modules, mixins, functions, etc. You can check out the official docs to explore further<\/a>. Until next time!<\/p>\n<\/html>\n","protected":false},"excerpt":{"rendered":" Use Sass in your React Native projects to style your components using variables, inheritance, and operators.<\/p>\n","protected":false},"author":156415655,"featured_media":66254,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2147999,1],"tags":[2109707,2109731],"class_list":["post-66229","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev","category-uncategorized","tag-css","tag-react-native"],"yoast_head":"\n.scss<\/code> extension instead of the regular .css<\/code> extension. The SCSS stands for \u201cSassy CSS\u201d and provides a syntactic sugar that\u2019s similar to CSS.<\/p>\n![\"How](\"https:\/\/blog.logrocket.com\/wp-content\/uploads\/2021\/09\/how-sass-works-web-e1631297670118.png\")
<\/p>\n![\"How](\"https:\/\/blog.logrocket.com\/wp-content\/uploads\/2021\/09\/how-sass-works-react-native-e1631297722366.png\")
<\/p>\nSet up Sass in React Native<\/h2>\n
node-sass<\/code> as a dependency for providing the Node binding to Sass.<\/p>\nnpx react-native init rn-sass-app\n<\/pre>\n
npm install react-native-sass-transformer node-sass\n<\/pre>\n
metro.config.js<\/code> file:<\/p>\nconst { getDefaultConfig } = require(\"metro-config\");\n\nmodule.exports = (async () => {\n const {\n resolver: { sourceExts }\n } = await getDefaultConfig();\n return {\n transformer: {\n babelTransformerPath: require.resolve(\"react-native-sass-transformer\")\n },\n resolver: {\n sourceExts: [...sourceExts, \"scss\", \"sass\"]\n }\n };\n})();\n<\/pre>\nmetro.config.js<\/code> file inside the root directory. You will also need to tell Expo to load these configurations in the project by making the following adjustments to your app.json<\/code> file:<\/p>\n{\n \"expo\": {\n ...\n \"packagerOpts\": {\n \"config\": \"metro.config.js\",\n \"sourceExts\": [\"js\", \"jsx\", \"scss\", \"sass\"]\n }\n ...\n }\n}\n<\/pre>\nUsing Sass to style your React Native components<\/h2>\n
App.scss<\/code> where we can write the Sass styles for our <App\/><\/code> component. Inside the App.scss<\/code> file, let\u2019s add the following styles:<\/p>\n.container {\n display: flex;\n flex: 1;\n justify-content: center;\n align-items: center;\n background-color: #333;\n}\n<\/pre>\n.scss<\/code> extension, our app will be able to compile these styles. Note that we have used a class selector .container<\/code> to define our styles.<\/p>\nApp.js<\/code> file, we first need to import them:<\/p>\nimport Appstyles from '.\/App.scss';\n<\/pre>\n
Appstyles<\/code> object to the console to see what these styles look like:<\/p>\nconsole.log({Appstyles})\n<\/pre>\nObject {\n \"Appstyles\": Object {\n \"container\": Object {\n \"alignItems\": \"center\",\n \"backgroundColor\": \"#333\",\n \"display\": \"flex\",\n \"flexBasis\": 0,\n \"flexGrow\": 1,\n \"flexShrink\": 1,\n \"justifyContent\": \"center\",\n },\n },\n}\n<\/pre>\nApp.js<\/code> file:<\/p>\nexport default function App() {\n return (\n <View style={Appstyles.container}>\n <Text>Open up App.js to start working on your app!<\/Text>\n <\/View>\n );\n}\n<\/pre>\n<App\/><\/code> component look like this:<\/p>\n![\"Open](\"https:\/\/blog.logrocket.com\/wp-content\/uploads\/2021\/09\/open-app-js-app-component.jpeg\")
<\/p>\nUsing variables in Sass<\/h2>\n
$<\/code> prefix. Let\u2019s create the following variables inside our App.scss<\/code> file:<\/p>\n$background-color: #333;\n$primary-color: #d3d3d3;\n$font-large: 20px;\n<\/pre>\n
<View\/><\/code> and <Text\/><\/code> component:<\/p>\n$background-color: #333;\n$primary-color: #d3d3d3;\n$font-large: 20px;\n\n.container {\n display: flex;\n flex: 1;\n justify-content: center;\n align-items: center;\n background-color: $background-color;\n padding: 20px;\n}\n.text {\n font-weight: 700;\n text-align: center;\n font-size: $font-large;\n color: $primary-color;\n}\n<\/pre>\nApp.js<\/code> file:<\/p>\nexport default function App() {\n return (\n <View style={Appstyles.container}>\n <Text style={Appstyles.text}>Open up App.js to start working on your app!<\/Text>\n <\/View>\n );\n}\n<\/pre>\n<Text\/><\/code> component styled differently:<\/p>\n![\"Open](\"https:\/\/blog.logrocket.com\/wp-content\/uploads\/2021\/09\/open-app-js-text-style.jpeg\")
<\/p>\nUsing inheritance in Sass<\/h2>\n
%<\/code> symbol. We can then reuse these styles wherever we want.<\/p>\nApp.scss<\/code> file:<\/p>\n$light: #fff;\n$purple: purple;\n$blue-violet: blueviolet;\n$box-dimension: 100;\n<\/pre>\n
box-shared<\/code> that has the following styles:<\/p>\n%box-shared {\n box-shadow: 0 0 1px rgba(0, 0, 0, 0.25);\n border: 1px solid #ccc;\n padding: 10px;\n height: $box-dimension;\n width: $box-dimension;\n margin-bottom: 100px;\n}\n<\/pre>\nbox-shared<\/code> placeholder class in different selectors. The above styles can be used as the general styles we want to associate with any box<\/code> class we want to use.<\/p>\n@extend<\/code> keyword:<\/p>\n.boxWhite {\n @extend %box-shared;\n background-color: $light;\n}\n<\/pre>\n.boxWhite<\/code> class will contain all the styles defined in box-shared<\/code> class. Let\u2019s render a simple <View\/><\/code> component to display the above styles:<\/p>\nexport default function App() {\n return (\n <View style={Appstyles.container}>\n <View style={Appstyles.boxWhite}>\n <\/View>\n <\/View>\n );\n}\n<\/pre>\n![\"White](\"https:\/\/blog.logrocket.com\/wp-content\/uploads\/2021\/09\/white-box-demo-app.jpeg\")
<\/p>\nextend<\/code> or inheritance if we want to add similar UI elements that can reuse some common styles. For instance, we can create styles for more boxes of different colors as shown:<\/p>\n.boxPurple {\n @extend %box-shared;\n background-color: $purple;\n}\n.boxBlueViolet {\n @extend %box-shared;\n background-color: $blue-violet;\n}\n<\/pre>\nexport default function App() {\n return (\n <View style={Appstyles.container}>\n <View style={Appstyles.boxWhite}\/>\n <View style={Appstyles.boxPurple}\/>\n <View style={Appstyles.boxBlueViolet}\/>\n <\/View>\n );\n}\n<\/pre>\n![\"Color](\"https:\/\/blog.logrocket.com\/wp-content\/uploads\/2021\/09\/color-boxes-demo-app.jpeg\")
<\/p>\nUsing operators in Sass<\/h2>\n
App.scss<\/code> file and create another variable:<\/p>\n$box-dimension-lg: 250;\n<\/pre>\n
extend<\/code> class that contains our flexbox styles:<\/p>\n%flex-box {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n<\/pre>\nbox-shared<\/code> placeholder class as shown below:<\/p>\n%box-shared {\n box-shadow: 0 0 1px rgba(0, 0, 0, 0.25);\n border: 1px solid #ccc;\n padding: 10px;\n height: $box-dimension-lg;\n width: $box-dimension-lg;\n margin-bottom: 100px;\n border-radius: 10px;\n}\n<\/pre>\nboxWhite<\/code> class we used in the previous section:<\/p>\n.boxWhite {\n @extend %flex-box;\n @extend %box-shared;\n background-color: $light;\n}\n<\/pre>\nboxWhite<\/code> class, which is perfectly fine.<\/p>\nboxWhite<\/code> class, we can use the $box-dimension-lg<\/code> to calculate the height and width of the box:<\/p>\n.boxInside {\n @extend %box-shared;\n background-color: lightblue;\n height: ($box-dimension-lg\/2);\n width: ($box-dimension-lg\/2);\n}\n<\/pre>\nApp.js<\/code> file:<\/p>\nexport default function App() {\n return (\n <View style={Appstyles.container}>\n <View style={Appstyles.boxWhite}>\n <View style={Appstyles.boxInside}\/>\n <\/View>\n <\/View>\n );\n}\n<\/pre>\n![\"Box](\"https:\/\/blog.logrocket.com\/wp-content\/uploads\/2021\/09\/box-in-box-demo-app.jpeg\")
<\/p>\n+<\/code>, -<\/code>, *<\/code>, \/<\/code>, and %<\/code> for calculating the values inside your rules.<\/p>\nConclusion<\/h2>\n