Sass - 數字運算

描述

SASS 允許進行加、減、乘、除等數學運算。您不能使用不相容的單位，例如px * px，或者在將數字與px和em相加時，會導致生成無效的 CSS。因此，如果您在 CSS 中使用無效的單位，SASS 將顯示錯誤。SASS 支援關係運算符，如<, >, <=, >=和等號運算子 ==, !=。

除法和 /

SASS 允許對數字進行除法運算 (/)，就像我們在普通 CSS 中一樣。您可以三種情況下使用除法 (/) 運算。

如果值儲存在變數中或由函式返回。
如果括號在列表外部，而值在內部，則值將用括號括起來。
如果值是算術表示式的一部分。

減法、負數和 -

使用 SASS，您可以執行一些運算，例如數字的減法 (10px - 5px)、取反一個數字 (-5)、一元否定運算子 (-$myval) 或使用識別符號 (font-size)。在某些情況下，這些很有用，例如：

在進行數字減法時，可以在 - 的兩側使用空格
可以在 - 之前使用空格，但不能在負數或一元否定之後使用空格
您可以將一元否定括在用空格分隔的括號內 (5px (-$myval))

示例如下：

它可以用於識別符號，例如font-size，並且 SASS 只允許有效的識別符號。
它可以用於兩個沒有空格的數字，即 10-5 等同於 10 - 5。
它可以用作負數的開頭 (-5)。
它可以在不考慮空格的情況下使用，例如 5 -$myval 等同於 5 - $myval。
它可以用作一元否定運算子 (-$myval)。

示例

以下示例演示瞭如何在 SCSS 檔案中使用數字運算：

<html>
   <head>
      <title>Number Operations</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
      <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
   </head>

   <body>
      <div class = "container">
         <p class = "para1">SASS stands for Syntactically Awesome Stylesheet..</p>
         <h2>Hello...Welcome to Sass</h2>
         <h3>Hello...Welcome to Sass</h3>
         <p class = "para2">Hello...Welcome to Sass</p>
      </div>
   </body>
</html>

接下來，建立檔案style.scss。

style.scss

$size: 25px;

h2{
   font-size: $size + 5;
}

h3{
   font-size: $size / 5;
}

.para1 {
   font-size: $size * 1.5;
}

.para2 {
   font-size: $size - 10;
}

您可以告訴 SASS 監視檔案並在 SASS 檔案更改時更新 CSS，方法是使用以下命令：

sass --watch C:\ruby\lib\sass\style.scss:style.css

接下來，執行上述命令；它將自動建立包含以下程式碼的style.css檔案：

style.css

h2 {
   font-size: 30px;
}

h3 {
   font-size: 5px;
}

.para1 {
   font-size: 37.5px;
}

.para2 {
  font-size: 15px;
}

輸出

讓我們執行以下步驟來檢視上述程式碼是如何工作的：

將上述 HTML 程式碼儲存到number_operations.html檔案中。
在瀏覽器中開啟此 HTML 檔案，將顯示如下所示的輸出。

sass_script.htm

列印頁面