📌  相关文章
📜  在指令时进行SASS

📅  最后修改于: 2020-12-25 04:10:39             🧑  作者: Mango

Sass @while指令

Sass @while指令与@for指令非常相似。它还使用SassScript表达式，并迭代输出嵌套样式，直到语句返回false。每次迭代后，计数器的值都会更改(增加/减少)。

句法：

while(condition) {
  // CSS codes
}

Sass @while指令示例

让我们以一个示例来演示Sass @while指令的用法。我们有一个名为“ simple.html”的HTML文件，其中包含以下数据。

HTML档案：simple.html




   @while Directive Example
   


   
This line has 100 px padding. 

   
This line has 80 px padding.

   
This line has 60 px padding.

   
This line has 40 px padding.

   
This line has 20 px padding.

创建一个名为“ simple.scss”的SCSS文件，其中包含以下数据。

SCSS文件：simple.scss

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

将两个文件都放在根文件夹中。

现在，打开命令提示符并运行watch命令，以告知SASS监视文件并在更改SASS文件时更新CSS。

执行以下代码： sass –watch simple.scss：simple.css

它将在同一目录中自动创建一个名为“ simple.css”的普通CSS文件。

例如：

”Sass

创建的CSS文件“ simple.css”包含以下代码：

.paddding-100 {
  padding-left: 100px; }
.paddding-80 {
  padding-left: 80px; }
.paddding-60 {
  padding-left: 60px; }
.paddding-40 {
  padding-left: 40px; }
.paddding-20 {
  padding-left: 20px; }

现在，执行上面的html文件，它将读取CSS值。

输出：