uniapp veröffentlicht als WeChat-Applet-Variableneinstellung, dynamischer Stil ungültig

1. Grammatik

• --*um den Variablennamen zu deklarieren
• var(--*)um die Variable zu verwenden

Ergänzung: Bei der Verwendung von benutzerdefinierten CSS-Attributen ermöglicht var() die Annahme des zweiten Parameters als Standardwert. Bei der Verwendung ist es am besten, einen Standardwert einzugeben. Der zweite Parameter kann auch ein anderes benutzerdefiniertes Attribut sein

body {
  --default-color: pink;
  --font-base: 12px;
  background-color: var(--default-color);
}
.button {
  background-color: var(--theme-color, pink); // 可接受第二个参数
  font-size: var(--font-ls, --font-base);
}

Zweitens, verwenden

1. Globale Variablen und lokale Variablen

Deklarieren Sie globale Variablen im Root - Codeblock

Die im Selektor deklarierten lokalen Variablen überschreiben die globalen Variablen

:root { // 全局变量
  --font-base: 14px;
}
.section-item { // 局部变量
  color: var(--text-color);
}

2. Die Funktion calc () wird häufig für einheitenübergreifende Berechnungen verwendet, und benutzerdefinierte CSS-Attribute können auch an der Berechnung von calc beteiligt sein

3. Benutzerdefinierte Eigenschaften können auch über die Methoden getPropertyValue und setProperty bearbeitet werden , und der Wert benutzerdefinierter Eigenschaften kann dynamisch geändert werden

3. Verwendung in kleinen Programmen

Grundlegende Verwendung

• Globale Variablen in der Webentwicklung werden im Stammverzeichnis definiert. Wenn Sie Applets verwenden, definieren Sie Variablen auf der Seite
• Variablen in app.acss können auf jeder Seite global verwendet werden, und seitenspezifische CSS-Variablen können auch unabhängig auf jeder Seite definiert werden

/* /app.acss --> */
page {
  --base-color: #409eff;
  --warning: #e6a23c;
  --danger: #f56c6c;
  --info: #909399;
  --success: #67c23a;
  ......;
}

/* 这样既可以在web端使用又可以在小程序上使用 */
:root,page {
   --primary-color: rgb(32, 115, 244); // 默认主题颜色
   --secondary-color: #f04864; // 次要颜色
   --background-color: #fff; // 背景颜色
   ......;
}

Referenzdokument: Verwendung globaler Stile in Miniprogrammen – Kurzbuch