锐客网

  1. 首页 > 睿知 > it技术 > >

Sass @while指令用法示例

IT知识SASS-SCSS

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="http://www.srcmini.com/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指令用法示例 创建的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指令用法示例】输出
Sass @while指令用法示例

    推荐阅读


    上一篇：Sass @warn 指令用法详解

    下一篇：Sass是什么（简要解释）