0

Im new to SASS and have a question, perhaps I'm not understanding correctly.

I have my base file (global.scss) and then several partial files. I'm working on a project currently and I want to define a few custom colors to use throughout (as in, I want to be able to define $color-navy as '#162a3e'). How can I set these variables and access them in my partial files and my base file?

I really hope this makes sense, I'll try and clarify more if needed.

Alix Përry
  • 449
  • 2
  • 7
  • 14

1 Answers1

3

First you make a file variables.scss with content like

$navy: #162a3e;

Next you just include this file at the beginning of each partial (and your global) as follows:

// Import this in any partial and in your global.scss
@import "variables";

// you have access to $navy ! yay
.saucy{
   color: $navy;
}

Technically you can get away with just importing it in your global.scss if and only if you are just compiling global.scss (and not the partials as individual stylesheets) but that's a bigger topic. It doesn't hurt really to just import variables.scss every time.

iamnotsam
  • 9,470
  • 7
  • 33
  • 30