編程教程sass教程 Sass to關鍵字
描述
@for指令使用關鍵字，指定從<start>值到<end>值之前的值的范圍。
語句
@for$varfrom<start>to<end>
下面簡要解釋語法。
$var:它表示變量的名稱，如$ i。
<start>和<end>:這些是SassScript表達式，將返回整數。如果<start>大于<end>，則計數器變量遞減，當<start>小于<end>時，計數器變量遞增。
例子
以下示例演示如何將@for指令與to關鍵字配合使用：
<html><head><title>Control Directives & Expressions</title><linkrel="stylesheet"type="text/css"href="style.css"/></head><body><pclass="p1">This is line one.</p><pclass="p2">This is line two.</p><pclass="p3">This is line three.</p><pclass="p4">This is line four.</p></body></html>
接下來，創建文件style.scss。
style.scss
@for$ifrom1to4{.p#{$i} { padding-left : $i * 10px; }}
您可以通過使用以下命令讓SASS查看文件，并在SASS文件更改時更新CSS：
sass--watch C:\ruby\lib\sass\style.scss:style.css
接下來執行上面的命令，它將自動創建style.css文件用下面的代碼：
style.css
.p1{padding-left:10px;}.p2{padding-left:20px;}.p3{padding-left:30px;}
輸出
讓我們執行以下步驟，看看上面的代碼如何工作：
將上述html代碼保存在@ for_to.html文件中。
在瀏覽器中打開此HTML文件，將顯示如下輸出。
