編程教程Sass through關鍵字
描述
@for指令使用關鍵字，通過它指定范圍，包括<start>和<end>的值。
語句
@for$varfrom<start>through<end>
下面簡要解釋語法。
$var:它表示變量的名稱，如$ i。
<start>和<end>:這些是SassScript表達式，將返回整數。如果<start>大于<end>，則計數器變量遞減，當<start>小于<end>時，計數器變量遞增。
例子
以下示例演示如何使用@for指令with through關鍵字：
<html><head><title>Control Directives & Expressions</title><linkrel="stylesheet"type="text/css"href="style.css"/></head><body><pclass="p1">This is first line.</p><pclass="p2">This is second line.</p><pclass="p3">This is third line.</p><pclass="p4">This is fourth line.</p></body></html>
接下來，創建文件style.scss。
style.scss
@for$ifrom1through4{.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;}.p4{padding-left:40px;}
輸出
讓我們執行以下步驟，看看上面的代碼如何工作：
將上述html代碼保存在@for_through.html文件中。
在瀏覽器中打開此HTML文件，將顯示如下輸出。
