Sass——變數

說明

程式設計師使用變數來表示資料，如數字值、字元或記憶體地址。變數的重要性在於可以重複使用整個樣式表中儲存在變數中的值。

語法

$variable_name : some value;

變數使用美元符號 ($) 定義，以分號 (;) 結尾。

示例

以下示例演示了 SCSS 檔案中變數的使用——

<html>
   <head>
      <title>Variables</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">
      <h1>Example using Variables</h1>
      <p>Sass is an extension of CSS that adds power and elegance to the basic language.</p>
      </div>
   </body>
</html>

然後，建立檔案style.scss。

style.scss

$txtcolor:#008000;
$fontSize: 20px;

p{
   color:$txtcolor;
   font-size:$fontSize;
}

你可以透過使用以下命令通知 SASS 監視檔案，並每當 SASS 檔案更改時更新 CSS——

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

然後，執行以上命令；它將自動使用以下程式碼建立style.css 檔案——

style.css

p {
   color: #008000;
   font-size: 20px;
}

輸出

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

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

sass_script.htm

列印頁面