CODEWITHSUNDEEP
angularjsjsoncordovaionic-frameworksass
AN11
AN11

Reputation: 324

Ionic - Using Javascript to define SASS variables

I am making a hybrid ionic phonegap app.I am using sass to define color variables.

As part of my app I need to be able to change the colors depending on what is defined in an external database.

I know how to connect to the server in my controllers to return Json data.

Is there anyway I could connect to the server using HTTP requests in my sass file?

So that it is possible for the app colors to change depending on what is saved in the database?

Any help is much appreciated.

Upvotes: 1

Views: 385

Answers (1)

Mark
Mark

Reputation: 2071

Short answer is no.

You should be converting your SCSS to CSS so you have whatever you set.

A way that you can achieve something similar is by utilising SCSS themes. How this works is to simply overwrite all your colour vars with different themes.

$black: #000;
$white: #fff;
$red: #e2061c;
$gray-light: #c9c8c8;
$gray: #838282;
$gray-dark: #333333;
$blue: #253652;

You could then use angular (or whatever framework you are using) to switch out the style sheet depending on which theme your users have chosen.

Angular - 

<link rel="stylesheet" type="text/css" ng-href="{{user.theme}}.css">

SCSS -

Folder structure

|- _scss/
|-|- _base/
|-|-|- _config.scss

|-|- _layouts/
|-|-|- _l-grid.scss
|-|-|- _l-default.scss

|-|- _modules/
|-|-|- _m-accordions.scss
|-|-|- _m-teasers.scss

|-|-_themes/
|-|-|- _light-theme/
|-|-|-|- light.scss

|-|- application.scss

This atrical goes into great detail on how to theme your applications

Upvotes: 0

Related Questions