Setting up SCSS variables
By Termporn Sirichindakul and Tessa Holland 2 April 2020 Techies
Set up or override variables in your target project. How to change change colours and fonts.
Components, elements and behaviours all come with boilerplate SCSS, which you can easily override to suit your custom styling needs.
Harmony includes an
abstracts folder which sets up these default styles, as outlined in Harmony Abstracts, including custom colours, typography and icons. To override Harmony with your own styles, you simply turn on the relevant protected region and make your changes.
We will be adding these custom styles to the Codebots Zoo Project. If you want to follow along, you can download the project from the public git repository. Our goal is to style the Zoo application to match the following image:
Variables are provided in the templated SCSS files that are found in the
abstracts folder. We can change our variables by turning on the protected region and customising our values.
clientside/src/app/lib/scss/abstracts/. This is your project's abstract folder, where we will add our custom values. You should see the following files:
1. Setting up your colours
Let's start with our colour scheme. The final application will use a blue and green motif.
In one tab, open the
colors.scss file in your project's abstracts folder. You can see it contains multiple colour variables that you can choose to override.
$color-brand-01 to match the Codebots Zoo style.
In your project's
colors.scss file, turn on the protected region:
[Set colours, accent colours, and greyscale colours], and replace the following variables with the colours provided.
//Primary and theme colour $color-primary: rgb(36, 163, 104); //green $color-secondary: rgb(0, 100, 70); //dark green $color-brand-01: rgb(34, 34, 34); //black
It is best practice to use the
rbg format. This allows you to easily switch to
rgba, making it easier to modify opacity.
If you want to change more colours, simply change the variable names that are provided such as
2. Setting up typography
Changing the typography follows the same principles as changing your colours. Simply turn on the protected region in your
typography.scss, and override the variables listed in the typography file.
In this situation you will have to turn on two protected regions. The first one is to import your custom font family. Whereas the second protected region will allow you to assign the variable font to the correct font family.
Import Google fonts to use them in your project. Turn on the protected region
[Change font imports here] and add the following code:
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,400i,700&display=swap'); @import url('https://fonts.googleapis.com/css?family=Poppins:300,400,400i,600,700&display=swap');
Now you can set Patrick Hand as the body font, and Mansalva as the heading font, increase the base font size to 18px and set the base font weight as 400. Turn on the protected region
[Change font family here] and replace the given variables to the following:
$body-font-family: 'Patrick Hand'; $heading-font-family: 'Mansalva'; $base-font-size: 18px; $base-font-weight: 400;
You can also extend Harmony by adding your own variables, mixins and functions.
There are situations where you want to use harmony variables but add more variables to the list.
The Harmony variables file includes some default spacing variables. However, you may want to add your own additional options.
Go to your target
variables.scss folder and turn on the protected region
[Change transition times to values here]. Inside this protected region, let's add our own animation time variables.
$super-slow-animation-time: 5s; $super-fast-animation-time: 0.1s;
Harmony includes some useful mixins, but you can also add your own. Like appending to variables, turn on the protected region in your project's
mixins.scss file, and add any mixins you find useful to your application.
By default, Codebots projects are packaged with our Lightning Icons set. However, you can choose to replace the Lightning Icons and use your own icon-font.