Sass巢狀屬性 - tw511教學網

使用巢狀的屬性就可以避免重寫CSS多次。例如，使用字型使用一些屬性，如font-family, font-size, font-weight and font-variant等名稱空間。在正常的CSS每次寫這些屬性需要使用的名稱空間。使用SASS巢狀屬性名稱空間只寫一次。

範例

下面的例子演示使用SCSS檔案巢狀屬性：

<html>
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>內嵌屬性 - www.tw511.com</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>內嵌屬性範例</h1>
   <p class="line">SASS stands for Syntactically Awesome Stylesheet</p>
   </div>
</body>
</html>

接下來產生一個檔案：style.scss.

style.scss

.line {
  font: {
    family: Lucida Sans Unicode;
    size:20px;
    weight: bold;
    variant: small-caps;
  }
}

你可以告訴SASS看檔案，並隨時使用SASS下面的命令更新修改的CSS檔案：

sass --watch C:\Ruby22-x64\style.scss:style.css

接下來執行上面的命令，它會自動建立 style.css 檔案，下面的程式碼：

style.css

.line {
  Lucida Sans Unicode;
  font-size: 20px;
  font-weight: bold;
  font-variant: small-caps;
}

輸出結果

讓我們來執行以下步驟，看看上面的程式碼工作結果：

儲存上面的html程式碼在 nested_properties.html 檔案。
在瀏覽器中開啟這個HTML檔案，輸出顯示如下。