How to use Fiori Fundamentals SCSS with Angular
The following step-by-step guide will covers how to install Fiori Fundamentals in your angular project, import SCSS in your workflow and explain some built-in functions.
Table of contents
- Prerequisites and Requirements
- Configuring Angular Project to use SCSS
- Installing Fiori Fundamentals via NPM
- Configuring and Importing SCSS source
- Selective Imports
- Core Functions and Mixins
Prerequisites and Requirements
- Familiarity using terminal or command prompt
- This guides assumes that the initial setup was done using Angular 4 or higher and initial setup was doing using Angular CLI
- NPM is installed globally
Configuring Angular Project to use SCSS
Angular CLI does not configure the project to process SCSS files by default. Instead it is set to a CSS file located at the root of
src folder. We recommend that you use keep all your SCSS files in one place under
To set the angular project to use SCSS:
ng set defaults.styleExt scssin command prompt or terminal at project root.
.angular-cli.jsonlocated at the project root and change the styles configuration to
"styles": [ "scss/app.scss"]
Verify that the
styleExtis set to
Create a folder named
srcfolder and a also create the main SCSS file named
Remove the src/styles.css file. It will not be used.
The Basic SCSS configuration is now complete.
Installing Fiori Fundamentals via NPM
npm install fiori-fundamentals --save-dev. This will install the package as a dev dependency.
- Verify the installation was successful by typing
npm list fiori-fundamentals
Fiori Fundamentals installation is now complete
Configuring and Importing SCSS source
- Add the following line of code to define the icons path:
- Add the following line of code to define the fonts path:
- Add the following line of code to import SCSS source file:
Importing Fiori Fundamentals SCSS is now complete
Note: In order to render the icons and fonts correctly, you need to define the
At this point, the contents of your
scss/app.scss should look like this:
You can continue to build out your SCSS workflow based on your project needs.
Fiori Fundamentals is divided into several functional pieces. You may choose to import key features selectively to reduce the SCSS overhead in your project.
Here is an overview of the SCSS structure -
all.scss: Includes all components.
components.scss: SCSS source for each components. The components are decoupled with little or no dependency on other components.
core.scss: The main purpose of core is elements and forms. It’s like the reset and foundation.
helpers.scss: Includes various helper functions.
icons.scss: Fiori Fundamentals’s custom icon library.
/theme/fundamental.scss: Includes fonts.
layout.scss: App level layout components such as top Overview of Core features bar, side nav, containers, panels, etc.
You can choose to selectively import parts of the library that best fits the need of your project. Please note that components, icons, layout and helpers have a dependency on
settings.scss should always be included in case if you are not importing
all.scss. For fonts, make sure you are importing
For selective import your
app.scss content should look like this:
If you are writing angular components using Fiori Fundamentals toolkit, you will need to import the following in your component’s scss file:
Core Functions and Mixins
Fiori Fundamentals comes with some very useful built-in functions and mixins to help maintain consistency and quality of your SCSS source files. We recommend that you utilize these functions instead of hard coding colors, spacing, fonts, etc. in your code to keep CSS low specificity. Utilizing functions also helps in retaining the integrity of the theming options and makes it easy to switch between different themes such as a high-contrast theme for accessibility or a brand specific theme.
Note: In order to use the functions and mixins, please ensure that you are importing the functions SCSS files
If you have a need to apply a color to any of your scss/css class, you can use the built-in color function -
You can refer to the colors page for the complete list of the available color options.
The space function can be utilized for heights, padding, margins and other positioning.
The design system defines a variety of spacing increments that are commonly used throughout and all of those are available using the mixin by passing the key. However, there are four units that will be used most often when building and extending components. These are accessible with special keys to apply consistent padding and margins.
The following spacing options are available -
You can utilize the type mixin to render size, line height and weight -