LESS中的運算有什麼用？-css教學-PHP中文網

LESS中的運算有什麼用？

王林

發布： 2023-09-01 20:25:02

轉載

923 人瀏覽過

LESS中的運算有什麼用？

LESS（精簡樣式表）是一種動態樣式表語言，它透過附加功能擴展了 CSS（層疊樣式表）。它提供了多種操作來對CSS值進行數學計算，這使得開發人員可以創建更靈活和動態的樣式。

本教學將教我們如何在 LESS 中進行這些操作，並建立適應不同螢幕尺寸和裝置的樣式。

LESS 中的不同操作

以下是一些可以在 LESS 中使用的操作 -

加法 ( ) 和減法 (-) −# 這些運算讓我們可以互相加法或減去數值。

乘法 (*) 和除法 (/) − 這些運算允許我們對值進行乘法或除法。

Calc() 例外

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

登入後複製