CSS Accessing Component Variables in SCSS Files Angular 2

In this article, we will explain how to access component variables in SCSS files in Angular 2.

Read more: CSS Tutorial

What is SCSS? SCSS (Sassy) is an extension of CSS that provides additional features such as variables, nested rules, and mixins. It’s a CSS preprocessor that helps developers write and maintain CSS code more efficiently.

Using component variables in Angular 2

In Angular 2, we can define various variables within our components, including colors, sizes, and fonts. These variables can then be used in the component’s template and styles.

Defining Component Variables

To define component variables, we can use the styleUrls attribute within the component’s @Component decorator to import an external SCSS file. In this SCSS file, we can define our component variables.

@Component({
selector: 'app-component',
templateUrl: './component.html',
styleUrls: ['./component.scss']
}) 

In the code above, we import an external stylesheet file called component.scss. In this SCSS file, we can define our component variables.

Using Component Variables

Using the $ Notation

To use component variables in SCSS files, we can define and reference the variable using the $ notation. Below is an example showing how to define a color variable and use it in a stylesheet.

// component.scss 
<span class="katex math inline">primary-color: #007bff; 

button {
background-color:</span>primary-color;
color: white; 
} 

In the example above, we define a variable called $primary-color and set it to blue. We then use this variable in the button’s stylesheet to set the button’s background color and text color.

Using Angular CSS Variables

In addition to defining variables using the $ notation, we can also use Angular CSS variables to access component variables. In a component’s SCSS file, we can reference component variables using the var() function.

// component.scss 
:root { 
--primary-color: #007bff; 
} 

button { background-color: var(--primary-color);
color: white;
}

In the example above, we use the :root selector to define a CSS variable called --primary-color and set it to blue. We then reference this CSS variable in the button’s style using var(--primary-color).

Example Description

Below is a more complete example showing how to access component variables in SCSS files in Angular 2.

// component.ts 
import { Component } from '@angular/core'; 

@Component({ 
selector: 'app-component', 
templateUrl: './component.html', 
styleUrls: ['./component.scss'] 
}) 
export class Component { 
primaryColor = '#007bff'; 
} 

<!-- component.html --> 
<button class="primary-button">Primary Button</button> 

// component.scss 
@import '~@angular/material/theming'; 

@mixin primary-button-theme(<span class="katex math inline">color) { 
.primary-button { 
background-color: mat-color(</span>color); 
color: white; 
} 
} 

@include primary-button-theme($primaryColor); 

In the example above, we first define a mixin named primary-button-theme in the component’s SCSS file. This mixin accepts a color parameter. Then, we defined styles for the .primary-button class in the primary-button-theme mixin, used the mat-color() function to set the background color, and set the text color to white.

In the component’s template, we used a button with the .primary-button class and defined the primaryColor variable in the component class, setting it to blue.

Finally, in the component’s SCSS file, we included the primary-button-theme mixin using the @include directive, passing it the primaryColor variable as the color parameter.

This way, when we render the component in the browser, the button will have the blue background and white text styles we defined.

Summary

By using SCSS files and component variables, we can more easily manage and reuse styles and improve the maintainability of our CSS code. In this article, we learned how to access component variables in SCSS files in Angular 2 and demonstrated their use with examples. I hope this information helps you better understand and use SCSS and component variables.