Search code examples
csssaas

what does --height mean in Saas or CSS?

I looked in an ionic project, there are some styles defined like below:

.modal{
  padding: .4rem .2rem;
  --border-radius:10px;
  --background:black;
  --height:3rem;
}

What does prefix '--' mean in Saas or CSS?

Solution

  • The '--' notation in css mark the declaration of a new variable.

    The following is from this page: https://www.w3schools.com/css/css3_variables.asp

    Variables in CSS should be declared within a CSS selector that defines its scope. For a global scope you can use either the :root or the body selector.

    The variable name must begin with two dashes (--) and is case sensitive!