个性化阅读
专注于IT技术分析

Sass @while指令用法示例

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

句法:

while(condition) {
  // CSS codes
}

Sass @while指令示例

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

HTML档案:simple.html

<!DOCTYPE html>
<html>
<head>
   <title>@while Directive Example</title>
   <link rel="stylesheet" type="text/css" href="simple.css"/>
</head>
<body>
   <p class="paddding-100">This line has 100 px padding. </p>
   <p class="paddding-80">This line has 80 px padding.</p>
   <p class="paddding-60">This line has 60 px padding.</p>
   <p class="paddding-40">This line has 40 px padding.</p>
   <p class="paddding-20">This line has 20 px padding.</p>
</body>
</html>

创建一个名为” 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 While指令1

创建的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值。

输出

Sass While指令2
赞(0) 打赏
未经允许不得转载:srcmini » Sass @while指令用法示例
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏