RTS scss suggestion

rts.scss

// Section for variables

// These could be overridden through color schemes, and would be recognized 
// at compile time.  For this reason the defaults should probably be in a 
// separate file so we don't overwrite our overrides here. :)
$mainButtonColor: orange;  // these actual colors are just examples
$backgroundColor: black;

// Section for mixins
@mixin button-gradient($startColor, $endColor) {
 // put common button gradient code here
}

@mixin rounded-box {
  
}

// Common style container
body {
  
  .navbar {
    .logo {
      
    }
    
    .buttons {
      .back {
        
      }
      .start-over {
        
      }
    }
  }
  
  // Common settings shared by all screens
  div.screen {
    
    // Settings for the featured listing screen
    &.featured-listings {
      
    }
    
  }
  
  .button {
    &.main {
      
    }
    &.secondary {
      
    }
    &.back {
      
    }
    &.start-over {
      
    }
  }
  
  
}

// Settings specific to landscape
body[data-orientation="landscape"]
{
  // Settings specific to widescreen
  &[data-resolution="1920x1080"]
  {
    
  }  
  
  // Settings specific to 1280x1024
  &[data-resolution="1280x1024"]
  {
    
  }  
}

// Settings specific to portrait
body[data-orientation="portrait"]
{
  // Settings specific to 1080x1920
  &[data-resolution="1080x1920"]
  {
    
  }
}