Sass - @while 指令

說明

與其他控制指令一樣，@while 指令也會獲取 SassScript 表示式，且在語句評估為假之前，它會迴圈輸出巢狀樣式。需要著重指出的是，計數器變數需要在每次迭代中進行遞增/遞減。

語法

while(condition) {
   // CSS codes
}

示例

以下示例演示瞭如何使用 @while 指令 −

<html>
   <head>
      <title>Control Directives & Expressions</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css"/>
   </head>

   <body>
      <p class = "paddding-50">This is line one with left padding 50. </p>
      <p class = "paddding-40">This is line two with left padding 40.</p>
      <p class = "paddding-30">This is line three with left padding 30. </p>
      <p class = "paddding-20">This is line four with left padding 20. </p>
      <p class = "paddding-10">This is line five with left padding 10. </p>
   </body>
</html>

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

style.scss

$i: 50;
@while $i > 0 {
   .paddding-#{$i} { padding-left: 1px * $i; }
   $i: $i - 10;
}

您可以透過使用以下命令，讓 SASS 監視該檔案，並每當 SASS 檔案發生變化時更新 CSS −

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

接下來，執行以上命令；它將自動建立 style.css 檔案，其程式碼如下 −

style.css

.paddding-50 {
   padding-left: 50px;
}

.paddding-40 {
   padding-left: 40px; 
}

.paddding-30 {
   padding-left: 30px; 
}

.paddding-20 {
   padding-left: 20px; 
}

.paddding-10 {
   padding-left: 10px; 
}

輸出

讓我們執行以下步驟，瞭解上述給定程式碼的工作原理 −

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

sass_control_directives_expressions.htm

列印頁面

前一個

下一個