Quelles sont les utilisations des opérations dans LESS ?

LESS (Less-Based Style Sheets) est un langage de feuille de style dynamique qui étend CSS (Cascading Style Sheets) avec des fonctionnalités supplémentaires. Il fournit une variété d'opérations pour effectuer des calculs mathématiques sur les valeurs CSS, ce qui permet aux développeurs de créer des styles plus flexibles et dynamiques.

Ce tutoriel nous apprendra comment effectuer ces opérations avec MOINS et créer des styles qui s'adaptent à différentes tailles d'écran et appareils.

Différentes opérations en MOINS

Voici quelques opérations que vous pouvez utiliser en MOINS -

Addition (+) et Soustraction (-) − Ces opérations nous permettent d'ajouter ou de soustraire des valeurs les unes des autres.

Multiplication (*) et division (/) − Ces opérations nous permettent de multiplier ou de diviser des valeurs.

Exception Calc()

La fonction calc() en CSS nous permet d'effectuer des opérations mathématiques sur des valeurs utilisables en CSS. Cette fonction peut être utilisée pour calculer la largeur ou la hauteur d'un élément en fonction d'autres valeurs, ce qui est très utile dans les conceptions réactives.

Une chose importante à noter est que calc() n'évalue pas les expressions mathématiques par défaut. Ceci est effectué pour des raisons de compatibilité CSS, car certains navigateurs peuvent ne pas prendre en charge certaines fonctions mathématiques. Cependant, calc() calculera les variables et les mathématiques au sein de fonctions imbriquées, permettant à l'utilisateur d'effectuer des calculs plus complexes.

Par exemple, supposons que nous ayons une variable @width. Nous pouvons utiliser cette variable dans la fonction calc() pour calculer la largeur d'un élément comme suit :

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

La valeur résultante est calc(50% + (50vh - 20px)).

Exemple

Dans cet exemple, nous définissons une variable @base-size puis créons deux nouvelles variables @large-size et @small-size à l'aide d'opérations d'addition et de soustraction. La variable @large-size ajoute 4px à la taille de base, tandis que la variable @small-size soustrait 2px à la taille de base. Nous utilisons ensuite ces variables pour définir la taille de la police des éléments h1 et p.

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

Sortie

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

Exemple

Dans cet exemple, nous utilisons des variables pour définir la largeur de base et le nombre de colonnes de la mise en page. Nous calculons ensuite la largeur de chaque colonne en divisant la largeur de base par le nombre de colonnes. Enfin, dans la requête multimédia, nous définissons la largeur de la colonne demi-largeur à 6 fois la largeur de la colonne, calculée par multiplication.

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

Sortie

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

Exemple

Dans cet exemple, nous modifions d'abord le paramètre mathématique sur Toujours, puis définissons des variables pour la hauteur du titre et des éléments de navigation. Nous utilisons la fonction calc() pour calculer la hauteur de l'élément principal en utilisant les variables précédemment définies.

Ensuite, nous réinitialisons les paramètres mathématiques à leurs valeurs par défaut et définissons de nouvelles variables pour la largeur de la boîte et son remplissage. Nous utilisons des opérations mathématiques pour calculer la largeur de la boîte et définir sa largeur en conséquence.

En modifiant le paramètre Math sur Toujours, nous pouvons effectuer des opérations mathématiques complexes sans les réduire à leur forme la plus simple, ce qui nous donne plus de contrôle sur nos styles.

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

Sortie

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

Exemple

Dans cet exemple, nous définissons deux couleurs (@color-1 et @color-2) et utilisons LESS pour effectuer différentes opérations arithmétiques sur elles. Nous additionnons les deux couleurs ensemble, soustrayons la deuxième couleur de la première couleur, multiplions la première couleur par 50 %, puis mélangeons les deux couleurs avec un poids de 50 % pour chaque couleur.

Les utilisateurs peuvent observer dans le résultat que chaque opération entraîne une nouvelle couleur, qui peut être utilisée comme valeur d'une propriété CSS.

// 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%);
}

Sortie

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

Conclusion

Les utilisateurs ont appris à utiliser diverses opérations arithmétiques en LESS, notamment l'addition, la soustraction, la multiplication et la division. Ils ont également appris à utiliser la fonction calc() pour effectuer des calculs mathématiques complexes.

En plus des opérations arithmétiques sur les valeurs numériques, les utilisateurs découvrent également les opérations arithmétiques sur les couleurs. Cela implique d'ajouter ou de soustraire des valeurs de couleur, telles que les valeurs RVB, HEX ou HSL.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!