LESS（精簡樣式表）是一種動態樣式表語言，它透過附加功能擴展了 CSS（層疊樣式表）。它提供了多種操作來對CSS值進行數學計算，這使得開發人員可以創建更靈活和動態的樣式。
本教學將教我們如何在 LESS 中進行這些操作，並建立適應不同螢幕尺寸和裝置的樣式。
以下是一些可以在 LESS 中使用的操作 -
加法 ( ) 和減法 (-) −# 這些運算讓我們可以互相加法或減去數值。
乘法 (*) 和除法 (/) − 這些運算允許我們對值進行乘法或除法。
CSS 中的 calc() 函數允許我們對可在 CSS 中使用的值執行數學運算。此函數可用於根據其他值計算元素的寬度或高度，這在響應式設計中非常有用。
需要注意的一件重要事情是 calc() 預設不計算數學表達式。這樣做是出於 CSS 相容性原因，因為某些瀏覽器可能不支援某些數學函數。但是，calc() 將計算巢狀函數中的變數和數學，讓使用者可以執行更複雜的計算。
例如，假設我們有一個變數@width。我們可以在 calc() 函數中使用此變數來計算元素的寬度，如下所示：
@width:50vh;
h1 {
width: calc(50% + (@width - 20px));
}
結果值為 calc(50% (50vh - 20px))。
在此範例中，我們定義了一個 @base-size 變量，然後使用加法和減法運算建立兩個新變數 @large-size 和 @small-size。 @large-size 變數在基本尺寸上加上 4px，而 @small-size 變數則從基本尺寸中減去 2px。然後，我們使用這些變數來設定 h1 和 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;
}
h1 {
font-size: 20px;
}
p {
font-size: 14px;
}
在此範例中，我們使用變數來設定佈局的基本寬度和列數。然後，我們透過將基本寬度除以列數來計算每列的寬度。最後，在媒體查詢中，我們將半角列的寬度設定為列寬的6倍，透過乘法計算得出。
@base-width: 960px;
@column-count: 12;
@column-width: @base-width / @column-count;
@media (min-width: 768px) {
.col-md-6 {
width: @column-width * 6;
}
}
@media (min-width: 768px) {
.col-md-6 {
width: 960px / 12 * 6;
}
}
在此範例中，我們首先將數學設定變更為始終，然後定義標題和導航元素高度的變數。我們使用 calc() 函數使用先前定義的變數來計算主元素的高度。
接下來，我們將數學設定重設為預設值，並為框的寬度及其填充定義新變數。我們使用數學運算來計算框的寬度並相應地設定其寬度。
透過將數學設定更改為始終，我們可以執行複雜的數學運算，而無需將其簡化為最簡單的形式，從而更好地控制我們的樣式。
// 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;
}
header {
height: 80px;
}
nav {
height: 50px;
}
main {
height: calc(100% - (80px + 50px));
}
.box {
width: 320px;
}
在此範例中，我們定義了兩種顏色（@color-1 和 @color-2），並使用 LESS 對它們執行不同的算術運算。我們將兩種顏色加在一起，從第一種顏色中減去第二種顏色，將第一種顏色乘以 50%，然後將兩種顏色混合，每種顏色的權重為 50%。
使用者可以在輸出中觀察到每個操作都會產生一種新顏色，該顏色可以用作 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%);
}
.add-colors {
background-color: #ffff00;
}
.subtract-colors {
background-color: #ff0000;
}
.multiply-color {
background-color: #ff0000;
}
.mix-colors {
background-color: #808000;
}
使用者學習如何在 LESS 中使用各種算術運算，包括加法、減法、乘法和除法。他們也學會了使用 calc() 函數執行複雜的數學計算。
除了數值的算術運算之外，使用者還了解了顏色的算術運算。這涉及添加或減去顏色值，例如 RGB、HEX 或 HSL 值。
以上是LESS中的運算有什麼用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
