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

Community Tip - Need to share some code when posting a question or reply? Make sure to use the "Insert code sample" menu option. Learn more! X

Native variables in STYLES (CSS)

TomasCharvat
14-Alexandrite

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

 

1 ACCEPTED SOLUTION

Accepted Solutions

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
Alessio
15-Moonstone
(To:TomasCharvat)

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

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

Top Tags