title: How to access SCSS/SASS variables in Angular Components
body: <p>I have to find a way to access SCSS variables (and its values) within the HTML of my Angular5 components and I hope someone can help me with this.  </p>
  
  <p>In my <strong>variables.scss</strong> I've some variables, for example:</p>
  
  <pre><code>...
  $primary-1: #cccccc;
  $primary-2: #666666;
  $primary-3: #000000;
  ...
  </code></pre>
  
  <p>Let's say my color palette consists of these colors.</p>
  
  <p>I also created some Angular components, for reusing tables, charts et cetera.<br>
  These components make use of ng2-charts/Chart.js. One of them is the LineChartComponent, which I would use to clarify my problem.</p>
  
  <pre><code>...
  &lt;app-line-chart 
      height="500" 
      [hexColors]="['#ccccccc', '#666666','#000000']" 
      [datasetLabels]="..." 
      [datasets]="..."
      [axisLabels]="..."&gt;&lt;/app-line-chart&gt;
  ...
  </code></pre>
  
  <p>As you can see I can set some hexColors. These will be translated to RGBA colors within the LineChartComponent. </p>
  
  <p><strong>But now...</strong> Let's say my palette of colors is changing.<br>
  I then have to change my colors within the <strong>variables.scss</strong> but also in all places where these colors are passed through the different components.  </p>
  
  <p>Until now I haven't found a way to access the variables within my components. I thought about creating a global typescript file where these colors are also defined, so I only have to edit two places and I get something like this:  </p>
  
  <p><strong>variables.scss</strong>  </p>
  
  <pre><code>...
  $primary-1: #cccccc;
  $primary-2: #666666;
  $primary-3: #000000;
  ...
  </code></pre>
  
  <p><strong>color-variables.ts</strong>  </p>
  
  <pre><code>export const COLORS = Object.freeze({ 
      primary1: '#cccccc',
      primary2: '#666666',
      primary3: '#000000'
  });
  </code></pre>
  
  <p>Then set the global variable within the components where I do need colors.  </p>
  
  <p><strong>example.component.ts</strong>  </p>
  
  <pre><code>import {COLORS} from '../globals/variables';
  ...
  @Component({...})
  export class SomeComponent {
      ...
      colors = COLORS;
      ...
  }
  </code></pre>
  
  <p>And then set the hexColors of my components to this:  </p>
  
  <pre><code>...
  &lt;app-line-chart 
      height="500" 
      [hexColors]="[colors.primary1, colors.primary2, colors.primary3]" 
      [datasetLabels]="..." 
      [datasets]="..." 
      [axisLabels]="..."&gt;&lt;/app-line-chart&gt;
  ...
  </code></pre>
  
  <p>But then again I have to modify two places when my color palette has changed.<br>
  This doesn't sound logical to me and I am convinced that there should be a better way of doing this, so I only have to edit one place when I want to replace a color.<br>
  Preferably by editing the SCSS, because the stylesheet is (in my opinion) responsible for style and coloring.  Is there anyone who can share his/her thoughts?</p>
  
  <p><strong>Edit</strong>: amit77309 mentioned that this may be a duplicate of <a href="https://stackoverflow.com/questions/40418804/access-sass-values-colors-from-variables-scss-in-typescript-angular2-ionic2">access SASS values ($colors from variables.scss) in Typescript (Angular2 ionic2)
  </a>, but that solution does not seem to work.<br>
  I am not using ionic, but looking at the solution that might not be the problem. The custom properties are not listed within the property list of bodyStyles, so they cannot be accessed.</p>