0

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?

huan feng
  • 7,307
  • 2
  • 32
  • 56
  • 1
    It is declaration of `css variable` – zhurof Oct 18 '20 at 06:42
  • 4
    [Duplicate](https://www.google.com/search?q=site%3Astackoverflow.com+css+double+hyphen) of [What do these double-dash-prefixed CSS properties do?](https://stackoverflow.com/q/40055654/4642212). – Sebastian Simon Oct 18 '20 at 06:43

2 Answers2

1

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!

laurentiurad
  • 94
  • 4
0

Equal to the computed value of font-size on the root element. When specified on the font-size property of the root element, the rem units refer to the property’s initial value.

Maxwell Smart
  • 43
  • 3