cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Native variables in STYLES (CSS)

SOLVED
Amethyst

Native variables in STYLES (CSS)

Hello friends,

 

is it possible to configure the Vuforia Studio to support native variables in css?

Something like this:

:root {
--color: 240, 240, 240;
}

.bg-red{
background-color: rgba(var(--color), 0.5);
}

In present time must write unnecessarily complicated code because:

Screen_204.jpg

thank you for every post.

 

Tomas

 

Tags (2)
1 ACCEPTED SOLUTION

Accepted Solutions

Re: Native variables in STYLES (CSS)

Finally I found a solution for changing CSS values.

Functinon in .JS: 

$scope.setCssPropertyFromJavascript= function(a, b) {
  elm.style.setProperty('--CI-LEFT', a +'px');
  elm.style.setProperty('--CI-TOP', b +'px');
}

In CSS first of all is required to put into the code /*csslint ignore*/.

Then we can start working with native variables:

/*csslint ignore*/

/// Defining variables in root:
:root {
--CI-TOP: 0;
--CI-LEFT: 0;
}
/// Using variables in class:

.cpopup {
position: fixed;
  top: var(--CI-TOP);
  right: var(--CI-RIGHT);
}

 

GL&HF with Studio

 

Tomas

View solution in original post

2 REPLIES 2

Re: Native variables in STYLES (CSS)

Tomas,

 

I'm not sure CSS Custom Properties (native variables) can be used in Studio, however you can include SASS syntax in the Application STYLES file: the file will be built to a css file using a SASS processor.

 

So, you can do something like this:

 

$color: rgb(240, 240, 240);

.bg-red {
  background-color: $color;
  opacity: 0.5;
}

 

The CSS Custom Properties syntax is flagged by the parser as incorrect: I can't say whether that's just a parser issue or the processor itself doesn't support it.

 

SASS provides features such as:

  • variables
  • nested selectors
  • mixins (reusable groups of CSS declarations, with optional parameters)
  • inheritance (share a set of CSS properties from one selector to another)
  • operators (to do math within a CSS)

 

HTH,

Alessio

Re: Native variables in STYLES (CSS)

Finally I found a solution for changing CSS values.

Functinon in .JS: 

$scope.setCssPropertyFromJavascript= function(a, b) {
  elm.style.setProperty('--CI-LEFT', a +'px');
  elm.style.setProperty('--CI-TOP', b +'px');
}

In CSS first of all is required to put into the code /*csslint ignore*/.

Then we can start working with native variables:

/*csslint ignore*/

/// Defining variables in root:
:root {
--CI-TOP: 0;
--CI-LEFT: 0;
}
/// Using variables in class:

.cpopup {
position: fixed;
  top: var(--CI-TOP);
  right: var(--CI-RIGHT);
}

 

GL&HF with Studio

 

Tomas

View solution in original post