Using Sass

To build custom sass file requires compass

// sass/app.scss
@import url( '//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,800italic,300,400,600,800');
@import url( '//fonts.googleapis.com/css?family=Trirong:300italic,400italic,600italic,800italic,300,400,600,800');
@import url( '//fonts.googleapis.com/css?family=Source+Code+Pro');
@import url( '//fonts.googleapis.com/css?family=Lato:300,400');
@import "colors";

// Override theme variables here
$primary   : #582758;
$secondary : #8F1C56;

@import "framework";

# sass/config.rb
require 'compass/import-once/activate'

http_dir="/"
css_dir = "/css"
sass_dir = "/sass"
images_dir = "/images"
javascripts_dir = "/src"
fonts_dir = "/fonts"

add_import_path "node_modules/aurelia-ui-framework/sass/"

output_style = :compressed

relative_assets = true

line_comments = false

gulp sass

Sass Variables

• Theming Colors

  • primary
  • secondary
  • info
  • danger
  • success
  • warning
  • light
  • dark
  • muted
  • base-bg: Default page background
  • base-text: Default text color

• Typography

  • base-font-family-serif
  • base-font-family-input
  • base-font-family-fixed
  • base-font-family: Default font family
  • base-font-size: Default font size
  • link-text: Default link color
  • link-hover-text: Default link hover color

• Application Theme

  • app-header-bg
  • app-header-text
  • app-header-link-text
  • app-header-link-hover-text
  • app-footer-bg
  • app-footer-text
  • page-title-bg
  • page-title-text
  • sidebar-width
  • drawer-width

All sass variable see here