Apakah kegunaan operasi dalam LESS?

LESS (Less Style Sheets) ialah bahasa helaian gaya dinamik yang memanjangkan CSS (Cascading Style Sheets) dengan ciri tambahan. Ia menyediakan pelbagai operasi untuk melakukan pengiraan matematik pada nilai CSS, yang membolehkan pembangun mencipta gaya yang lebih fleksibel dan dinamik.

Tutorial ini akan mengajar kami cara melakukan operasi ini dalam KURANG dan mencipta gaya yang menyesuaikan dengan saiz dan peranti skrin yang berbeza.

Operasi yang berbeza dalam LESS

Berikut adalah beberapa operasi yang boleh anda gunakan dalam KURANG -

Tambahan (+) dan Tolak (-) − Operasi ini membolehkan kita menambah atau menolak nilai antara satu sama lain.

Darab (*) dan bahagi (/) − Operasi ini membolehkan kita mendarab atau membahagi nilai.

Calc() pengecualian

Fungsi calc() dalam CSS membolehkan kami melaksanakan operasi matematik pada nilai yang boleh digunakan dalam CSS. Fungsi ini boleh digunakan untuk mengira lebar atau ketinggian elemen berdasarkan nilai lain, yang sangat berguna dalam reka bentuk responsif.

Perkara penting untuk diperhatikan ialah calc() tidak menilai ungkapan matematik secara lalai. Ini dilakukan atas sebab keserasian CSS, kerana sesetengah penyemak imbas mungkin tidak menyokong fungsi matematik tertentu. Walau bagaimanapun, calc() akan mengira pembolehubah dan matematik dalam fungsi bersarang, membolehkan pengguna melakukan pengiraan yang lebih kompleks.

Sebagai contoh, katakan kita mempunyai pembolehubah @lebar. Kita boleh menggunakan pembolehubah ini dalam fungsi calc() untuk mengira lebar elemen seperti berikut:

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

Nilai yang terhasil ialah calc(50% + (50vj - 20px)).

Contoh

Dalam contoh ini, kami mentakrifkan pembolehubah @saiz asas dan kemudian mencipta dua pembolehubah baharu @saiz besar dan @saiz kecil menggunakan operasi tambah dan tolak. Pembolehubah @saiz besar menambah 4px pada saiz asas, manakala pembolehubah @saiz kecil menolak 2px daripada saiz asas. Kami kemudian menggunakan pembolehubah ini untuk menetapkan saiz fon bagi elemen h1 dan 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;
}

Output

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

Contoh

Dalam contoh ini, kami menggunakan pembolehubah untuk menetapkan lebar asas dan bilangan lajur reka letak. Kami kemudian mengira lebar setiap lajur dengan membahagikan lebar asas dengan bilangan lajur. Akhir sekali, dalam pertanyaan media, kami menetapkan lebar lajur separuh lebar kepada 6 kali lebar lajur, dikira dengan pendaraban.

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

Output

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

Contoh

Dalam contoh ini, kita mula-mula menukar tetapan matematik kepada Sentiasa dan kemudian menentukan pembolehubah untuk ketinggian tajuk dan elemen navigasi. Kami menggunakan fungsi calc() untuk mengira ketinggian elemen utama menggunakan pembolehubah yang ditakrifkan sebelum ini.

Seterusnya, kami menetapkan semula tetapan matematik kepada nilai lalainya dan menentukan pembolehubah baharu untuk lebar kotak dan pelapiknya. Kami menggunakan operasi matematik untuk mengira lebar kotak dan menetapkan lebarnya dengan sewajarnya.

Dengan menukar tetapan Matematik kepada Sentiasa, kami boleh melakukan operasi matematik yang kompleks tanpa mengurangkannya kepada bentuk yang paling mudah, memberikan kami lebih kawalan ke atas gaya kami.

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

Output

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

Contoh

Dalam contoh ini, kami mentakrifkan dua warna (@warna-1 dan @warna-2) dan menggunakan KURANG untuk melaksanakan operasi aritmetik yang berbeza pada mereka. Kami menambah dua warna bersama-sama, menolak warna kedua daripada warna pertama, darab warna pertama sebanyak 50%, dan kemudian menggabungkan dua warna dengan berat 50% untuk setiap warna.

Pengguna boleh melihat dalam output bahawa setiap operasi menghasilkan warna baharu, yang boleh digunakan sebagai nilai sifat 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%);
}

Output

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

Kesimpulan

Pengguna mempelajari cara menggunakan pelbagai operasi aritmetik dalam KURANG, termasuk tambah, tolak, darab dan bahagi. Mereka juga belajar menggunakan fungsi calc() untuk melakukan pengiraan matematik yang kompleks.

Selain operasi aritmetik pada nilai berangka, pengguna juga belajar tentang operasi aritmetik pada warna. Ini melibatkan menambah atau menolak nilai warna, seperti nilai RGB, HEX atau HSL.

Atas ialah kandungan terperinci Apakah kegunaan operasi dalam LESS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!