Dashboard Hero
  • Scope
  • Introduction
    • Meet and greet
    • Requirements(tech)
    • Requirements(user)
  • Setting up
    • Developing locally
    • Deploying
  • Basics
    • Scss
    • Javascript
    • Svelte framework
    • vs React vs Angular vs vue.js
    • Rollup(and rollup.config.js)
    • NPM(and package.json)
  • Project structure
    • Overview
    • Git version
    • Folder version
  • Architecture
    • DRY vs WET programming
    • Basic
    • Extended
  • Components
    • Component lifecycle
    • Passing data between components
    • Buttons
    • Charts
    • Grids
    • Search bars
    • Other inputs
    • Dialogs
    • Dropdowns
    • Gauges
    • User management pages
  • Backend
    • Firebase cloud functions
  • Data sources
    • Firebase
    • MongoDB
    • *SQL sources
    • GraphQL
  • User management
    • Log in
    • Register
    • Forgot pass
    • Custom flows
    • Others
  • State control
    • Redux
    • MobX
    • Saga
  • Dashboard: a full project
    • Overview
    • Layout
    • Routing
    • Removing/adding pages
    • Deploying
  • Roadmap/tutorial
    • Introduction - building your own app
    • 1. UI - HTML&CSS
    • 2. Data sources(+testing)
    • 3. Defining and using existing components
    • 4. User management
    • 5. Go live!
  • Troubleshooting
    • Can't run the project
Powered by GitBook
On this page

Was this helpful?

  1. Basics

Scss

Sass is a preprocessor. It transforms an arbitrary text file into CSS.

It lets you use features that don't exist in CSS yet like variables, nesting, mixins, inheritance and others.

Dashboard Hero values simplicity over everything else - our philosophy is that everything should be obvious.

We've completely decoupled building from tinkering with Scss. If you modify the Scss file in your /src folder, you will need to generate the CSS files yourself and overwrite what currently resides in /public folder. Here's how:

Install the sass processor.

npm i sass

The scss file resides in src/common/assets/styles/index.scss

So, run sass <scss-file-path>. Rename the resulting file to global.css and copy over the result to /public.

PreviousDeployingNextJavascript

Last updated 5 years ago

Was this helpful?