From the course: SharePoint Framework for Developers: 1 Understanding the Toolchain

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Sass variables

Sass variables

From the course: SharePoint Framework for Developers: 1 Understanding the Toolchain

Start my 1-month free trial

Sass variables

“

- [Instructor] With our project template set up now let's start looking at Sass concepts one by one. The first concept I'd like to show you is the concept of variables. So, in most languages we're used to the concept of variables. They allow us to hold reusable bits of values that we can maintain at one place and reference at multiple places. CSS doesn't have any such concept. So let's put some HTML here and let's say that, theoretically, I want this header one and the class container to have the same color. How would you do this in CSS? Well, you would literally have to repeat the color twice. In Sass you don't have to do that. So I'm going to remove all the Sass code that I had in here and declare a variable called mainColor and let's give it a reddish hue like this and now I can say h1 color $mainColor. So that's the color for h1, div.container, color $mainColor. So just by doing this little, simple code snippet here, I was able to reference the mainColor at two different…

Contents