Sass - 顏色運算

說明

SASS 允許使用顏色分量和算術運算，任何顏色表示式都會返回一個 SassScript 顏色值。

示例

以下示例演示如何在 SCSS 檔案中使用顏色運算 -

<html>
   <head>
      <title>Color 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">
         <h3>This is Example of Sass Color Operations</h3>
         <p>SASS stands for Syntactically Awesome Stylesheet..</p>
      </div>
   </body>
</html>

接下來，建立一個名為 style.scss 的檔案。

style.scss

$color1: #333399;
$color2: #CC3399;

p{
   color: $color1 + $color2;
}

你可以使用以下命令，讓 SASS 監視這個檔案並在 SASS 檔案發生變化時更新 CSS -

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

接下來，執行以上命令；這將自動使用以下程式碼建立 style.css 檔案 -

style.css

p {
   color: #ff66ff;
}

輸出

讓我們執行以下步驟，看看上面給出的程式碼是如何工作的 -

將以上給出的 HTML 程式碼儲存在 color_operations.html 檔案中。
在這個瀏覽器中開啟這個 HTML 檔案，會顯示如下所示的輸出。

sass_script.htm

列印頁面

上一個

下一個