We first starting using CSS back in chapter one, “Static HTML – Designing the landing page”. CSS is a great tool for taking control of the appearance of HTML elements and our web application. But it does have it’s limitations and can force us to repeat a lot of code making our code WET (Write Everything Twice) rather then DRY (Do Not Repeat Yourself).
Sass is a CSS extension language. It makes CSS more dynamic by allowing us to create variables, use nesting, and utilize looping, among other features. In the same way dynamic frameworks like ASP.Net Core and Angular can turn our static HTML into full fledge web applications, and TypeScript makes JavaScript easier to work with classes and strongly typed variables and objects, Sass acts as a superset of CSS.
Saas is a superset of CSS just as TypeScript is a superset of JavaScript. Any valid CSS file is also a valid Saas file. So you can learn as you go and extend your CSS files at your own pace.
In the next section we are going to configure our application to use Saas.
Configure Angular for Saas
Let’s quickly go through the steps to enable the use of Saas in our FredsCars Angular application.
Angular Schematics
Right now when we create a component with the ng generate component command, Angular creates a .css file for the component. We want to tell Angular to create a .scss file instead. We can do this in the schematics section of the angular.json file.
Open the angular.json file in the root of the FredsCars project and modify the schematics section with the following code.
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"FredsCars": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},Global Stylesheet
Since we are switching to scss files from css, we need to change the global stylesheet extension and update the references in the angular.json file.
In the FredsCars/src folder rename the styles.css file to styles.scss. Then in the angular.json file update both styles sections to include a reference to the global styles.scss file along with our Angular Material indigo-pink css theme.
The following is the complete angular.json file after the above modifications.
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"FredsCars": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/freds-cars",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": [
"zone.js"
],
"tsConfig": "tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "1mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"outputHashing": "all"
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"browserTarget": "FredsCars:build:production"
},
"development": {
"browserTarget": "FredsCars:build:development"
}
},
"defaultConfiguration": "development",
"options": {
"proxyConfig": "src/proxy.conf.js"
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "FredsCars:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"polyfills": [
"zone.js",
"zone.js/testing"
],
"tsConfig": "tsconfig.spec.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.scss"
],
"scripts": [],
"karmaConfig": "karma.conf.js"
}
}
}
}
}
}
Update existing components
The last thing we need to do is change the .css extensions to .scss for each existing component and update the references in each component’s styleUrls property of the Component decorator.
Make the following modifications to the code files shown below.
Update filename extensions
- In the FredsCars/src/app folder change the filename of app.component.css to app.component.scss
- In the FredsCars/src/app/nav-menu folder change the filename of nav-menu.component.css to nav-menu.component.scss
- In the FredsCars/src/app/vehicles folder change the filename of vehicles.component.css to vehicles.component.scss
- In the FredsCars/src/app/welcome folder change the filename of welcome.component.css to welcome.component.scss.
The image below shows the folder structure with the new filename extensions.
Update component style references
Lastly we just need to update the references to the stylesheets with the new scss extensions for each component as shown below. Make the following code modifications in bold blue in the specified files.
FredsCars/src/app/app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
}
FredsCars/src/app/nav-menu/nav-menu.component.scss
import { Component } from '@angular/core';
@Component({
selector: 'app-nav-menu',
templateUrl: './nav-menu.component.html',
styleUrls: ['./nav-menu.component.scss']
})
export class NavMenuComponent {
}FredsCars/src/app/vehicles/vehicles.component.ts
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Vehicle } from './vehicle';
import { environment } from '../../environments/environment';
@Component({
selector: 'app-vehicles',
templateUrl: './vehicles.component.html',
styleUrls: ['./vehicles.component.scss']
})
export class VehiclesComponent implements OnInit {
public vehicles?: Vehicle[];
// rest of codeFredsCars/src/app/welcome/welcome.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-welcome',
templateUrl: './welcome.component.html',
styleUrls: ['./welcome.component.scss']
})
export class WelcomeComponent {
}Test Saas
Let’s test that our Sass configuration is working by improving the look of the results table in the Vehicles component.
Open the vehicles.component.scss file in the FredsCars/src/app/vehicles folder and fill it with the contents below.
$lightBlue: #add8e6;
table {
border-spacing: 0px;
tr {
&:nth-child(even) {
background-color: $lightBlue;
}
}
td, th {
padding: 5px;
}
thead {
tr {
background-color: black;
th {
color: $lightBlue;
}
}
}
}
Restart the application in debug mode and the results should look similar to the following.
In the above screenshot we improved the look of the Vehicles results table using some Saas features. Let’s talk a little about what we did here.
First, we defined a variable called lightBlue since we use this color more than once in our custom styling of the table.
$lightBlue: #add8e6;Next we open a nesting structure for the table element and set the border spacing between table cells to 0 pixels.
table {
border-spacing: 0px;Next for all tr elements within the table element we set the background color to the color of our lightBlue variable if the tr element is an even numbered row.
$lightBlue: #add8e6;
table {
border-spacing: 0px;
tr {
&:nth-child(even) {
background-color: $lightBlue;
}
}Then for all td and th elements we set the padding to five pixels.
td, th {
padding: 5px;
}Finally, we target all child tr elements of the thead element setting the background of the header row to black and the contents of each header cell to the color of our lightBlue variable.
thead {
tr {
background-color: black;
th {
color: $lightBlue;
}
}
}What’s Next
In this module we configured our application to use Sass and tested it out by improving the look of our Vehicle results table. In the next module we will add a header and footer to the application and again use Saas to customize the appearance.