Skip to main content
T
TomasCharvat14-Alexandrite
14-Alexandrite
January 9, 2019
Solved

Native variables in STYLES (CSS)

  • January 9, 2019
  • 2 replies
  • 2663 views

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

 

Best answer by TomasCharvat

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

2 replies

A
Alessio15-Moonstone
15-Moonstone
January 10, 2019

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

    T
    TomasCharvat14-AlexandriteAuthorAnswer
    14-Alexandrite
    June 17, 2019

    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

    Terms & ConditionsAccessibility statement