calc() メソッドの使用

calc は 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>

--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;
}

使用法

css 変数を宣言するときは、変数名の前に 2 つのハイフン (--) を追加します

var() 関数は、変数を読み取るために使用されます。
var() 関数は、変数のデフォルト値を表す 2 番目のパラメーターを使用することもできます。変数が存在しない場合、このデフォルト値が使用されます。
2 番目のパラメーターは、パラメーターの一部として、内部のコンマまたはスペースを処理しません。

1. グローバル/ローカル変数

:root 擬似クラスはグローバルスコープと見なすことができ、その中で宣言された変数は、その下のすべてのセレクターで取得できます。

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

2. ローカル変数

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

3. var() 関数の第 2 パラメーターのデフォルト値

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

4. CSS3 calc() と合わせて計算する

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

CSS 変数の継承 (近接原則)

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

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

知らせ

同じ名前の変数が複数ある場合、CSS セレクターの重みによって変数カバレッジルールが決定されますが、!important の使用はありません。

数量の値は、近接の原則を採用しています

変数値が数値である場合、数値単位で直接使用することはできません。これらは、calc() 関数を使用して連結する必要があります。

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

変数値に単位がある場合、文字列として記述できません。

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

CSS プロパティ名は変数を使用できません。たとえば、次の記述は誤りです。

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

css変数にはデフォルト値があり、定義が正しければ内部の値が間違っていればデフォルト値で結果が表示されます

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

css 変数の末尾にはデフォルトでスペースがあります

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

var は v-bind に置き換えることができ、v-bind は var の機能を完了することができます

元記事アドレス: css define variables (definition: --aa; use: var(--aa), calc() to calculate style functions_muzidigbig's blog-CSDN blog_css中.aa

使用法

おすすめ