Welchen Nutzen haben Operationen in LESS?

LESS (Less Style Sheets) ist eine dynamische Stylesheet-Sprache, die CSS (Cascading Style Sheets) um zusätzliche Funktionen erweitert. Es bietet eine Vielzahl von Operationen zur Durchführung mathematischer Berechnungen an CSS-Werten, wodurch Entwickler flexiblere und dynamischere Stile erstellen können.

In diesem Tutorial lernen wir, wie man diese Vorgänge in LESS durchführt und Stile erstellt, die sich an verschiedene Bildschirmgrößen und Geräte anpassen.

Verschiedene Operationen in WENIGER

Hier sind einige Operationen, die Sie in LESS verwenden können -

Addition (+) und Subtraktion (-) − Diese Operationen ermöglichen es uns, Werte voneinander zu addieren oder voneinander zu subtrahieren.

Multiplikation (*) und Division (/) − Mit diesen Operationen können wir Werte multiplizieren oder dividieren.

Calc()-Ausnahme

Mit der Funktion calc() in CSS können wir mathematische Operationen an Werten durchführen, die in CSS verwendet werden können. Mit dieser Funktion kann die Breite oder Höhe eines Elements anhand anderer Werte berechnet werden, was bei responsiven Designs sehr nützlich ist.

Es ist wichtig zu beachten, dass calc() standardmäßig keine mathematischen Ausdrücke auswertet. Dies geschieht aus Gründen der CSS-Kompatibilität, da einige Browser bestimmte mathematische Funktionen möglicherweise nicht unterstützen. calc() berechnet jedoch Variablen und Mathematik innerhalb verschachtelter Funktionen, sodass der Benutzer komplexere Berechnungen durchführen kann.

Nehmen wir zum Beispiel an, wir haben eine Variable @width. Wir können diese Variable in der Funktion calc() verwenden, um die Breite eines Elements wie folgt zu berechnen:

@width:50vh;
h1 {
   width: calc(50% + (@width - 20px));
}

Der resultierende Wert ist calc(50% + (50vh - 20px)).

Beispiel

In diesem Beispiel definieren wir eine @base-size-Variable und erstellen dann mithilfe von Additions- und Subtraktionsoperationen zwei neue Variablen @large-size und @small-size. Die @large-size-Variable addiert 4 Pixel zur Basisgröße, während die @small-size-Variable 2 Pixel von der Basisgröße subtrahiert. Anschließend verwenden wir diese Variablen, um die Schriftgröße der Elemente h1 und p festzulegen.

@base-size: 16px;
@large-size: @base-size + 4px; // Adds 4px to base size
@small-size: @base-size - 2px; // Subtracts 2px from base size
 
h1 {
   font-size: @large-size;
}
 
p {
   font-size: @small-size;
}

Ausgabe

h1 {
   font-size: 20px;
}
p {
   font-size: 14px;
}

Beispiel

In diesem Beispiel verwenden wir Variablen, um die Basisbreite und die Anzahl der Spalten des Layouts festzulegen. Anschließend berechnen wir die Breite jeder Spalte, indem wir die Basisbreite durch die Anzahl der Spalten dividieren. Schließlich legen wir in der Medienabfrage die Breite der Spalte mit halber Breite auf das Sechsfache der durch Multiplikation berechneten Spaltenbreite fest.

@base-width: 960px;
@column-count: 12;
@column-width: @base-width / @column-count; 
@media (min-width: 768px) {
   .col-md-6 {
      width: @column-width * 6; 
   }
}

Ausgabe

@media (min-width: 768px) {
   .col-md-6 {
      width: 960px / 12 * 6;
   }
}

Beispiel

In diesem Beispiel ändern wir zunächst die Mathematikeinstellung auf Immer und definieren dann Variablen für die Höhe der Titel- und Navigationselemente. Mit der Funktion calc() berechnen wir die Höhe des Hauptelements anhand der zuvor definierten Variablen.

Als nächstes setzen wir die mathematischen Einstellungen auf ihre Standardwerte zurück und definieren neue Variablen für die Breite der Box und ihre Polsterung. Mithilfe mathematischer Operationen berechnen wir die Breite der Box und legen ihre Breite entsprechend fest.

Indem wir die Einstellung „Mathe“ auf „Immer“ ändern, können wir komplexe mathematische Operationen ausführen, ohne sie auf ihre einfachste Form zu reduzieren, was uns mehr Kontrolle über unsere Stile gibt.

// Set math setting to always
@math: always;
 
// Define variables
@header-height: 80px;
@nav-height: 50px;
 
// Set height of the header
header {
   height: @header-height;
} 
// Set height of the nav
nav {
   height: @nav-height;
} 
// Calculate the height of the main using calc()
main {
   height: calc(100% - (@header-height + @nav-height));
} 
// Reset math setting to default
@math: default; 

// Define new variables
@box-width: 300px;
@padding: 20px; 

// Calculate the width of the box using math operations
.box {
   width: @box-width + @padding;
}

Ausgabe

header {
   height: 80px;
}
nav {
   height: 50px;
}
main {
   height: calc(100% - (80px + 50px));
}
.box {
   width: 320px;
}

Beispiel

In diesem Beispiel definieren wir zwei Farben (@color-1 und @color-2) und verwenden LESS, um verschiedene arithmetische Operationen an ihnen durchzuführen. Wir addieren die beiden Farben, subtrahieren die zweite Farbe von der ersten Farbe, multiplizieren die erste Farbe mit 50 % und mischen dann die beiden Farben mit einem Gewicht von 50 % für jede Farbe.

Benutzer können in der Ausgabe beobachten, dass jede Operation eine neue Farbe erzeugt, die als Wert einer CSS-Eigenschaft verwendet werden kann.

// Define two colors
@color-1: #ff0000;
@color-2: #00ff00;
 
// Add the two colors together
.add-colors {
   background-color: @color-1 + @color-2;
}
 
// Subtract the second color from the first
.subtract-colors {
   background-color: @color-1 - @color-2;
}
 
// Multiply the first color by 50%
.multiply-color {
   background-color: @color-1 * 50%;
}
 
// Mix the two colors with a 50% weight for each
.mix-colors {
   background-color: mix(@color-1, @color-2, 50%);
}

Ausgabe

.add-colors {
   background-color: #ffff00;
}
.subtract-colors {
   background-color: #ff0000;
}
.multiply-color {
   background-color: #ff0000;
}
.mix-colors {
   background-color: #808000;
}

Fazit

Benutzer haben gelernt, wie man verschiedene arithmetische Operationen in LESS verwendet, einschließlich Addition, Subtraktion, Multiplikation und Division. Sie lernten auch, mit der Funktion calc() komplexe mathematische Berechnungen durchzuführen.

Neben arithmetischen Operationen mit numerischen Werten lernen Benutzer auch arithmetische Operationen mit Farben kennen. Dabei werden Farbwerte wie RGB-, HEX- oder HSL-Werte addiert oder subtrahiert.

Das obige ist der detaillierte Inhalt vonWelchen Nutzen haben Operationen in LESS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!