Forum - VAR-Funktion, Variablen und Zahlen in der CSS + CSS/SCSS

Um alle Funktionen nutzen zu können, aktivieren Sie bitte JavaScript in ihrem Browser!

Der Treffpunkt für Hilfe, Tricks & Tipps » XOBOR-Foren und Homepages »

Das neue Template Xobor (v6). » VAR-Funktion, Variablen und Zahlen in der CSS + CSS/SCSS - Teil 1+2

Themen-Einstellungen

Thema drucken

Bereich wechseln

Start Willkommen! Ankündigungen & Termine, wichtige News. Stellen Sie Ihr eigene Webseite vor. Betriebssystem MS Windows & andere Betriebssysteme Betriebssystem MS Windows 11, 10, 8 und 7 - Tricks & Tipps. MS Windows 11, 10, 8 und 7 - Fragen & Antworten. Linux, Ubuntu und andere Betriebssysteme. Ärger mit dem PC, Laptop oder Tablet? Ärger mit dem PC, Laptop oder Tablet - Vorbeugung und Hilfe? Ärger mit dem PC, Laptop oder Tablet - Fragen & Antworten? Fragen zu DSL, VDSL, LTE und anderen Netzempfangsarten. XOBOR-Foren und Homepages Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! Alles für Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! Das neue Template Xobor (v6). Energieerzeugung im neuen Zeitalter - Revolutionär! Videos und Webseiten zur Freien Energie. Wasserstoff - Energieträger der Zukunft. Elektronik & Elektrotechnik Elektronik & Elektrotechnik - Fragen und Antworten Elektronik & Elektrotechnik - Praxis - Highlights Die besten Links! Empfehlenswerte und interessante Links! Link - Suche. Verschiedenes Faszinationen & Unglaubliches! Tricks & Tipps für Smartphones und iPhones. Lob, Kritik & Verbesserungsvorschläge. Spiel & Spaß, Witz & gute Laune! Spiritualität, Seele, New Age, Yoga, Gesundheit. Alles, was noch so übrig bleibt. Bannertausch Wie funktioniert der Bannertausch? Bannerrotation und Bannerwechsel.

#1 | VAR-Funktion, Variablen und Zahlen in der CSS + CSS/SCSS - Teil 1+2 datum

09.08.2022 16:56 (zuletzt bearbeitet: 22.09.2024 15:45)

Wolfgang

Administrator

Informationen anzeigen

Beiträge:	3865
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag € Forum Spende
Sternzeichen	Skorpion
Likes	1707

VAR-Funktion, Variablen und Zahlen in der CSS + CSS/SCSS - Teil 1

Was macht die VAR-Funktion, wie kann man sie anwenden und wann ist sie von Nutzen?
Als erstes hatte ich die VAR-Funktion in der CSS bei Daishi's Skripten gesehen, machte mich neugierig!

Was macht die Var-Funktion?

CSS-Variablen können einen globalen oder lokalen Bereich haben.
Globale Variablen können über das gesamte Dokument zugreifen, während lokale Variablen nur innerhalb des Selektors verwendet werden, in dem sie deklariert werden (Div-Container).
Für globale Variablen wäre das oberste Element :root, hier im Forum passt für die meisten Fälle auch body!
Die Namen der Variablen können frei gewählt werden!
Eine gute Möglichkeit CSS-Variablen zu verwenden, ist, um die Farben eines Designs anzupassen. Anstatt die gleichen Farben immer wieder zu kopieren und einzufügen, können sie in Variablen platziert werden!
Es können aber auch Längen und Breiten definiert!

Ein Beispiel für die VAR-Funktion:

Zuerst werden die globalen Variablen definiert --Blau und --Weiß (Zeile 2+3).
Dann verwendet man die Funktion, um den Wert der Variablen später in die CSS einzufügen var(--Blau) (7, 10+18) und var(--Weiß) (Zeile 11+16)!

Möchte man z.B. die Farbe Blau anpassen, ist es nur erforderlich in Zeile 2 den Wert zu ändern und nicht in Zeile 7, 10+18!
Möchte man z.B. die Farbe Weiß anpassen, ist es nur erforderlich in Zeile 3 den Wert zu ändern und nicht in Zeile 11+16!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
:root { /* body auch möglich */
  --Blau: #1e90ff;
  --Weiß: #ffffff;
}
 

h2 { border-bottom: 2px solid var(--Blau); }
 
.container {
  color: var(--Blau);
  background-color: var(--Weiß);
  padding: 15px;
}
 
button {
  background-color: var(--Weiß);
  color: var(--Blau);
  border: 1px solid var(--Blau);
  padding: 5px;
}
 

Browser-Unterstützung:

Wolfgang

844er und Mato finden das Top!

Antworten

#2 | RE: VAR-Funktion, Variablen und Zahlen in der CSS + CSS/SCSS - Teil 2 datum

22.09.2024 15:30 (zuletzt bearbeitet: 22.09.2024 16:44)

Wolfgang

Administrator

Informationen anzeigen

Beiträge:	3865
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag € Forum Spende
Sternzeichen	Skorpion
Likes	1707

Zahlen in der CSS + CSS/SCSS - Teil 2

Zahlen in der CSSManchmal ist es von Vorteil, Classes numerisch darzustellen!
Leider spielt die CSS nicht bei allen Variationen mit!
Hier gibt es einiges zu beachten!

Zahlen am Anfang einer Class

Generell sind Zahlen am Anfang einer Class in der CSS nicht zulässig, wie Classes komplett mit Zahlen!

1
2
3
4
5
6
7
8
9
 
<style>
.1Bild { width: 100px; }
.2Bild { width: 200px; }
.3Bild { width: 300px; }
 
.100 { width: 100px; }
.200 { width: 200px; }
.300 { width: 300px; }
</style>
 

Einsatz von Zahlen in der CSS möglich machen!

Ohne Schwierigkeiten lassen sich Classes mit Zahlen versehen, wenn sie nicht am Anfang stehen!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<style>
.Bild1 { width: 100px; }
.Bild2 { width: 200px; }
.Bild3 { width: 300px; }
 
.B100 { width: 100px; }
.B200 { width: 200px; }
.B300 { width: 300px; }
</style>
 
<div class="Bild1"> ... </div>
<div class="Bild2"> ... </div>
<div class="Bild3"> ... </div>
 
<div class="B100"> ... </div>
<div class="B200"> ... </div>
<div class="B300"> ... </div>
 

Mit einem kleinen Trick können Classes auch komplett mit Zahlen versehen werden!
Mit dem Präfix \3, das vor die 1. Zahl und einem Leerzeichen nach der 1. Zahl gestellt wird, ist das möglich!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<style>
.\31 Bild { width: 100px; }
.\32 Bild { width: 200px; }
.\33 Bild { width: 300px; }
 
.\31 00 { width: 100px; }
.\32 00 { width: 200px; }
.\33 00 { width: 300px; }
</style>
 
<div class="1Bild"> ... </div>
<div class="2Bild"> ... </div>
<div class="3Bild"> ... </div>
 
<div class="100"> ... </div>
<div class="200"> ... </div>
<div class="300"> ... </div>
 

Info zu "Neuer Spoiler"Eine Class mit Zahlen oder nur mit einer Zahl aufzubauen, ist schon ungewöhnlich!
Im Beitrag #12, mit den neuen Spoilern, wurde die Class="1" eingesetzt für "Spoiler geöffnet starten".
Dadurch ließ sich auch im Foren-Code eine einfache Option erstellen, die nicht einen Namen tragen musste, wie "open" oder "geöffnet"!

Bis dann und gutes Gelingen
Wolfgang

bienchen findet das Top!

Antworten

Mitgliederliste sortiert aufrufen - Visitenkarten-Outfit » « Foren in verschiedenen Sprachen übersetzen Teil 1-4

Ähnliche Themen

Antworten

Letzter Beitrag

Digitaltechnik: Logische Grundschaltungen, logische Verknüpfungen, logische Funktionen
Erstellt im Forum Elektronik & Elektrotechnik - Fragen und Antworten von Wolfgang

21.10.2025 08:03
von

Kipper-Spedition • Zugriffe: 211

Präsentationskalender - Darstellung interessanter Themen - Teil 1+2
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

09.04.2024 00:35
von

Wolfgang • Zugriffe: 2789

Bilder aus "Datei anhängen" + "URL-Bilder" mit einem Klick öffnen & schließen! - Für alle Templates! - Teil 1-4
Erstellt im Forum Das neue Template Xobor (v6). von Wolfgang

21.11.2025 18:19
von

Dankeschön • Zugriffe: 4079

"Wer ist Online?" erweitern Teil (1-3) - Online-Zeitzähler!
Erstellt im Forum Das neue Template Xobor (v6). von Wolfgang 7 22.04.2024 22:49
Anne • Zugriffe: 3151
Iconbar & Navileiste fixieren - Teil 1(2)
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang 19 23.06.2025 17:28
Dankeschön • Zugriffe: 3644

Smileys für Themen-Markierungen einfügen und bearbeiten! - Teil 1+2
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

21.04.2025 18:20
von

Kipper-Spedition • Zugriffe: 2800

"Achtung Bauarbeiten" für halbfertige Beiträge" - Teil 1-3
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

27.12.2025 13:34
von

Nara • Zugriffe: 3505

Beitrag gelesen - Neue Funktion im Bedanken & Bewertungssystem
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

04.01.2022 00:47
von

Mato • Zugriffe: 2149

Forum-Bilder mit einstellbarer Größe, Tooltipps und Beschreibung ausstatten - Teil 1-3!
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

08.06.2022 10:15
von

Wolfgang • Zugriffe: 5265

Der Treffpunkt für Hilfe, Tricks & Tipps » XOBOR-Foren und Homepages »

Das neue Template Xobor (v6). » VAR-Funktion, Variablen und Zahlen in der CSS + CSS/SCSS - Teil 1+2

Foren Spende

Hallo !

Wir hoffen, dass Dir unser Forum gefällt und Du Dich hier genauso wohlfühlst wie wir.

Um Dir und den anderen Mitgliedern das Bestmögliche bieten zu können, würden wir das Forum gern werbefrei gestalten, mit tollen neuen Extras ergänzen.

Wenn Du uns dabei unterstützen möchtest, kannst Du mit Hilfe einer kleinen Spende dazu beitragen.

Deine Spende hilft!

Spendenziel: 45 €

41%