Use of the calc() method

calc implements dynamic calculation in css

环境
根据元素高度的变化,动态控制padding值
<marquee
                        :name="'up' + index"
                        behavior="scroll"
                        scrolldelay="30"
                        direction="up"
                        v-else-if="item.scrollPocition === 3 ? true : false"
                        :style="{
                            '--positionTop': item.X,
                            '--positionLeft': item.Y,
                            '--textHeight': item.FontSizeFrom,
                            '--height': item.H,
                            'letter-spacing': item.LetterSpacing + 'px',
                            'line-height': item.LineHeight,
                            width: item.W + 'px',
                            height: item.H + 'px',
                            left: item.TextLeft + 'px',
                            color: item.sketchBgColor,
                            'text-indent': item.TextIndent + 'px',
                            'font-size': item.FontSizeFrom + 'px',
                            'font-family': item.FontFamily,
                        }"
                        v-bind:class="[item.bold ? 'bold' : '', item.italic ? 'italic' : '', item.underline ? 'underline' : '', , getClass2, getClass1, 'classPosition']"
                    >
                        <p :class="['classAbsolute']">{
   
   { item.textarea1 }}</p>
                    </marquee>

Bind dynamic height via --height

.text_bottom {
    // background: blue;
    padding-top: calc((var(--height) * 1px - var(--textHeight) * 1px))  ;
    // padding-top: calc( var(--height) * 1px );
    // padding-top: calc(#{var(—height)} * 1px);
    box-sizing: border-box;
}

usage

• When declaring a css variable, add two hyphens (--) in front of the variable name
   

• The var() function is used to read variables.
  The var() function can also use a second parameter, which represents the default value of the variable. If the variable does not exist, this default value will be used.
  The second parameter does not handle internal commas or spaces, all are considered part of the parameter.

1. Global/local variables

 The :root pseudo-class can be regarded as a global scope. The variables declared in it can be obtained by all the selectors below it

    :root { --color: blue; }
    .box{color: var(--color)}

 

 

2. Local variables

    .box{
        --color: red;
        color: var(--color);
    }

 3. The default value of the second parameter of the var() function

    .box{
        --color: red;
        color: var(--bg,pink);
    }

 4. Calculate together with CSS3 calc()

p{
  --size: 20;   
  font-size: calc(var(--size) * 1px);//20px
}

 

  Inheritance of CSS variables (proximity principle)

<div class="box" id="alert">张三</div>

    :root { --color: blue; }
    div { --color: green; }
    #alert { --color: red; }
    * { color: var(--color); }

Notice

When there are multiple variables with the same name, the variable coverage rules are determined by the weight of the CSS selector, but there is no usage of !important.

The value of the quantity adopts the principle of proximity

If the variable value is a numeric value, it cannot be used directly with a numeric unit. They must be concatenated using the calc() function.

.foo {
  --gap: 20;
  /* 无效 */
  margin-top: var(--gap)px;
}
.foo {
  --gap: 20;
  /* 有效 */
  margin-top: calc(var(--gap) * 1px);
}

 If the variable value has a unit, it cannot be written as a string.

/* 无效 */
.foo {
  --foo: '20px';
  font-size: var(--foo);
}
 
/* 有效 */
.foo {
  --foo: 20px;
  font-size: var(--foo);
}

CSS property names cannot use variables. For example, the following writing is wrong:

body {
    --bc: background-color;    
    var(--bc): #369;
}

There is a default value for css variables, as long as the definition is correct, if the value inside is incorrect, the result will be displayed with the default value

body {
  --color: 20px;
  background-color: #369;
  background-color: var(--color, #cd0000);/*背景色为：transparent*/
}

 css variables have spaces at the end by default

p{
  --size: 20;   
  font-size: var(--size)px;//等同于font-size:20 px;这里将使用元素默认的大小。这里可以结合上面例子calc()使用。
}

 

var can be replaced by v-bind, and v-bind can complete the function of var

Original article address: css defines variables (definition: --aa; use: var(--aa), calc() to calculate style functions_muzidigbig's blog-CSDN blog_css中.aa