Angular-CLI: How to import SCSS variables into JavaScript

Question

I'm writing an Angular 2 component to create a custom grid layout. The SCSS variables are in a SCSS file called _variables.scss. I'd like to get access to these variables in JavaScript. I noted a few npm tools, such as scss_to_json, but have no idea how to implement that in an Angular2 project.

$tile-margin: 20px;
$tile-width: 200px;
$tile-height: 250px;

ovangle · Accepted Answer · 2016-12-05 09:05:58Z

1

It's quite easy to write a service which would load the raw scss file using Http.get, then pass the results through a regex which matches the variable definitions, but...

But honestly, I think you're barking up the wrong tree and need to rethink the design. Why do you want to apply the styles manually if you've already got the scss variables (and the CSS classes that use them) compiled and available in the client?

Why can't you define your own CSS classes which map to your grid system and then setting up a binding to the host elements class in order to bind them? It's a bit ugly, since ngClass is a directive, so can't be bound on a host element, but it's doable.

Taking the bootstrap col-<sw>-<colspan> format as an example:

 export type ScreenWidth = 'xs' | 'sm' | 'md' | 'lg';

 @Directive({
   selector: `div[gridColumn]`,
   host: {
     '[attr.class]': 'hostClasses.join(' ')'
   },
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class GridColumn {
   @Input('gridColumn') screenWidth: ScreenWidth = 'md';
   @Input() colSpan: number = 1;

   constructor(private _host: ElementRef) {}

   get hostClasses(): Array<string> {
     let existingClasses = this._host.nativeElement.classList
            .filter(cls => !/^col-/.test(cls)
     return [
        ...existingClasses,
        `col-${this.screenWidth}-${colSpan}`
     ];
   }
 }

Usage would then be:

 <div gridColumn="xs" [colSpan]="4"></div>

Which honestly, is about the same readability as <div class="col-xs-4"></div> anyway, so why bother?

edited Dec 5, 2016 at 9:05

answered Dec 5, 2016 at 8:39

ovangle

2,0311 gold badge17 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

sparkyspider Over a year ago

Thank you for your comment. I'm using a very non-standard grid. Not all tiles are 1x1, so I'm adding CSS classes such as left-2 and top-3 to apply to the tile elements to arrange them in an order that fits best. If I ever decide to change the tile width or margin width, I don't want to have the code in multiple places.

sparkyspider Over a year ago

Please also note that the raw SCSS files are also bundled out by WebPack

ovangle Over a year ago

Ah I see. I'd still got with defining my own SCSS classes and dynamically binding them to the host using a directive though. Then you not only have all your code in the one place, but you also have all your styles in stylesheets, where they belong. Also, you'll be able to apply your existing media queries to them, which is always useful when defining a grid.

Collectives™ on Stack Overflow

Angular-CLI: How to import SCSS variables into JavaScript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related