• http://sass-lang.com/documentation/file.SASS_REFERENCE.html

Sounds good? You bet.

We will first want to install a community plugin published by Todd Anglin:

npm install nativescript-dev-sass --save-dev

This plugin will set up a hook that will autocompile your SASS to CSS before building your app, so you don't need to worry about installing any other build tools.

We now want to organize our SASS source files in a particular way that will lend itself to ease of maintenance for not only shared styles between iOS and Android, but also easily allow platform-specific tweaks/overrides. The core theme installed by default (nativescript-theme-core) ships with a complete set of SASS source files, which are already organized to help you build your custom SASS on top of it easily.

Let's start by renaming the following:

• app.ios.css to app.ios.scss
• app.android.css to app.android.scss

Then for the contents of app.ios.scss:

@import 'style/common';
@import 'style/ios-overrides';

And for app.android.scss:

@import 'style/common';
@import 'style/android-overrides';

Okay, now, let's create that style folder with the various partial SASS import files to aid our setup, starting with the variables:

• style/_variables.scss:

// baseline theme colors
@import '~nativescript-theme-core/scss/dark';
// define our own variables or simply override those from the light set here...

There are actually many different skins/colors you could base your app's style sheets on. Check out the following section of the docs to see what's available: http://docs.nativescript.org/ui/theme#color-schemes. For our app, we will base our colors off the dark skin.

Now, create the common shared SASS file, which is where the bulk of the shared styles will go. In fact, we will take everything we had defined in the common.css file and place them here (thereafter, removing the common.css file we had before):

• style/_common.scss:

// customized variables
@import 'variables';
// theme standard rulesets
@import '~nativescript-theme-core/scss/index';
// all the styles we had created previously in common.css migrated into here:

.action-bar {
  background-color:#101B2E; // we can now convert this to a SASS variable
}

Page {
  background-color:#101B2E; // we can now convert this to a SASS variable
}

ListView { 
  separator-color: transparent; 
}

.track-name-float {
  color: RGBA(136, 135, 3, .5); // we can now convert this to a SASS variable
}

.slider.fader {
  background-color: #000; // we could actually use $black from core theme now
}

.list-group .muted {
  opacity:.2;
}

This uses our variables file we just created, which enables us to provide our own baseline variables from the core theme with our own custom tweaks to the color.

Now, create the Android override file in case we need it:

• styles/_android-overrides.scss:

@import '~nativescript-theme-core/scss/platforms/index.android';
// our custom Android overrides can go here if needed...

This imports the Android overrides from the core theme while still allowing us to apply our own custom overrides if needed.

We can now do the same for iOS:

• styles/_ios-overrides.scss:

@import '~nativescript-theme-core/scss/platforms/index.ios';
// our custom iOS overrides can go here if needed...

Lastly, we can now convert any component-specific .css files to .scss. We had one component using its own defined styles, record.component.css. Just rename it to .scss. The NativeScript SASS plugin will autocompile any nested .scss files it finds.

Add the following to your .gitignore file:

*.js
*.map
*.css
hooks
lib
node_modules
/platforms

Then, to hide .js and .css files in VS Code, we could do this:

{
  "files.exclude": {
    "**/app/**/*.css": {
      "when": "$(basename).scss"
    },
    "**/app/**/*.js": {
      "when": "$(basename).ts"
    },
    "**/hooks": true,
    "**/node_modules": true,
    "platforms": true
  }
}

Here's a screenshot of what the structure should look like now: