Customizing an Oracle JET Theme Using Sass

You can use the Oracle JET SCSS files to customize themes. At build time, Oracle JET uses Sass to convert the alta*/oj.alta*.scss aggregating files to CSS. You can also use Sass to generate your own themes.

To customize an Oracle JET theme using Sass:
  1. Install Sass and Ruby as needed. For details, see http://sass-lang.com/install. Once you have Ruby, type the following command to install Sass:
    gem install sass
    

    If you normally use a proxy to connect to the internet, issue the following command instead:

    gem install sass --http-proxy proxyurl
    
  2. Create a custom settings file using the naming convention:_filename.scss. You can either:
    • Create an empty file and add the variables you need, or

    • Copy the theme's settings file to a new file

    For example, create an empty file named _myCustomSettings.scss, or copy _oj.alta.settings.scss into a file named _myCustomSettings.scss.

  3. In your custom settings file, set variables as needed for your application. If you copied the settings file, remove the comment from the variable before setting it.

    For example, to turn off tag selectors, remove the comment from the $allowTagSelectors variable if needed and set it to false.

    $allowTagSelectors: false;
    

    For information about Oracle JET's use of tag selectors, see Using Tag Selectors or Classes.

  4. Create partial override files to customize your CSS as needed. Be sure to follow the underscore naming convention used by Sass and Oracle JET for your partials.

    The example below shows a partial override file named _myCustomProgressBar.scss that overrides the height and width defaults for the Oracle JET ojProgressbar component.

    .oj-progressbar {
      // override the JET defaults for height and width
      height: 20px;
      width: 400px;         
    }
    
  5. Create an aggregating SCSS file and import the partial override files.

    The example below shows a custom aggregating file that imports a custom settings file, the Alta files, and the custom overrides.

    //IMPORT CUSTOM SETTINGS
    @import "myCustomSettings";
     
    //IMPORT THE ALTA FILES
    @import "../oj/alta/oj-alta";
     
    //IMPORT CUSTOM FILES (after alta files)
    @import
      "myCustomProgressBar",
      [... etc. all the custom overrides ...];
    
  6. To control what content gets included in your CSS, see Controlling CSS Content.